ブログの見た目を整えました｜スマホで記事を探しやすいモノトキへ

モノトキのトップページを、少しずつ整えています。今回見直したのは、スマートフォンで開いたときの入口や、記事の並び方、画像と文字の見せ方です。

お出かけ、愛用品、Macやブログ運営。テーマへの入口を作っても、それが画面を大きく占めていたり、記事の一覧が見づらかったりすると、読みたいものを探すまでに時間がかかります。

そこで、どんな見た目にするかを試しながら、スマホで記事を探し始めやすい形に調整しました。今回は、写真の入口を試してから丸アイコンへ戻したことも含めて、見た目を整えた記録をまとめます。

本文中のCSSは、今回の変更に関係する箇所だけの抜粋です。モノトキで使っているCocoonの構造と、自作のカテゴリー用HTMLを前提にしています。追加CSS全体の差し替え用ではなく、各調整の考え方を示すために載せています。

今回、見直したところ

見直した場所	整えた内容
テーマへの入口	写真の3枚入口を試した後、4つの丸アイコンへ
新着記事の一覧	画像を左、タイトルや説明を右に配置
余白と文字	大きく空いていた部分を詰め、見出しや記事タイトルを調整
記事の画像	アイキャッチの見切れを抑える表示へ
PCの入口	ヘッダーメニューと重なるアイコンを非表示に
表示の切り替え	スマホとPCの間の画面幅でも入口を残す設定へ

見た目を派手にするよりも、次に読む記事を選びやすくしたい。今回の調整では、そこを大事にしました。

写真の3つの入口から、4つの丸アイコンへ

最初は「大分・九州のお出かけ」「40代の愛用品」「Mac・運営」の写真を、3つ横並びにする形を試しました。縦に大きく場所を取らないよう、正方形にしたり、左右に余白を作って少し小さくしたりもしています。

写真が並ぶと、扱っているテーマが伝わりやすくなります。一方で、スマホの限られた画面の中で、入口と記事一覧をどう並べるかも気になりました。

いろいろ調整した結果、今回は以前の丸いアイコンの形へ戻すことにしました。並べるのは「新着」「大分・九州」「40代の愛用品」「Mac・運営」の4つです。

丸く見せる部分のCSS

丸の大きさや形に関係する部分は、次の指定です。実際には、リンクを4つ横並びにする指定やラベルの設定も組み合わせています。

.monotoki-category-nav .cat-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  border: 1px solid #ebe9e3;
  border-radius: 50%;
  background: #f5f4f0;
  color: #343936;
  font-size: 21px;
}

3つのテーマに「新着」を加える

写真の入口と違うのは、カテゴリーだけでなく、トップページへ戻る「新着」も一緒に置いたことです。

テーマを決めて探したいときはカテゴリーへ、新しく書いた記事を見たいときは新着へ。小さなアイコンと短い名前で、行き先を選べるようにしています。

一度選んだデザインをそのまま使い続けるより、見ながら変えてもいい。今回、写真の入口を試したことで、モノトキではもう少し軽い入口にしたい、という方向が見えてきました。

新着記事は、画像を左・文章を右に

新着記事の一覧は、画像の下に文字を積む形から、画像を左、タイトルや説明を右に置く横長のカードへ調整しました。

スマホでは、一つの記事のカードが縦に大きいと、次の記事を見るまでのスクロールも長くなります。横長にすることで、画像で雰囲気を見ながら、隣のタイトルへ目を移せる形を目指しました。

一覧に載せる説明文は長くなりすぎないようにし、詳しい内容は記事を開いて読んでもらう形です。公開日などの情報も、タイトルや説明と重ならないように配置を整えています。

記事一覧で大切なのは、本文を全部読めることよりも、「どの記事を開こうか」を判断できること。写真とタイトルが並んで見える形を、その入口として使いたいと思っています。

画像と文章を左右に分けるCSS

左側を画像用の38％、右側を残りの幅として、間に12pxの余白を置いています。

:is(.home, .category) #list .entry-card {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  height: auto !important;
  min-height: 0 !important;
}

人気記事と新着記事に、違う役割を持たせる

初めて見に来た人には、どこから読むかの候補があると探し始めやすくなります。そのため、人気記事と新着記事も、見せ方を分けて整えました。

人気記事は、画像を横に並べて気になるものを選べる形に。スマホ向けの設定では、画像と順位を中心に見せ、記事タイトルなどを同じ場所に詰め込みすぎない形にしています。

新着記事は、タイトルと説明を読みながら順番に探す一覧です。人気記事と同じカードを繰り返すのではなく、探し方に合わせて役割を変えました。

一覧の前には「新着記事」の見出しと区切りを用意し、どこから新しく書いた記事が並ぶのかも分かるようにしています。

余白は残しながら、大きく空くところを減らす

