【20日目】ブログタイトルをブラウザタブに反映できるようになった
Posted: Last Update:
サイトを作成し始めて20日目です。前進している…ような、していないような…。
ロードマップ
まずは進み具合をロードマップで確認しましょう。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 大枠の作成
- ヘッダの作成
- フッタの作成
- メイン部分の構成を作成
- リンクを開いた時の動きを作成
- ナビゲーションバーの作成
- メインコンテンツの作成←今ここ
- 関連情報エリアの作成
- 公開
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
今日やりたいこと
昨日はページ中央に表示するブログの内容の表示方法に装飾を施して、サイトもほんの少しブログっぽくなってきました。欲しいもののリストと完成を見比べるとこんな感じ。
- 掲題を目立たせつつもシンプルに読みやすくする←完成
- 投稿日と最終更新日を薄い字にして「読みたかったらちゃんと見えるけれど、主張しない」デザインにする←完成
- 箇条書き部分の装飾を作る←こだわらないことにした
- PHPやHTMLのコードを書いている部分をきちんと表示できるようにする←完成
- 画像を美しく表示できるようにする←完成
- 前の日と次の日のブログへのリンクを入れる
- 掲題をページのタイトルとして反映できるようにする
昨日はなかった「6.前の日と次の日のブログへのリンクを入れる」が増えています。考えたら必要なものってたくさんありますね。私の場合は思いつくまでに時間がかかるけど…。今日は6と7を完成させたい。そして、できればブログ全体のバランスも見直したいです。
「前の記事」「次の記事」のリンクの基礎を作る
今日は最初に、前の日と次の日へのリンクを作っていきたいです。これは全部のブログに共通部分なので、メインの部分を一時作成しているtest.txtに書いて試験してみたいと思います。前後の記事を実際に呼び出すのは後にして、まずは容れ物だけ作ってみます。どういうリンクがいいんでしょうね。単純に左右に区切って、左寄せで「前の記事」、右寄せで「次の記事」でいいいかな。これこそfloatの出番だと言う気がしてきました!さっそく書いてみます。
基本となるHTMLがこちら
<a href id="mainprelink" >【前の記事】<br></a>
<a href id="mainpostlink" >【次の記事】<br></a>
</div>
<p id="mainprepostlinkclear"></p>
適用するスタイルシートの設定がこちら。
#mainprepostlink{
padding: 2em 0em;
}
/* メインの前の日記へのリンク */
#mainprelink{
float: left;
width: 49%;
border-right: 1px solid grey;
}
/* メインの次の日記へのリンク */
#mainpostlink{
float: right;
width: 49%;
border-left: 1px solid grey;
text-align: right;
}
/* メインの前の日記、次の日記へのリンクボックスの設定を消す */
#mainprepostlinkclear{
clear: both;
}
実際に適用してみると、うまく左右に分かれました。
「前の記事」リンクから実際の記事を呼び出せるようにする
容れ物ができたので、前後の記事の情報をリンクに入れ込んでいきます。欲しいのは日付とタイトルのみです。日をまたいで検索しに行かなければならないので、そちらの設定に手間取りそうな予感がします。まずは、過去の記事からやってみることにしました。ナビゲーションバーで過去の記事を探しに行っているので、流用できそうです。ナビゲーションバーは今日を基準に記事を探しにいっていますが、今回は表示している記事の日付を基準にします。あと、記事の枚数(五記事を一記事に変える)だけ変えればよさそうです。
HTMLとPHPは以下のように設定しました。
$today = $articledate;
$date = new datetime($today);
$date->sub(new DateInterval('P0Y0M1D'));
$today = $date->format('Ymd');
$Oldest=20200801;
$i = 1;
break;
}
$filename = "$mypath/$category/$today.txt";
require("$mypath/$category/$today.txt");
echo '<a id="mainpostlink" href=', "$myurl/$category/$today", '>次の記事→</br><span id="mainprepostlinkdate">', $date->format('Y.m.d') ,'</span> ',$articletitle, '</a>';
$i = $i+1;
}
$today = $date->format('Ymd');
} while ($i < 2 );
実際に表示して見ると、こんな感じです。
見栄えが悪い…。と眺めていて気付いた!前の記事へのリンクを作っているのに、次の記事へのリンクの場所に入れてました。入れ替えなきゃ。
「次の記事」へのリンクも作る
次の日へのリンクも頑張って作ってみました。苦労したのが、最新の記事の場合どうするかです。最新の記事には、「次の記事」が存在しない。その場合どうするのか…。悩んだ末、1000日も更新しない状況だったらもうブログやってないだろうと、1000日先まで見に行くことにしました。$latestの部分ですね。
$date = newdatetime($articledate);
$date->add(new DateInterval('P0Y0M2D'));
$postdate = $date->format('Ymd');
$latest = new datetime($articledate);
$latest->add(new DateInterval('P0Y0M1000D'));
$i = 1;
break;
}
$filename = "$mypath/$category/$postdate.txt";
require("$mypath/$category/$postdate.txt");
echo '<a id="mainpostlink" href=', "$myurl/$category/$postdate", '>次の記事→</br><span id="mainprepostlinkdate">', $date->format('Y.m.d') ,'</span> ',$articletitle, '</a>';
$i = $i+1;
}
} while ($i < 2 );
今現在の見栄えはこんな感じです。
相変わらず見栄えが悪い…。どうしたものか。…深く考えずに見栄えは後日改めて時間をとって改善しよう。ブログ部分がひとまず完成したので、これまでtext4.txtとして編集していたものを、blogcontents.phpに変えて、中央部分の材料を置いている「main」フォルダの下に移しておきました。
ブログタイトルをページのタイトルにする
見栄えが悪いながらも前後へのリンクは一応形にはなったので、「7.掲題をページのタイトルとして反映できるようにする」に進んでしまいましょう。 ページのタイトルは、ブラウザのタブとか、検索したときにリンクの名前として表示されるあれです。この時点ではindex.phpに直接書き込んでしまいましょうか。index.phpの記述がだんだん長くなってきているのが気になっています。後でまとめて移動させてもいいかもしれません。
ブログのタイトルをページタイトにするためには、index.phpの「header」の中にある「title」を条件によって変える必要があります。呼び出されるページがindex.phpの場合は「サイトの紹介文」、それ以外の場合は「ブログのタイトルを表記」と場合分けして動かすだけでよさそうです。if文も書きやすそう。
書いたPHPはこんなものです。「$path」は「https://kamenokoki.com/」より後の部分を呼び出す変数が事前に指定されています。
if ($path1 == ""|| $path1 == "/index.php"){
echo '<title>【亀の子記】ど素人がブログ作成でお小遣い稼ぎを目指す</title>';
}
else{
require("$mypath/$category/$filenum.txt");
echo "<title>$articletitle</title>";
}
?>
苦労するかと思ったのに、意外と簡単にできました。今日の日記を開くとこんな感じ。【20日目】とタブに反映されています。(まだタイトルを書ききっていません)
また明日
ちょうどいいところで時間が来ました。サイトの見栄えは相変わらず悪いものの、ブログのページとタイトルの呼び出しができるようになったので、一歩前進したと思います!明日はindex.phpを開いた時のページをつくりつつ、サイトの見栄えを良くしていきたいと思います。