ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【21日目】トップページの作成にとりかかった

Posted:2020.09.20　 Last Update:2020.11.03

サイトを作成し始めて21日目になりました。これまでの日記をほんの少しですが、読み返したら、毎日少しずつ前進している実感がわいて元気が出ました。

ロードマップ

これまでの進み具合をロードマップで見ると、こんな感じです、

準備 - サイトの全体像を決める
使用するプログラミング言語を決めて環境を整える
サイトの基本構造を作って公開する

大枠の作成
ヘッダの作成
フッタの作成
メイン部分の構成を作成
リンクを開いた時の動きを作成
ナビゲーションバーの作成
メインコンテンツの作成　←　今ここ
関連情報エリアの作成
公開

収益化に最適なサイトにアップグレードする
GoogleアドセンスとAmazonアソシエイトの申し込みをする
ローカルで簡単に入力ができるようにフォームを作る
フォローアップ - より収益化に向いたサイト構造に変更する

今日はトップページを作りたい

今日はindex.phpで表示するページを作りたいと思います。時間が余ったら、サイト全体の見栄えも整えていきたいです。まずはindex.phpをどのように作るか計画を立てましょう。欲しい内容は以下の通り。

サイトの紹介文
最新の日記5件
過去の日記を、年別、月別に表示、非表示する
記事の検索ボックスを作る

手始めに、テスト用にtext5.phpを作りました。index.phpが要求された時に表示するページです、

これまでに作ったものを使いまわす！

サイトの紹介文や最新の記事5件はナビゲーションバーで作ったものを下地に進めて行くことにしました。内容は付け足さなければいけませんが、基本内容は同じなので。navigationの内容をまるっとtext5.phpにコピペして、index.phpで呼び出せるようにしてきました。今現在の見た目はこんな感じです。
2020.09.20　index.phpにナビゲーションの内容を引っ張って来た

サイト全体に一括で適用できるスタイルシートを作った

まずは、今設定されているナビゲーションバー用のスタイルシートを外して、それなりな見栄えにしたいと思います。

と、思っていましたが、だんだん面倒くさくなってきた。もう、サイトごと一括で指定する方が早くない？どうせ使いまわすんだし…。一括で変更してしまえ！h1からh4までの設定と、リンクの装飾も基準となるものを作りました。これで、サイト内のh1～h4と、リンクは共通のスタイルになります。今までナビゲーションバーなどで使ってしまったものはおいおい変えていきます。設定したものは以下のようになっています。

