kamenokoki.com

【20日目】ブログタイトルをブラウザタブに反映できるようになった

Posted:  Last Update:

サイトを作成し始めて20日目です。前進している…ような、していないような…。

ロードマップ

まずは進み具合をロードマップで確認しましょう。

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

今日やりたいこと

昨日はページ中央に表示するブログの内容の表示方法に装飾を施して、サイトもほんの少しブログっぽくなってきました。欲しいもののリストと完成を見比べるとこんな感じ。

  1. 掲題を目立たせつつもシンプルに読みやすくする←完成
  2. 投稿日と最終更新日を薄い字にして「読みたかったらちゃんと見えるけれど、主張しない」デザインにする←完成
  3. 箇条書き部分の装飾を作る←こだわらないことにした
  4. PHPやHTMLのコードを書いている部分をきちんと表示できるようにする←完成
  5. 画像を美しく表示できるようにする←完成
  6. 前の日と次の日のブログへのリンクを入れる
  7. 掲題をページのタイトルとして反映できるようにする

昨日はなかった「6.前の日と次の日のブログへのリンクを入れる」が増えています。考えたら必要なものってたくさんありますね。私の場合は思いつくまでに時間がかかるけど…。今日は6と7を完成させたい。そして、できればブログ全体のバランスも見直したいです。

「前の記事」「次の記事」のリンクの基礎を作る

今日は最初に、前の日と次の日へのリンクを作っていきたいです。これは全部のブログに共通部分なので、メインの部分を一時作成しているtest.txtに書いて試験してみたいと思います。前後の記事を実際に呼び出すのは後にして、まずは容れ物だけ作ってみます。どういうリンクがいいんでしょうね。単純に左右に区切って、左寄せで「前の記事」、右寄せで「次の記事」でいいいかな。これこそfloatの出番だと言う気がしてきました!さっそく書いてみます。

基本となるHTMLがこちら

<div id="mainprepostlink">
<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;
}

実際に適用してみると、うまく左右に分かれました。
2020.09.19 左右に別れた前の日と次の日のブログへのリンク

「前の記事」リンクから実際の記事を呼び出せるようにする

容れ物ができたので、前後の記事の情報をリンクに入れ込んでいきます。欲しいのは日付とタイトルのみです。日をまたいで検索しに行かなければならないので、そちらの設定に手間取りそうな予感がします。まずは、過去の記事からやってみることにしました。ナビゲーションバーで過去の記事を探しに行っているので、流用できそうです。ナビゲーションバーは今日を基準に記事を探しにいっていますが、今回は表示している記事の日付を基準にします。あと、記事の枚数(五記事を一記事に変える)だけ変えればよさそうです。

HTMLとPHPは以下のように設定しました。

<?php
$today = $articledate;
$date = new datetime($today);
$date->sub(new DateInterval('P0Y0M1D'));
$today = $date->format('Ymd');
$Oldest=20200801;
$i = 1;
do {
if ($today<$Oldest){
break;
}
$date = new datetime($today);
$filename = "$mypath/$category/$today.txt";
if (file_exists($filename)) {
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;
}
$date->sub(new DateInterval('P0Y0M1D'));
$today = $date->format('Ymd');
} while ($i < 2 );
?>

実際に表示して見ると、こんな感じです。 2020.09.19次の日のリンクを入れてみた

見栄えが悪い…。と眺めていて気付いた!前の記事へのリンクを作っているのに、次の記事へのリンクの場所に入れてました。入れ替えなきゃ。

「次の記事」へのリンクも作る

次の日へのリンクも頑張って作ってみました。苦労したのが、最新の記事の場合どうするかです。最新の記事には、「次の記事」が存在しない。その場合どうするのか…。悩んだ末、1000日も更新しない状況だったらもうブログやってないだろうと、1000日先まで見に行くことにしました。$latestの部分ですね。

<?php
$date = newdatetime($articledate);
$date->add(new DateInterval('P0Y0M2D'));
$postdate = $date->format('Ymd');
$latest = new datetime($articledate);
$latest->add(new DateInterval('P0Y0M1000D'));
$i = 1;
do {
if ($date == $latest){
break;
}
$date = new datetime($postdate);
$filename = "$mypath/$category/$postdate.txt";
if (file_exists($filename)) {
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;
}
$date->add(new DateInterval('P0Y0M1D')); $postdate = $date->format('Ymd');
} while ($i < 2 );
?>

今現在の見栄えはこんな感じです。
2020.09.19 前と次の記事へのリンクを作ったけれど見栄えが悪い

相変わらず見栄えが悪い…。どうしたものか。…深く考えずに見栄えは後日改めて時間をとって改善しよう。ブログ部分がひとまず完成したので、これまでtext4.txtとして編集していたものを、blogcontents.phpに変えて、中央部分の材料を置いている「main」フォルダの下に移しておきました。

ブログタイトルをページのタイトルにする

見栄えが悪いながらも前後へのリンクは一応形にはなったので、「7.掲題をページのタイトルとして反映できるようにする」に進んでしまいましょう。 ページのタイトルは、ブラウザのタブとか、検索したときにリンクの名前として表示されるあれです。この時点ではindex.phpに直接書き込んでしまいましょうか。index.phpの記述がだんだん長くなってきているのが気になっています。後でまとめて移動させてもいいかもしれません。

ブログのタイトルをページタイトにするためには、index.phpの「header」の中にある「title」を条件によって変える必要があります。呼び出されるページがindex.phpの場合は「サイトの紹介文」、それ以外の場合は「ブログのタイトルを表記」と場合分けして動かすだけでよさそうです。if文も書きやすそう。

書いたPHPはこんなものです。「$path」は「https://kamenokoki.com/」より後の部分を呼び出す変数が事前に指定されています。

<?php
if ($path1 == ""|| $path1 == "/index.php"){
echo '<title>【亀の子記】ど素人がブログ作成でお小遣い稼ぎを目指す</title>';
}
else{
require("$mypath/$category/$filenum.txt");
echo "<title>$articletitle</title>";
}
?>

苦労するかと思ったのに、意外と簡単にできました。今日の日記を開くとこんな感じ。【20日目】とタブに反映されています。(まだタイトルを書ききっていません)
2020.09.19 ページにタイトルを反映させた画像

また明日

ちょうどいいところで時間が来ました。サイトの見栄えは相変わらず悪いものの、ブログのページとタイトルの呼び出しができるようになったので、一歩前進したと思います!明日はindex.phpを開いた時のページをつくりつつ、サイトの見栄えを良くしていきたいと思います。

記事をシェアする

亀の子に連絡

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

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

広告