Cocoonのサイドバーをカスタマイズする方法｜ウィジェットの追加・位置変更を画像つきで解説

「Cocoonのサイドバーに何を入れればいいの？」「サイドバーの位置って変えられるの？」

ブログを始めたばかりのころ、私もそう思っていた。

結論から言うと、サイドバーのカスタマイズはウィジェット画面から簡単にできる。コードは不要で、ドラッグ＆ドロップで追加・並び替えができる。

この記事では、Puglightyearの実際のサイドバー構成をもとに、設定手順を画像つきで解説する。

Puglightyearのサイドバー：完成形を先に確認

まず完成形を見ておこう。Puglightyearのサイドバーは上から順にこの構成になっている。

1. プロフィール：運営者の自己紹介とアイコン
2. 検索：サイト内検索ボックス
3. 新着記事：最新投稿を自動表示
4. カテゴリー：カテゴリー一覧とそれぞれの記事数

この4つがあれば、訪問者が「読みたい記事」にたどり着きやすくなる。順番に設定していこう。

Step1｜サイドバーの位置・表示状態を設定する

まずCocoon設定でサイドバーの基本設定を確認しよう。

1. WordPress管理画面 →「Cocoon設定」をクリック
2. 「全体」タブをクリック
3. 下にスクロールして「サイドバーの位置」と「サイドバーの表示状態」を確認する

サイドバーの位置

• サイドバー右（Puglightyearはこちら）：一般的なブログレイアウト。読者が自然に目線を移しやすい
• サイドバー左：ポートフォリオやデザイン系サイトで使われることが多い

副業・ブログ系のサイトなら右で問題ない。

サイドバーの表示状態

以下の7つから選べる。

• 全てのページで表示する（Puglightyearはこちら）
• 全てのページで非表示にする
• フロントページで非表示にする
• インデックスページで非表示にする
• 固定ページで非表示にする
• 投稿ページで非表示にする
• 404ページで非表示にする

設定が完了したら「変更をまとめて保存」をクリックする。

Step2｜ウィジェット管理画面を開く

サイドバーに何を表示するかは「ウィジェット」で管理する。

1. WordPress管理画面 →「外観」→「ウィジェット」をクリック

画面は3つのエリアに分かれている。

• 左側：利用できるウィジェット一覧
• 中央：サイドバーや各エリアの現在の構成
• 右側：固定ページ用・インデックス用などその他のエリア

サイドバーに追加したいウィジェットを左の一覧から中央の「サイドバー」エリアにドラッグするだけで追加できる。

Step3｜サイドバーにウィジェットを追加する

Puglightyearのサイドバー構成に合わせて、4つのウィジェットを追加する手順を説明する。

①プロフィール（[C] プロフィール）

運営者の自己紹介を表示するウィジェットだ。訪問者が「誰が書いているのか」を確認できる、信頼感につながる重要なパーツだ。

1. 左の一覧から「[C] プロフィール」を探す
2. 中央の「サイドバー」エリアの一番上にドラッグする
3. ウィジェットをクリックして開き、「保存」をクリック

②検索（検索: 記事を検索）

サイト内検索ボックスを表示するウィジェットだ。記事数が増えてきたときに読者の利便性が上がる。

1. 左の一覧から「検索」を探す
2. 「サイドバー」エリアのプロフィールの下にドラッグする
3. タイトルに「記事を検索」と入力して「保存」をクリック

③新着記事（[C] 新着記事）

最新の投稿を自動で一覧表示するウィジェットだ。記事を更新するたびに自動で内容が変わる。

1. 左の一覧から「[C] 新着記事」を探す
2. 「サイドバー」エリアの検索の下にドラッグする
3. タイトルに「新着記事」と入力して「保存」をクリック

④カテゴリー（カテゴリー）

ブログのカテゴリーと各カテゴリーの記事数を一覧表示する。訪問者がジャンルで記事を探しやすくなる。

1. 左の一覧から「カテゴリー」を探す
2. 「サイドバー」エリアの新着記事の下にドラッグする
3. タイトルに「カテゴリー」と入力して「保存」をクリック

Step4｜実際の表示を確認する

4つのウィジェットを追加したら、実際のブログを開いて確認しよう。

ウィジェットの並び替えと削除

並び替え

サイドバーエリア内のウィジェットをドラッグして上下に動かすだけで順番を変えられる。

削除

削除したいウィジェットをクリックして開き、「削除」をクリックする。または左の一覧エリアにドラッグして戻す。

よくある質問

Q. ウィジェットを追加したのにサイドバーに表示されない

Cocoon設定→「全体」タブの「サイドバーの表示状態」が「全てのページで非表示にする」になっていないか確認しよう。また、ウィジェットを追加したあとに「保存」をクリックしているかも確認する。

Q. サイドバーのデザインをもっと細かく変えたい

Cocoonのカスタマイズ機能（外観→カスタマイズ→追加CSS）にCSSを書くことで、サイドバーの背景色・フォントサイズ・余白などを自由に変更できる。

まとめ：まずプロフィール・検索・新着記事・カテゴリーの4つを入れる

Cocoonのサイドバーカスタマイズ手順をまとめる。

1. Cocoon設定→「全体」タブでサイドバーの位置・表示状態を設定する
2. 外観→ウィジェットでサイドバーエリアにウィジェットを追加する
3. 追加するウィジェットはプロフィール・検索・新着記事・カテゴリーの4つが基本
4. ブログを開いて実際の表示を確認する

サイドバーは訪問者の回遊率に直結する。まずこの4つを入れておけば十分だ。慣れてきたら人気記事ランキングやSNSフォローボタンを追加してみよう。