kamenokoki.com

【17日目】ナビゲーションバーがなんとか完成。新しいスマホも届いた

Posted:  Last Update:

  サイトを作成し始めて17日目になりました。公開すらできていませんが、一歩ずつ前に進んでいる実感はあります。

ロードマップ

進捗状況をロードマップで確認すると、ここまで来ています。公開まであと少しだ!

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
    • 大枠の作成
    • ヘッダの作成
    • フッタの作成
    • メイン部分の構成を作成
    • リンクを開いた時の動きを作成
    • ナビゲーションバーの作成 ← 今ここ
    • メインコンテンツの作成
    • 関連情報エリアの作成
    • 公開
  • 収益化に最適なサイトにアップグレードする
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

今日の計画

昨日は、URLやファイルパスを全てPHPで絶対リンクに設定することに成功し、ナビゲーションバーの作成にとりました。しかし、日記の内容をリンクに投入するためには、日記にも変更をくわえなければいけないことに気付きました。だいぶ横道にそれて、中途半端ながらもメインページをPHPの変数で呼び出せるようにする設定を完了。5日分ほどの日記をそれにあわせて書き換えました。さぁ、ナビゲーションバーのリンクを「それっぽく」しようと思ったところで昨日は時間切れ。今日はナビゲーションバーの形を整えていく作業をやります。

今日の計画はこんな感じ
  1. なんとなくおしゃれなボックスでリンクを囲む
  2. 日付は薄い字で小さく表示(PHPで記事から持ってくる)
  3. タイトルを表示(PHPで記事から持ってくる)
  4. 亀入れる?(←どうなの?)

ナビゲーションのリンクをなんとなくおしゃれな箱にいれる

まずは「1. なんとなくおしゃれなボックスでリンクを囲む」ですね。昨日色々考えて弄っていたのですが、理想的な形が分かりません。美術的センスがないとこういうのはなかなか難しいです…。他の人のブログを参考にしてみよう。Google検索で30件くらい見て周りました。

…余計分からなくなりました。

とりあえず、薄い線で丸っと囲っておくか。後から変更もできるので、とりあえず作ってみます。以下のようにスタイルシートを設定して、グレーの線で囲ってみました。リンク全体をHTMLのdivでくくって、この箱を適用してみましょぅ。「border-radius: 8px;」で角が丸くなっているのがこだわりポイントです。

.navlinkbox {
  position: relative;
  margin: 1em 0;
  padding: 0.3em 0.5em;
  border: solid 0.5px grey;
  border-radius: 8px;
}

日付は薄い色で表示したい

次に「2. 日付は薄い字で小さく表示(PHPで記事から持ってくる)」ですね。()内のPHPで記事から持ってくるは横に置いといて、設定だけ先にしましょう。どのように表示させるか少し迷いましたが、先ほど設定した箱の上部にかかる感じで表示したいかな。箱のタイトルとして日付を入れることにしました。薄い小さい字で日付が入ります。

.navlinkbox .box-title {
  position: absolute;
  display: inline-block;
  top: -0.5em;
  left: 0.5em;
  padding: 0 0.5em;
  line-height: 1;
  font-size: small;
  background: #FFF;
  color: grey;
}

ついでにリンクの位置も調整してみました。本文はHTMLのpを使ってみました。

.navlinkbox p {
  margin: 0em;
  padding: 0.3em 0em 0em 0em;/* パディングの変更 上 左 下 右*/
}

ここまで、まるで淀みなくできているように書いてしまいましたが、けっこう時間がかかっています。初めてから45分くらい経っているかな?

新しいスマホが届いた話をさせてください

作業をしている間に、今日届いたばかりのスマホ、Moto g8のアップデートがすべて完了していました!

Xperia Z3 Compactの前は「motorola Razr i」を白ロムで使っていました。その時は設定に丸2日かかったんですよ。今回も覚悟していたのに、すごく早かったです。スマホ画面に表示されるチュートリアル通りに進めていくと、勝手にDocomoの電話にもネットワークにつながるし、Googleから連絡先とかアプリとかも勝手に同期してくれるし、何もせずにいつの間にか設定が終っていました。入力したのは、Googleアカウントと、Docomoメールのパスワードだけ。すっごい便利!あとはシステムやソフトウェアやアプリやらのアップデートをスマホに任せましたが、Wifiにつないでいたおかげもあって、さくさく進みました。全部で2時間もかからずに終った。途中で再起動を求められていることに気付かずに放置していたので、本当はもっと早く終っていたかもしれません。

Androidが賢いのか、Googleが賢いのか、Motorolaが賢いのか。SIMフリースマホ、全然めんどくさくないですよ~。

長くなってしまいました。ブログに戻りましょう。

ここまでに作ったものを組み合わせる

さきほと作った箱と日付のHTMLの設定を、昨日作った「最新記事5件を呼び出す」PHPに入れていきましょう。最後に一覧へのリンクも入れてみました。何度かテストしながら書き直し書き直し、最終的にこんな感じにまとまりました。

<?php
date_default_timezone_set('Asia/Tokyo');
$today = date("Ymd");
$Oldest=20200801;
$i = 1;
do {
  $date = new datetime($today);
  $filename = "$mypath/blog/$today.txt";
    if (file_exists($filename)) {
      require_once("$mypath/blog/$today.txt");
      echo '<a id="navlinkbase" href=', "$myurl/blog/$today", '><div class="navlinkbox"><span class="box-title">', $date->format('Y.m.d') ,'</span><p> ',$articletitle, '</p></div></a>';
      $i = $i+1;
    }
  $date->sub(new DateInterval('P0Y0M1D'));
  $today = $date->format('Ymd');
} while ($i < 6);
?>
<p id="navfont" style="text-align:right;">
<?php
echo "<a href=$myurl/main/list.txt>一覧へ移動</a></br>";;
?>
</p>

形は決まったが、内容がおかしい…

うまくいった!と思ったのも束の間。メインパーツは15日の日記にアクセスしてるはずなのに、12日の日記が表示されていることに気付きました。ナビゲーションバーで呼び出している過去記事5件の一番古い日付と同じです。おかしい…。目を皿のようにしてPHPを確認しましたが、原因が分からない…。こんなときは検索だ!

検索しまくり、原因を突き止めるまで45分。時間かかりすぎた。

「require_once」が悪さをしていました。続くメインページにも同じ変数($articletitleとか)を使っているのですが、「require_once」を使うと、変数の書き直しができないらしいです。「require_once」を「require」に変更すると、メイン部分の変数がリセットされ、問題なくURLに入れた日付の日記を呼び出せるようになりました!

今の画面はこんな感じです。
2020.09.16 ブログページがなんとか完成

今日はここまで

出来上がったもの、なんだか理想と違います。そして、センスがなさ過ぎてなにが悪いのか分からない…。でも、今弄り回してもよく分からなくなるだけだと思うので、今日はナビゲーションが完成したことにしておきます。入れたい物は入れられたし、一歩前進したと思う!

今日の目標が終ったところでちょうど時間切れです。ビジュアル的にはいまいちなサイトですが、達成感は得られました(笑)。明日は、メインコンテンツの作成に取り掛かりたいと思います。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告