調整していて気になったのが、人気記事の上などにできる大きな余白でした。入口を小さくしても、その下が大きく空いていると、記事一覧までの距離はあまり変わりません。

そこで、見出しの上下やカード同士の間隔を見直しました。人気記事と新着記事で記事タイトルの文字サイズもそろえ、同じページの中で読み進めるリズムが変わりすぎないようにしています。

ただ、余白をなくしすぎると、どこが一つのまとまりなのか分かりにくくなります。見出しの区切りやカードの間隔は残しながら、大きく空いていたところを詰める方針です。

たくさん並べることだけを目標にするのではなく、スマホで見たときに窮屈すぎないかも気にしていきたいと思います。

人気記事の上の余白を調整するCSS

スマホ向けに、ウィジェットと見出しの上下の間隔を調整した部分です。

@media screen and (max-width: 767px) {
  :is(body.home, body.category) #main .widget_popular_entries {
      margin: 0 0 12px !important;
      padding: 0 16px 0 !important;
    }

  :is(body.home, body.category) #main .widget_popular_entries .widget-title {
      margin: 0 0 10px !important;
      line-height: 1.25 !important;
    }
}

アイキャッチは、見切れにくい表示へ

記事の画像では、アイキャッチの端が切れてしまうことも気になりました。モノトキでは画像の中に文字を入れることがあるので、一部が切れると、伝えたい内容も欠けてしまいます。

今回の記事カード向けの設定では、枠いっぱいに切り抜く表示から、画像全体を収める表示へ変更しています。画像の比率に合わせて高さを変え、文字や被写体が見切れにくいようにする調整です。

画像の大きさを全部そろえることと、画像の内容をきちんと見せること。その両方を、どんな画像でも同じように満たすのは難しいところです。今回は、アイキャッチの内容が伝わることを優先しました。

また、カテゴリー上部やお出かけマップの大きなアイキャッチを非表示にする設定も加えています。記事のサムネイルまで消すのではなく、一覧や地図に進む前の大きな画像を整理する考え方です。

画像を切り抜かずに収めるCSS

画像だけでなく、画像を入れる枠の高さや比率も自動にしています。固定された高さが別に残っていると見切れの原因になるため、枠と画像を合わせて調整しました。

:is(.home, .category) #main .popular-entry-card-thumb,
:is(.home, .category) #list .entry-card-thumb {
  float: none;
  align-self: start;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}

:is(.home, .category) #main .popular-entry-card-thumb img,
:is(.home, .category) #list .entry-card-thumb img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center;
}

PCでは、ヘッダーメニューを入口にする

スマホ向けの丸アイコンをPCにも出すと、上部のヘッダーメニューと、似た行き先が重なります。そこで、広い画面ではヘッダーメニューを使い、丸アイコンは表示しない形にしました。

同じ入口をすべての画面に重ねるより、スマホでは小さなアイコン、PCでは上部メニューというように、それぞれの画面で使う入口を決めています。

この切り替えでは、スマホとPCの間くらいの幅で、メニューもアイコンも見えなくなるところがありました。小さい画面と大きい画面だけを考えていると、その間が抜けてしまうことがあります。

現在の設定では、丸アイコンを幅1023pxまで表示し、1024px以上ではヘッダーメニューを使うようにしています。これは今回のモノトキに合わせた値です。別のテーマやメニュー設定でも同じ値でよい、というわけではありません。

入口を切り替えるCSS

表示・非表示に関係する指定だけを抜き出すと、次の形です。PCのヘッダーメニュー自体はCocoon側の設定を使い、ここでは丸アイコン側の表示を切り替えています。

@media screen and (max-width: 1023px) {
  .widget_custom_html:has(.monotoki-category-nav) {
    display: block !important;
  }
  .monotoki-category-nav {
    display: flex !important;
  }
}

@media screen and (min-width: 1024px) {
  .monotoki-category-nav,
  .widget_custom_html:has(.monotoki-category-nav) {
    display: none !important;
  }
}

見た目を変えた効果は、これから確認する

今回整えたのは、記事を探し始める場所と、一覧の見え方です。この変更によってアクセスが増えた、記事がたくさん読まれるようになった、といった数字の効果は、まだ判断していません。

今後は、新しい記事を追加したときのタイトルの収まり、画像の見切れ、メニューの表示、スマホでの押しやすさを見ていきます。設定上は合っていても、実際の端末や記事の内容によって、気になるところが出てくるかもしれません。

見た目を一度で完成させるというより、読みに来た人が迷わず記事へ進めるように、少しずつ調整していきたいと思っています。

モノトキのトップページを見る

※PCのトップページとカテゴリー一覧は2026年11月7日に公開画面を撮影しました。写真の入口と中間幅の画像は、調整中に保存していたスクリーンショットです。いずれもキャプションに区別して記載しています。今回、変更後のスマートフォン表示を新しく撮影したものはありません。画面幅や今後の更新によって、表示が変わる場合があります。