ブログの見た目を変えました。記事を探しやすく、読み始めやすく
この記事の概要
2026年9月10日、ブログの見た目を変えました。
今回変えたかったのは、主に二つです。読みたい記事を見つけやすくすることと、記事を開いたら本文を読み始めやすくすること。
トップページの記事一覧をすっきりさせ、スマホで記事を開いたときの余白や目次も整理しました。
変更前後の画面を紹介しながら、作業中につまずいたことも書いておきます。
トップページで、記事を見つけやすくした
以前のトップページは、上の大きな背景画像が目立つデザインでした。その下にカテゴリへのリンクがあり、さらに下へ進むと記事一覧が出てきます。
記事の画像や紹介文も大きいため、最初の画面に入る記事は少なめでした。
変更前
新しいトップページでは、上の部分を小さくまとめました。記事一覧も、タイトルと小さな画像、日付、カテゴリを中心にしています。
変更後
同じ広さの画面でも、見える記事が増えました。まずタイトルを眺めて、気になった記事を開く。そんな使い方をしやすくしています。
スマホで、本文を読み始めやすくした
記事のページでは、本文にたどり着くまでの長さを見直しました。
タイトルの周りや画像の下にある余白を調整し、スマホの目次は最初は閉じた状態にしました。目次を使いたいときは、タップして開けます。
変更前
変更後
この例では、本文の始まりが画面の下のほうから、中央より少し下まで上がりました。
数字でいうと、画面の上から約803pxだったものが、約533pxになっています。高さ844pxの表示領域で比べた結果です。本文が上へ移った分、スクロールする前に読み始めやすくなりました。
ただ、本文を上へ寄せるために、画像を消したり文字を小さくしたりするのは避けました。画像も目次も残したうえで、余白や配置を整えています。
※比較画像は、変更前の公開サイトと、公開前に手元で確認した新デザインです。同じ画面サイズで、画像と文字の読み込みが終わってから撮影・計測しました。ここで比べているのは本文の位置で、読み込み速度ではありません。
画像は、全部同じ形にすればよいわけではなかった
作業の途中では、記事の最初にある画像を、すべて同じ横長の枠に収めてみました。
見た目はそろいますが、枠に合わない画像は端が切れてしまいます。そこで、記事の中では元の形を保ち、画像全体が見えるように戻しました。
最終的には、次のようにしています。
- 記事一覧の小さな画像は、枠の大きさをそろえる
- 記事を開いた先の画像は、全体を見せる
一覧では記事を選びやすく、記事の中では画像をきちんと見られるようにする。同じ画像でも、置く場所に合わせて扱いを変えました。
これは今回の変更作業中に起きた問題で、以前の公開サイトで画像が切れていたわけではありません。
一つの記事で直っていても、別の記事では崩れていた
確認中には、スマホで目次が二つ出る問題も見つかりました。記事の上に目次があるのに、読み進めると下にも同じ目次が出てきます。
少しややこしかったのは、記事によって、問題が出たり出なかったりしたことです。
原因は、記事の下に「関連記事」があるかどうかでした。
PCでは、目次と関連記事を本文の横に置いています。スマホでは、その横の部分が本文の下へ移ります。このとき、PC用の目次を隠す処理が抜けていました。
関連記事のない記事では、その部分が丸ごと消えるため、問題が見えません。関連記事のある記事を開いて、初めて余分な目次が残っていることに気づきました。
修正後は、スマホでは余分な目次を隠し、関連記事だけを残しています。
一つの記事がきれいに表示されると、ほかも大丈夫だと思ってしまいます。今回は、関連記事があるもの、ないものなど、違う種類のページを開いて確かめる必要がありました。
公開した後にも、表示が崩れた
手元での確認が終わり、公開した後にも問題がありました。
以前からブログを開いていたブラウザで、新しいデザインが崩れて表示されたのです。
ブラウザは、同じファイルを毎回読み込まなくて済むように、一度取得したものを保存しています。これを「キャッシュ」と呼びます。
今回は、ページの内容は新しくなったのに、色や配置を決めるファイル（CSS）は古いものが使われていました。新旧の組み合わせが合わず、表示が崩れていたわけです。
対処として、CSSを更新すると、そのファイルのURLも変わるようにしました。ブラウザに新しいファイルを読み込んでもらうためです。
修正後は、問題が出ていた同じブラウザで、保存済みのデータを手動で消さなくても正しく表示されることを確認しました。さらに、Aboutページと記事2本をスマホ幅とPC幅で開き、目次の重複や横にはみ出す表示がないことも確認しています。
自分の手元で整っただけでは、まだ終わりではありませんでした。公開した後、いつものブラウザでどう見えるかまで確かめる必要がありました。
次に直すときも、変更前の画面を残しておく
今回は公開前に、スマホとPCの両方で変更前後の画面を保存しました。この画像があるおかげで、どこが変わったのかを並べて見られます。
記事を探しやすくし、本文を読み始めやすくする。そのための変更でしたが、途中では画像が切れたり、一部の記事だけ目次が重複したりしました。公開後にも確認が必要でした。
次に見た目を変えるときも、変更前の画面を残す。種類の違う記事をいくつか開く。そして公開後にも見直す。
今回の経験を、次の手直しにも生かしていこうと思います。