はじめに

WordPressを始めて1か月。記事も増えてきたころ、ふと気づいたのは「読者が記事を探しづらい」ということでした。

これをきっかけに、Cocoonでヘッダーメニューを整えることに挑戦。

この記事では、初心者の私がカテゴリ設定からメニュー作成、CSS検証までを実体験として紹介します。

ChatGPTに相談しながら、一歩ずつ整えていった過程をそのまま公開します。

第1章：Cocoonを触るたびに分かる「奥の深さ」

WordPressテーマのCocoonは、無料ながら高機能。

最初は「スキン」「インデックス」「OGP」などの専門用語に戸惑いましたが、

設定画面をひとつずつ試していくと、クリック操作だけで主要な見た目や表示方法を切り替えられる“親切設計”だと分かってきました。

失敗しても元に戻せる安心感があり、初心者でも段階的にサイトを整えられます。

今回は、サイトの顔であるヘッダーメニューに取り組み、シリーズ記事をカテゴリ単位で導線化することを目標にしました。

第2章：まずは地図を描く——カテゴリーを整える

メニューはカテゴリーと連動します。

先にカテゴリーを整理しておくと、後の操作がスムーズになり、URLも整います。

手順：カテゴリーの作成

1. 管理画面で「投稿」→「カテゴリー」へ進む。
   
2. 次の4つを新規追加する（スラッグは英数字で短くする）。

URL例：https://sicom-blog.com/category/kokoro/

記事をカテゴリーに振り分ける

1. 「投稿」→「投稿一覧」を開く。
   
2. タイトル下の「クイック編集」をクリック。
   
3. 右側の「カテゴリー」で該当カテゴリにチェックを入れる。
   
4. 「更新」をクリックして保存する。

予約投稿中の記事も同様に振り分けられます。

先に分類しておくと、一覧表示やメニュー導線が整い、管理もしやすくなります。

第3章：いよいよメニューを作成（グローバルナビ）

カテゴリーが整ったら、ヘッダーにカテゴリーメニューを配置します。

Cocoonではプラグイン不要で設定できます。

ステップ1：メニュー画面を開く

1. 管理画面で「外観」→「メニュー」へ進む。
   
2. 「新しいメニューを作成」をクリック。
   
3. メニュー名を「ヘッダーメニュー」とする。
   
4. 「メニューの位置」で「ヘッダーメニュー（グローバルナビ）」にチェックを入れる。

ステップ2：カテゴリーを追加

1. 左側の「カテゴリー」タブを開く。
   
2. 作成した4つのカテゴリーを選択する。
   
3. 「メニューに追加」をクリックする。

ステップ3：順番を整える・ホームを追加する

1. 右側の「メニュー構造」でドラッグ＆ドロップして表示順を調整する。
   
2. 先頭に「ホーム」を置く場合は、左の「カスタムリンク」で次を追加する。
   

• URL：https://sicom-blog.com
• リンク文字列：ホーム

「メニューを保存」をクリックする。

完成イメージ

ホーム ｜ 心の羅針盤 ｜ 願いは叶う ｜ 潜在意識の旅路 ｜ WordPress体験談

スマートフォン表示では自動的にドロップダウンメニューに切り替わるため、特別な設定は不要です。

第4章：Cocoon設定で見た目を整える（CSSなしでも美しく）

メニューを作ったあとは、一覧ページの見た目を整える。

Cocoonの魅力は、ここもクリック操作だけでデザイン変更ができることだ。

Cocoon設定 → インデックスのおすすめ設定

この設定だけで、トップページが雑誌のように整う。

画像がズレるときは「メディア → サムネイル再生成」で修正できる。

第5章：CSSを試して分かった「安心できる仕組み」

ブログを運営していると、デザインを少し変えたくなることがある。

私も例外ではなく、「カードの影を少し付けてみたい」と思った。

そもそもCSSとは？

CSS（スタイルシート）とは、サイトの見た目を指定するルールだ。

背景色・文字の大きさ・枠線・余白・影などを設定できる。

CocoonはCSSを直接書かなくても整うが、「もう少しだけ調整したい」ときに使える。

追加CSSの追加方法（驚くほど簡単）

ChatGPTに相談して、軽い影を付けるCSSコードを教わった。

実際に追加してみると、操作は驚くほど簡単だった。

1. 管理画面で「外観 → カスタマイズ」を開く。
2. 「追加CSS」をクリック。
3. コードを貼り付け、「公開」を押す。

ほんの数行で変更が反映される。

初心者の私でも10分もかからずにできた。

初心者でも安心な理由

「追加CSS」はテーマ本体とは独立しており、元のコードを壊すことがない。

つまり、いくら書き足しても「戻せなくなる」ことはない。

不要になったら削除すれば即座に元に戻る。

この仕組みを知ったとき、「CSSって怖くない」と思えた。

自由に試しても元に戻せる――これは初心者にとって大きな安心材料だ。

実際に追加して分かったこと

カードに影をつけるコードを試すと、見た目は少し変わった。

でもページを開くスピードが遅くなった。

ChatGPTに相談しながら検証した結果、「影のCSSが原因」と分かり、削除した。