h1{
color: #000000;
font-size: 2em;
font-weight: bold;
font-family: 'メイリオ', 'Meiryo', sans-serif;
margin: 0.5em 0 0.5em 0;
padding: 0 0 0 0;
}
h2{
font-size: 1.5em;
font-weight: bold;
font-family: 'メイリオ', 'Meiryo', sans-serif;
margin: 0.5em 0 0.5em 0;
padding: 0 0 0 0;
color: #000000;
}
h3{
font-size: 1.2em;
font-weight: bold;
font-family: 'メイリオ', 'Meiryo', sans-serif;
margin: 0.5em 0 0.5em 0;
padding: 0 0 0 0;
color: #000000;
}
h4{
font-size: 1em;
font-weight: bold;
font-family: 'メイリオ', 'Meiryo', sans-serif;
margin: 0.5em 0 0.5em 0;
padding: 0 0 0 0;
color: #000000;
}
a:link{text-decoration:none; color: #008000;}
a:visited{ text-decoration:none; color: #004400;}
a:hover{color: #FF570D; text-decoration:underline;}
a:active{color: #FF570D; text-decoration:underline;}
a:focus{color: #FF570D; text-decoration:underline;}

実際に適用するとこんな感じです。最初と比べると、サイト全体にカラーが見えて来た気がする。しかも、リンクを選択するとオレンジになる。かわいい（←独りよがりかもしれない…） 2020.09.20　一括で設定したスタイルシートの見栄え

ブログ一覧をおしゃれにする

では、中央に表示するリンクの一覧をおしゃれっぽくしていきます。左側に日付、右側にタイトルを入れていこうかな。画像も欲しいかな…？重くなっちゃうかな？とりあえず、書いてみます。

だいぶ時間がかかりましたが、出来上がったPHPはこんな感じです。

<?php
date_default_timezone_set('Asia/Tokyo');
$today = date("Ymd");
$Oldest=20200801;
$i = 1;
do {
　if ($today<$Oldest){
　break;
　}
　$date = new datetime($today);
　$filename = "$mypath/blog/$today.txt";
　　　if (file_exists($filename)) {
　　　　　require("$mypath/blog/$today.txt");
　　　　　echo '<a href=', "$myurl/blog/$today", '><div><img　id="indexlinkimg" src="',$articletimg,'" src="',$date->format('Y.m.d'),'ブログの画像">', $date->format('Y.m.d') ,' ',$articletitle, '</div></a>';
　　　　　$i = $i+1;
　　　}
　$date->sub(new DateInterval('P0Y0M1D'));
　$today = $date->format('Ymd');
} while ($i < 6);
?>

適用したスタイルシートがこちら。

#indexlinkimg{
    float:left;
    width: 200px;
    height: 100px;
    object-fit: contain;
    margin: 0.5em 1em 0.5em 0;
    background-color: #FFFFEE;
}

#indexlinktime{
    color:grey;
}

#indexlinkclear{
    clear: both;
    margin:0;
    padding:0;
}

ついでに過去の投稿も引っ張って来られるようにしました。実際に表示すると…うん、画像が変わり映えしないせいで地味（笑）。そのうち色のついた画像も出てくるでしょう。
2020.09.20 Indexページのリンクを装飾した

テストをするのに、過去の日記を綺麗にする必要があった

そして、この下の画面にスクロールして気付きました。9月10日以前の日記の形式をまだ綺麗にしていないので、ベタ打ちの日記がそのまま呼び出されてしまっている…。「過去の投稿」の部分を綺麗にする前に、まずは以前に書いた日記の形式をきれいにしないとテストもできない…。作業時間が怖いですが、いつか書き直さなくては行けないので、頑張ってきます！

とっても時間がかかりました。タイムアップからさらに30分頑張ってしまった。時間はかかりましたが、なんとか全ての日記を綺麗に表示できるように変更できました。一部画像が醜いので、必要な部分だけにトリミングする作業が残っています。

作業中に昨日作ったページ下部の「前の記事」「次の記事」リンクの動作がおかしいことに気づいて修正もしました。何度か$articledateという変数を読み込んでいるのですが、使いまわしているせいで、過去のリンクの$articledateを最新の情報として持ってきてました。「require("$mypath/$category/$filenum.txt");」と先頭に書くことで、毎回どこに見に行くかを指定。エラー回避できました。新しいコードがこちら。

<?php
require("$mypath/$category/$filenum.txt");
$date = new datetime($articledate);
$date->sub(new DateInterval('P0Y0M1D'));
$predate = $date->format('Ymd');
$Oldest=20200801;
$i = 1;
do {
　if ($predate<$Oldest){
　break;
　}
　$filename = "$mypath/$category/$predate.txt";
　　　if (file_exists($filename)) {
　　　　　require("$mypath/$category/$predate.txt");
　　　　　echo '<a id="mainprelink" href=', "$myurl/$category/$predate", '>←前の記事', $date->format('Y.m.d') ,' ',$articletitle, '</a>';
　　　　　$i = $i+1;
　　　}
　$date->sub(new DateInterval('P0Y0M1D'));
　$predate = $date->format('Ymd');
} while ($i < 2 );
?>

<?php
require("$mypath/$category/$filenum.txt");
$date = new datetime($articledate);
$date->add(new DateInterval('P0Y0M1D'));
$postdate = $date->format('Ymd');
$latest = new datetime($articledate);
$latest->add(new DateInterval('P0Y0M100D'));
$i = 1;
do {
　if ($date == $latest){
　break;
　}
　$filename = "$mypath/$category/$postdate.txt";
　　　if (file_exists($filename)) {
　　　　　require("$mypath/$category/$postdate.txt");
　　　　　echo '<a id="mainpostlink" href=', "$myurl/$category/$postdate", '>次の記事→', $date->format('Y.m.d') ,' ',$articletitle, '</a>';
　　　　　$i = $i+1;
　　　}
　$date->add(new DateInterval('P0Y0M1D'));
　$postdate = $date->format('Ymd');
} while ($i < 2 );
?>

コードがどんどん長くなっていきます…。もっと美しく書く方法がもしかしたらあるのかもしれませんが、今はこれで精一杯です。
2020.09.20 前の記事、次の記事へのリンクの動作をなおした

明日やること

明日やりたいことを、忘れないようにメモしておきます。

過去の画像を見やすいように修正する
日記がだらだらと読みづらい。途中に小見出しをつけて読みやすくしたらどうだろう
ナビゲーションバーの要らないスタイルシートの設定を綺麗にする
過去の投稿を年ごと、月ごとにまとめる。クリックで開くようにする。
過去の投稿に対しては画像は必要ないのでは？ページも重くなるし。検討すること
サイトが地味で読みにくい。改善案を練ること

では、また明日…。