【22日目】トップページの作成をするつもりが、サイト全体のデザインを見直す日になった

サイトを作成し始めて22日目です。公開まであと少しと信じて今日も頑張ります。

ロードマップ

これまでの進み具合をみるとこんな感じです。

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

今日はサイトのトップページを完成させたい

昨日はトップページの作成にとりかかりました。Index.phpを開くと、サイトの説明文や、ブログの一覧が出てくるようになりました。今日やりたいことは下の6点。

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

過去の記事を修正する1番と2番は一度にやろうとするとストレスがたまりそうなので、今日から少しずつ進めます。今日のノルマは後回し。

まずは散らかったスタイルシートを綺麗にする

3番の「ナビゲーションバーの要らないスタイルシートの設定を綺麗にする」からやっつけていきます。スタイルシートを無駄遣いしていた小見出しを、昨日一括定義したh4に変更。リンクに意味なくついていたスタイルシートも削除。見た目はほぼ変わらず、スタイルシートがコンパクトになりました。ついでにスタイルシートの中で気付いたことをいくつか修正しました。

まずは、ブログ部分に入れる画像の幅。「width:100%;」となっていたのを「max-width:100%;」に修正しました。画像のサイズはまちまちです。中には画面の幅よりも小さいものもあります。「width:100%;」と設定していると、画面幅いっぱい（100%）まで画像が引き延ばされてしまうんですね。これを回避するには、widthの代わりにmax-widthを使います。max-widthだと、あくまでも最大値が100%。100%幅よりも大きい画像は100%まで縮小してくれる一方で、100%よりも小さい画像もとのサイズで表示さされます。実際のスタイルシートの設定はこんな感じです。

これで、小さな画僧が大きくなってしまうのを回避できました。

数日気がかりだった「前の記事」「次の記事」も綺麗にできた

次に修正したのが、「前の記事」「次の記事」へのリンクの幅。なんだかおさまりが悪いと作ったときにぼやいていたのですが、設定が悪いことに気が付きました。floatを使って一番左によった箱と、一番右に寄った箱を作りたいときは、親要素に100%と指定しなくてはいけませんでした！ついでに、上のブログ記事との隙間も広めに取りました(paddingで設定)。新しいスタイルシートがこちら。

こうだったのが、

こうなりました。

ほんの少しですが、ユーザビリティが上がった気がする。隙間が大きいだけで、リンクがそれぞれ独立して見えます。

サイトの見栄えがどうしても気になって予定変更

自画自賛して気分を盛り上げつつ、次に行きます。順番通りなら4番に行くところですが、ちょっと気になって色々と検索してしまったので、「6.サイトが地味で読みにくい。改善案を練ること」に進みたいと思います。

いろいろなサイトを見て周りました。私の美的センスは対して磨けませんが、盗んでくることならできるだろうと集客率が高そうなサイトを分析。結果、いくつか傾向があることが分かりました。

1. テーマカラーがある。
   主にテーマカラー一色と、その補色一色を使って構成している。
   すごいところだと、写真も全て色調をそろえていた！
2. ページの幅は1,200px~1,260pxが多い
   サイドバーを除いた本記事部分の幅が900px~1,000pxになる
3. 記事は左、サイドバーは右が多い
4. 下に関連情報を入れているブログは少ない。右のバーに入れてる
5. ヘッダについてるリンクがnavigation、サイドバーはasideで設定されていることがほとんど
6. ブログのロゴよりも、記事の見出しの方が目立っている
7. 小見出しを使って、記事を小分けにしている。
   ひとつの小見出しの中身はpcの立幅に収まるくらいにされている

google検索で上位に出て来た記事を読んでブログ構成の方針を決めていましたが、自分で見てみるとちょっと結果が違っていました。分析、してみるものですね。

せっかくなので分析結果を自分のサイトにあてはめてみた

計画通りに進んでいないことも気になりますが、せっかくなので自分のサイトに当てはめて修正していきたいと思います！

「1.テーマカラーがある」。このサイトには既に緑とオレンジを使っているので、この2色をテーマカラーに据えたいと思います。なんと、補色です。私、知らないうちに賢いことしてた！カラーコードで言うと、緑が「#008000」、オレンジが「#FF570D」。他に使っているのが、codeの背景色「#FFFFEE」(ベージュ)です。これ以外の色は使わないように気をつけなければ。ここで、アイコンの色が基準色と違うことに気づいて、アイコンを作り直しました。亀の画像をお借りしているICOOON MONOで、色指定をきちんとして作り直した。簡単で良かったです。