Cocoon標準でも十分に見やすく、バランスが良い。

結論として、今はCSSを使わず、標準機能だけで運営している。

教訓: 追加CSSは強力だが、必要最小限で。

デザインより「軽さ」と「安定性」を優先する。

第6章：今後の改善課題（CSSと子テーマ運用）

現在は追加CSSを使っていないが、今後少しずつ改善を進める予定だ。

これから取り組みたいことをリスト化しておく。

• 子テーマを活用する。
  Cocoonの更新時に上書きされない安全な環境を整える。
  
• 軽量なCSSのみ再導入。
  小さな影や余白など、体験を損なわない範囲で調整。
  
• PageSpeed Insightsで効果を確認。
  見た目だけでなく、速度も数値で把握する。
  
• ChatGPTに相談して最小コードを取得。
  目的を具体的に伝えれば、ピンポイントで安全なコードを提案してくれる。

第7章：カテゴリー説明文を加えて親切に

ヘッダーメニューに並んだカテゴリーをさらに分かりやすくするため、
それぞれのカテゴリーに短い説明文を追加した。

例：「心の羅針盤」カテゴリの説明

迷ったとき、心を整える小さなヒントを。考え方や気づきを短く綴ります。

これだけで読者が「このカテゴリにはどんな記事があるか」を直感的に理解できる。

WordPressの「投稿 → カテゴリー → 各カテゴリ編集」で、説明欄に1〜2文加えるだけでOKだ。

第3部｜メニューが変えたブログ運営と今後の課題・まとめ

第8章：メニューが変えた「ブログの方向性」

ヘッダーメニューを整えたことで、

サイト全体の見た目だけでなく、自分の中の意識の整理が進んだ。

カテゴリーを明確にしたことで、

「どんなテーマで」「誰に向けて」「どんな順番で読んでもらいたいか」
が自然と見えるようになった。

実際にアクセス解析を見てみると、

メニューから記事を読む読者が増えていることにも気づいた。

特に「心の羅針盤」と「願いは叶う」はクリック率が高く、

シリーズとしての流れがある記事ほど回遊が伸びやすい。

「構造を整理すると読者の行動も整理される」——これが今回の最大の発見だった。

第9章：次のステップ——トップページの強化

ヘッダーメニューが整った今、次に目指すのはトップページの充実。

訪問した瞬間に「このブログが何を発信しているのか」が伝わるように、
次のような構成を考えている。

• おすすめカードエリア
  人気記事や初めての人に読んでほしい記事を表示。
  Cocoonの「おすすめカード」機能で設定可能。
  
• アピールエリア
  ブログの理念や運営者の想いを大きく表示。
  例：「10年ぶりに再挑戦する、WordPress初心者の記録ブログ」
  
• YouTube連携
  記事内容と連動した解説動画を埋め込み。
  ChatGPTに相談しながら、ナレーション台本を効率的に作成予定。

記事と動画をセットで届ける。
これが、次の運営方針の柱になる。

第10章：体験から得た3つの教訓

1. 構成はデザインである

ブログの「見た目」は、装飾ではなく情報設計そのもの。

カテゴリと導線を整理することで、読者が自然に記事を巡るようになる。

2. 速度は正義

どれだけデザインが良くても、

ページが遅いと離脱される。

CSSを削除したことで読み込みが体感で速くなった。

「速く・軽く・迷わない」が一番のUX（ユーザー体験）だと実感した。

3. CSSは怖くない

Cocoonの「追加CSS」は、元のスタイルを壊さない仕組みになっている。

失敗しても削除すれば元通り。

だから、初心者でも安心して試せる環境がある。

ChatGPTに相談すれば、安全で軽いコードだけを取り入れられる。

第11章：5分で振り返るチェックリスト

• [ ] カテゴリーを4つ作成（kokoro, negai, senzai, wordpress）
• [ ] 投稿をカテゴリーへ割り当てる（クイック編集でOK）
• [ ] 外観 → メニュー → ヘッダーメニューに4カテゴリ＋ホームを追加
• [ ] Cocoon設定 → インデックスを「カテゴリーごと（3カラム）」に設定
• [ ] 抜粋文字数は100、スマホでは1カラム表示
• [ ] 画像は16:9、WebP形式で軽量化
• [ ] 追加CSSは未使用（必要時のみ最小で）
• [ ] 表示を確認（PC／スマホ）＋キャッシュ削除

第12章：まとめ

今日のひとこと

Cocoonの「追加CSS」は、初心者が安心して練習できる場所。

まずは標準設定で“速く・美しく”。その上で少しずつ理想を形にしていけばいい。

エピローグ：再出発のブログ運営へ

10年前にブログを始め、途中でやめてしまった私が、

再び挑戦する気持ちを取り戻せたのは、

「できることが少しずつ形になっていく」このWordPress体験があったからだ。

Cocoonのおかげで、“作る楽しさ”が戻ってきた。

そしてChatGPTと対話しながら進めることで、

ひとつひとつの学びが確実に積み重なっている。

これからもこのブログ「エスアイコムのブログ」で、

WordPress体験談や自己成長の記録を発信していきたい。

同じように再挑戦する誰かの背中を、少しでも押せたら幸いです。