ブログの見た目を変えました。記事を探しやすく、読み始めやすく

Thu, 10 Sep 2026 01:00:00 +0900

2026年9月10日、ブログの見た目を変えました。

今回変えたかったのは、主に二つです。読みたい記事を見つけやすくすることと、記事を開いたら本文を読み始めやすくすること。

トップページの記事一覧をすっきりさせ、スマホで記事を開いたときの余白や目次も整理しました。

変更前後の画面を紹介しながら、作業中につまずいたことも書いておきます。

トップページで、記事を見つけやすくした

以前のトップページは、上の大きな背景画像が目立つデザインでした。その下にカテゴリへのリンクがあり、さらに下へ進むと記事一覧が出てきます。

記事の画像や紹介文も大きいため、最初の画面に入る記事は少なめでした。

変更前

新しいトップページでは、上の部分を小さくまとめました。記事一覧も、タイトルと小さな画像、日付、カテゴリを中心にしています。

変更後

同じ広さの画面でも、見える記事が増えました。まずタイトルを眺めて、気になった記事を開く。そんな使い方をしやすくしています。

スマホで、本文を読み始めやすくした

記事のページでは、本文にたどり着くまでの長さを見直しました。

タイトルの周りや画像の下にある余白を調整し、スマホの目次は最初は閉じた状態にしました。目次を使いたいときは、タップして開けます。

変更前

変更後

この例では、本文の始まりが画面の下のほうから、中央より少し下まで上がりました。

数字でいうと、画面の上から約803pxだったものが、約533pxになっています。高さ844pxの表示領域で比べた結果です。本文が上へ移った分、スクロールする前に読み始めやすくなりました。

ただ、本文を上へ寄せるために、画像を消したり文字を小さくしたりするのは避けました。画像も目次も残したうえで、余白や配置を整えています。

※比較画像は、変更前の公開サイトと、公開前に手元で確認した新デザインです。同じ画面サイズで、画像と文字の読み込みが終わってから撮影・計測しました。ここで比べているのは本文の位置で、読み込み速度ではありません。

画像は、全部同じ形にすればよいわけではなかった

作業の途中では、記事の最初にある画像を、すべて同じ横長の枠に収めてみました。

見た目はそろいますが、枠に合わない画像は端が切れてしまいます。そこで、記事の中では元の形を保ち、画像全体が見えるように戻しました。

最終的には、次のようにしています。

記事一覧の小さな画像は、枠の大きさをそろえる
記事を開いた先の画像は、全体を見せる

一覧では記事を選びやすく、記事の中では画像をきちんと見られるようにする。同じ画像でも、置く場所に合わせて扱いを変えました。

これは今回の変更作業中に起きた問題で、以前の公開サイトで画像が切れていたわけではありません。

一つの記事で直っていても、別の記事では崩れていた

確認中には、スマホで目次が二つ出る問題も見つかりました。記事の上に目次があるのに、読み進めると下にも同じ目次が出てきます。

少しややこしかったのは、記事によって、問題が出たり出なかったりしたことです。

原因は、記事の下に「関連記事」があるかどうかでした。

PCでは、目次と関連記事を本文の横に置いています。スマホでは、その横の部分が本文の下へ移ります。このとき、PC用の目次を隠す処理が抜けていました。

関連記事のない記事では、その部分が丸ごと消えるため、問題が見えません。関連記事のある記事を開いて、初めて余分な目次が残っていることに気づきました。

修正後は、スマホでは余分な目次を隠し、関連記事だけを残しています。

一つの記事がきれいに表示されると、ほかも大丈夫だと思ってしまいます。今回は、関連記事があるもの、ないものなど、違う種類のページを開いて確かめる必要がありました。

公開した後にも、表示が崩れた

手元での確認が終わり、公開した後にも問題がありました。

以前からブログを開いていたブラウザで、新しいデザインが崩れて表示されたのです。

ブラウザは、同じファイルを毎回読み込まなくて済むように、一度取得したものを保存しています。これを「キャッシュ」と呼びます。

今回は、ページの内容は新しくなったのに、色や配置を決めるファイル（CSS）は古いものが使われていました。新旧の組み合わせが合わず、表示が崩れていたわけです。

対処として、CSSを更新すると、そのファイルのURLも変わるようにしました。ブラウザに新しいファイルを読み込んでもらうためです。

修正後は、問題が出ていた同じブラウザで、保存済みのデータを手動で消さなくても正しく表示されることを確認しました。さらに、Aboutページと記事2本をスマホ幅とPC幅で開き、目次の重複や横にはみ出す表示がないことも確認しています。

自分の手元で整っただけでは、まだ終わりではありませんでした。公開した後、いつものブラウザでどう見えるかまで確かめる必要がありました。

次に直すときも、変更前の画面を残しておく

今回は公開前に、スマホとPCの両方で変更前後の画面を保存しました。この画像があるおかげで、どこが変わったのかを並べて見られます。

記事を探しやすくし、本文を読み始めやすくする。そのための変更でしたが、途中では画像が切れたり、一部の記事だけ目次が重複したりしました。公開後にも確認が必要でした。

次に見た目を変えるときも、変更前の画面を残す。種類の違う記事をいくつか開く。そして公開後にも見直す。

今回の経験を、次の手直しにも生かしていこうと思います。