色の次はページ幅も変えてみる

次！「2.ページの幅は1,200px~1,260pxが多い」

スタイルシートでいくつか変えるだけなので、早速変更。CSSを開いて、widthで検索して、1,000pxに設定していたところを1,200pxにしてみました。画面を表示すると…、ええっ！！読みやすい！！これには少し驚きました。画面の幅を変えるだけでこんなに読みやすくなるとは…。

画像で伝わるでしょうか？変更前

変更後

ナビゲーションや関連情報を一気に修正

次！「3.記事は左、サイドバーは右が多い」「4.下に関連情報を入れているブログは少ない。右のバーに入れてる」「5.ヘッダについてるリンクがnavigation、サイドバーはasideで設定されていることがほとんど」一気にやります。

先に4番を対処、関連情報として作っていた「aside」をバッサリ処分します。サイトを作成しつつ、「ここに何を入れよう…」と悩んでしたので未練はない(笑)。index.phpに書かれていた「main.php」へのリンクを削除して、「main.php」ファイルも削除したら終わりです。

次に「3.記事は左、サイドバーは右が多い」。これは、index.phpから呼び出しているナビゲーションバーとメインの読み込みの順番を変えるだけで済みました。Flexboxを使っているので簡単ですね。間に隙間ができるように設定していたので、右と左を入れ替えておきます。ついでにナビゲーションバーが広すぎるように思えたので狭めておきました。

今の画面がこんな感じです。

パーツの名前修正にVisual Studio Codeが大活躍

次、「5.ヘッダについてるリンクがnavigation、サイドバーはasideで設定されていることがほとんど」これは名前を入れ替えるだけなのですが、こういう作業って面倒ですよね。でも、今の私には「Visual Studio Code」という心強い味方がいます！そうです、黒背景で文字が赤くなったり青くなったりする、エンジニア気分を味わえるあいつです。 「Visual Studio Code」の「Edit」から「Replace in files」を使うと、該当の語句が含まれるファイルが全て表示されます。全てのファイルを一括で置き換えすることもできるし、ファイルごとに置き換えすることもできるんです。
すごくないですか？
すごくないですか？
とってもすごいので、2回繰り返してみました。

簡単に置き換えられました！すっごい便利。動作確認もしましたが、問題ありません。

サイトで一番目立つのはサイト名ではなく記事のタイトル

次！「6.ブログのロゴよりも、記事の見出しの方が目立っている」にとりかかります。見て回ったブログでは、意外とヘッダの縦幅はとっているものが多かったです。しかし、ヘッダの中の文字は意外と小さい。

同じようなバランスにするために、まずはヘッダを編集します。最初にブログタイトルを編集。h1にしていたのを普通の文字にしておきます。亀のアイコンも削除しました。太字で、隣に来るリンクとのバランスをとりました。リンク部分はなにも変えなくていいのですが、亀がいなくなって寂しいな！亀いれとこうかな！スタイルシートとHTMLはこんな感じになりました。

次にブログタイトルを大きくします。これは、今h2を使っているのをh1に直すだけです。

結果がこちら。

結局ブログ全体のバランスで迷走する…

できた！と喜んだのも柄の間でした。シンプルだなー。白いなー。

あまりにも白いので、テーマカラーを前面に押し出すことにしました。ヘッダ部分を緑にしてみます！失敗するといけないので、現在のスタイルシートは別に保存しておきました。これでいつでももとのサイトに戻れます。さっそく、ヘッダ部分を背景を緑にして、文字を全て白くしてみました。

今度は派手だな！元に戻して、ブログのタイトルをいじった方がいいかな？でも、index.phpを表示したら意外といい…気がする…？

迷走している間に時間が来た

どうしよう、どうしよう、と迷っている間に今日は時間が来てしまいました。

「7.小見出しを使って、記事を小分けにしている」に関してはブログを書き直すときに調整していきます。最初に書いたように、過去のブログの調整を少しずつやらなければいけません。今日はまず2件やっておきました。明日は、今日やる予定だった4番から取り掛かろうと思います。サイトの見栄えはまた考えよう…。

4. 過去の投稿を年ごと、月ごとにまとめる。クリックで開くようにする。
5. 過去の投稿に対しては画像は必要ないのでは？ページも重くなるし。検討すること
6. サイトが地味で読みにくい。改善案を練ること

記事をシェアする

亀の子に連絡

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