CocoonのカテゴリーメニューをPC・スマホで整えた体験談

ブログ「モノトキ」を作り始めたころ、記事を書く前に気になったのがトップページからの行き先でした。記事が増えても、読みたいテーマを見つけにくければ、初めて来た人は迷ってしまいます。

WordPressのテーマにはCocoonを使っています。チャッピー（ChatGPT）に相談しながら、PCではピル型のリンク、スマホでは丸いアイコンとカテゴリ名が見える形に整えました。この記事では、コードをそのまま配る手順ではなく、私が何を優先し、画面を見てどこを調整したかを振り返ります。

まずは3つの記事テーマと「新着」を見せる

モノトキの記事の柱は、Macやブログ運営、大分・九州のお出かけ、40代の愛用品です。トップページには、この3つのテーマへの入口と「新着」を置くことにしました。

最初は「すべて見る」という項目も考えましたが、私には不要だと感じました。入口が増えすぎると、どこを押せばよいかかえって分かりにくくなります。4つの導線に絞り、その下に新着記事を並べる構成のほうが、ブログの内容をすぐに伝えられると思いました。

PCの広い画面では、カテゴリへのリンクを角の丸いピル型にしました。大きな画像をいくつも並べるよりも、記事一覧へ進む入口としてすっきり見せたかったからです。

形だけを整えるのではなく、リンクの文字が読めるか、隣の項目と間隔が取れているか、記事一覧の見出しより目立ちすぎないかを画面で確認しました。私が求めたのは、装飾の多さよりも「次に押せる場所が分かる」ことでした。

スマホはPCより横幅が狭いため、同じ見た目を縮めるだけでは文字が窮屈になります。そこで、丸いアイコンの下に名前を添える形にしました。アイコンだけに頼らず、カテゴリ名でも行き先が分かるようにしています。

「新着」を含む4つを画面幅に合わせて均等に並べ、横スクロールをせずに選べることを目指しました。名前が長いカテゴリは改行や余白の影響を受けやすいので、実際のiPhoneの画面で確認するのが大切でした。PCで整って見えても、スマホでは別の調整が必要だと実感しました。

途中ではCSSを手入力し、表示を見ながら調整しました。最初から完成形が決まっていたわけではありません。私が気になったのは、カテゴリーメニューと記事一覧の見出しの位置関係や、記事のアイキャッチ付近でカテゴリ名が重なって見える箇所です。

メニュー単体がきれいでも、ページ全体で同じ言葉が続いて見えると落ち着きません。トップページを上から読み、MacとiPhoneの両方で「次の記事へ進みやすいか」を見直しました。表示の重複がどの設定から生じたかは、テーマや表示場所で変わるため、ここでは原因を一つに決めつけません。

Cocoonにはメニューやヘッダー下の導線を用意する機能があります。ただし、私が使ったCSSを別のサイトにそのまま貼れば同じ表示になるとは限りません。Cocoonのスキン、メニューの配置、追加したウィジェットやCSSによって見え方が変わります。

最初にリンク先と並び順を決め、次にPCとスマホの見た目をそれぞれ確認する。変更する前の設定を控え、小さく直して画面で確かめると、どこで崩れたか追いやすいと思います。Cocoon公式のメニューを使ったヘッダー下の導線の案内やアイコン付きメニューの案内も、使う機能を選ぶ際の参考になります。

モノトキでは、3つの記事テーマと新着を入口にし、PCはピル型、スマホは丸いアイコンと名前で見せる形を選びました。「すべて見る」を増やさず、4つから選べる構成です。

ブログを始めたばかりの私には、設定名を覚えること以上に、実際の画面を何度も見ることが役立ちました。今後カテゴリ名や記事数が変わったときも、PCとスマホの両方で見直していきます。