Cocoonでサイドバーをカスタマイズする初心者向け5ステップ

Cocoonを使ってみたものの、サイドバーの設定が多すぎて「どこから手をつければいいのか分からない…」と感じていませんか。

この記事では、必要な場所だけを押さえて、読者が回遊しやすくて収益にもつながるサイドバーに整える手順を、できるだけやさしくまとめていきます。

結論を一言でいうと、cocoonのサイドバーは「触る場所」と「目的」をはっきりさせれば、難しいコードなしでも十分にカスタマイズできるということです。

Cocoonサイドバーをカスタマイズする前に全体像を押さえよう

サイドバーで変えられるポイントを整理しよう

まずは、サイドバーのカスタマイズで触ることになる主なポイントを一覧で確認してみましょう。

項目	できること	主な設定場所	難易度の目安
サイドバーの位置	右か左か、1カラムかを決める	Cocoon設定＞全体	かんたん
サイドバーの表示／非表示	ページごとにサイドバーを出す／消す	Cocoon設定、投稿・固定ページ編集画面	かんたん
ウィジェットの中身	プロフィールや人気記事など何を表示するか決める	外観＞ウィジェット	ふつう
スマホでの見え方	モバイルボタンとの連携、スマホのみ非表示など	Cocoon設定＞モバイル	ふつう
デザイン（見た目）	幅、背景色、枠線、見出しデザインなど	外観＞カスタマイズ＞追加CSSなど	ややむずかしい

ざっくり分けると、次の5ジャンルだと考えるとイメージしやすいです。

この記事では、この流れに沿って、cocoonのサイドバーを順番にカスタマイズしていきます。

Cocoonでサイドバーをいじる3つの入口

cocoonのサイドバーを設定するときは、主に次の3つの画面を使います。最初に「どこを開けばいいか」を覚えておくと、迷いにくくなります。

• Cocoon設定
• 外観＞ウィジェット
• 外観＞カスタマイズ

それぞれの役割はこんなイメージです。

• Cocoon設定…サイト全体のレイアウトや表示ルールを決める場所
• 外観＞ウィジェット…サイドバーの中身を入れ替える場所
• 外観＞カスタマイズ…色やフォントなど見た目を微調整する場所

サイドバーのカスタマイズで混乱しやすいのは、「どの設定をどこで変えたのか分からなくなる」状態です。最初にこの3つの役割を分けて覚えておくと、「これはCocoon設定で変える」「これはウィジェット側」と判断しやすくなります。

Cocoonサイドバーの基本設定をカスタマイズしよう

サイドバーの位置とレイアウトを決める

多くのブログでは、記事本文の横にサイドバーが並ぶ2カラムレイアウトが使われています。cocoonでも同じように、サイドバーの位置を右か左か選べます。

一般的には、次のような考え方で選ぶと迷いにくいです。

• サイドバー右：いわゆる「ブログらしい」レイアウトで、読み慣れている人が多い
• サイドバー左：メニュー重視のサイトや、コーポレートサイト寄りの印象にしたいときに向いている

迷ったら、まずは右サイドバーにしておけば、大きく外すことはありません。

設定の流れはおおまかに次のようになります。

• 管理画面の「Cocoon設定」を開く
• 「全体」タブでサイドバーの位置や1カラム／2カラムを選ぶ
• 変更を保存し、実際のページを開いて表示を確認する

この段階では、「自分のサイトは基本的に右サイドバー」「ランディングページとして使う固定ページだけ1カラム」など、ざっくりとした方針を決めておくだけでも十分です。

サイドバーに置くウィジェットを取捨選択する

次に、サイドバーの中身を見直します。ここを欲張りすぎると、ごちゃごちゃした印象になりやすい部分です。

とりあえず全部のウィジェットを詰め込むのではなく、「読者にとって役に立つもの」「運営者として見てほしいもの」を中心に置いていきます。

よく使われるウィジェットと役割を、表にまとめました。

ウィジェット名	役割・目的	入れておきたいサイト	優先度
検索フォーム	読者が知りたい記事を探しやすくする	ほぼすべてのブログ	高
プロフィール	誰が書いているかを伝え、信頼感を上げる	個人ブログ	高
人気記事・おすすめ記事	よく読まれている記事に回遊させる	ブログ全般	高
新着記事	新しく書いた記事に読者を流す	更新頻度が高いブログ	中
カテゴリーリスト	記事のジャンル別に回遊しやすくする	雑記ブログ	高
広告（バナー、アドセンスなど）	収益化の導線を作る	収益目的のサイト	高
アーカイブ	過去の記事への導線	記事数が多いブログ	低〜中

実際の操作は次のような流れです。

最初は、上の表の「優先度：高」のウィジェットだけに絞って配置し、しばらく運営してみてから「もう少し欲しい」と感じるものを足していくのがおすすめです。

ページ別・デバイス別にサイドバーをカスタマイズする

投稿・固定ページごとのサイドバー表示／非表示

実は、すべてのページにサイドバーが必要なわけではありません。むしろ、次のようなページでは、思い切って1カラムにしてしまったほうが、内容に集中して読んでもらいやすくなります。

• サービス紹介やセールス用のページ
• お問い合わせページ
• プロフィールページ（自己紹介に集中させたい場合）

一方で、ブログ記事一覧や通常の個別記事では、サイドバーがあったほうが他の記事へ回遊してもらいやすいです。

ページごとのおすすめ設定を表に整理すると、次のようなイメージになります。

ページの種類	サイドバーの推奨設定	理由
ブログ記事一覧	あり	人気記事やカテゴリーに誘導しやすい
通常の個別記事	あり	関連コンテンツやプロフィールを見せたい
ランディングページ系	なし（1カラム）	本文に集中して読んでもらいたい
お問い合わせ・フォーム	なしでもOK	余計なリンクがあると離脱につながりやすい
プロフィールページ	どちらでもOK	サイトの目的に合わせて調整する

cocoonでは、投稿や固定ページの編集画面でページタイプを変更することで、1カラムレイアウトに切り替えられます。「このページだけは読者に一つの行動だけしてほしい」という場合は、サイドバーを非表示にしてみると効果を感じやすいです。

スマホでのサイドバー表示を最適化する

PCではサイドバーが便利でも、スマホだと「縦に長すぎて疲れる」ということがよくあります。スマホでの見え方も意識して、サイドバーを調整していきましょう。

スマホでの考え方としては、ざっくり次の2つを押さえておくと良いです。

• サイドバーを下部に回す（本文の後に表示する）
• サイドバー自体は出さず、必要なリンクだけヘッダーメニューやフッターに移す

小さい画面で「サイドバー＋広告＋ウィジェットてんこ盛り」になると、読者は途中で疲れて離脱しがちです。自分のスマホでチェックして、次のように感じたら、整理のタイミングだと思ってください。

• スクロールが長すぎて、フッターまでたどり着くのが大変
• 同じようなリンクや広告が何度も出てくる
• 文字サイズやボタンが小さくて押しにくい

PCとスマホの両方で自分のサイトを表示し、「スマホで見たときにストレスなく読めるか」を基準にサイドバーを調整していくと、読者にやさしいブログになります。

CSSでCocoonサイドバーをおしゃれにカスタマイズする

追加CSSを書く前に知っておきたいこと

cocoonのサイドバーをCSSでカスタマイズするときは、次の3点だけ意識しておけば、致命的な崩れを起こしにくくなります。

• CSSを書く場所は「外観＞カスタマイズ＞追加CSS」か、子テーマのstyle.cssを使う
• 一気に書き込まず、少しずつ追加しては表示を確認する
• 崩れたら、追加したCSSを一度コメントアウトして原因を切り分ける

サイドバー周りでよく触ることになる主な部分と、そのときに使うプロパティの例をまとめると、次のようになります。

対象部分	例として触るプロパティ	効果の例
サイドバー全体	width、padding、backgroundなど	幅や余白、背景色を変えられる
サイドバーのウィジェット	margin、border、box-shadowなど	ボックス間の余白や枠線、影を付けられる
ウィジェットタイトル（見出し）	font-size、background、border-bottomなど	見出しのデザインを変えて、まとまりを分かりやすくできる

たとえば「サイドバーを少しだけ細くしたい」という場合は、サイドバー全体の幅を少し小さくして、本文側を広くするイメージです。逆に、ウィジェットに影を付ければ、カード型デザインになり、情報が整理されて見えます。

よくあるサイドバーデザインカスタマイズ例

ここでは、cocoonのサイドバーをデザイン面でカスタマイズするときによくある例と、その狙いをセットで紹介します。コードは環境によって変わるので、まずは「どんな見せ方を目指すのか」の参考にしてください。

• サイドバー全体の背景にほんのり色を付ける
  → 記事本文との境界が分かりやすくなり、読みやすさが上がる
• ウィジェットをカード型にする
  → marginでボックス同士の余白をつくり、borderやbox-shadowでカード風にすると、情報が整理されて見える
• ウィジェットのタイトル（見出し）を目立たせる
  → backgroundで色を付けたり、border-bottomで下線を引いたりして、まとまりを視覚的に分かりやすくできる
• サイドバー内のリンクカラーを少し変える
  → サイドバーだけ落ち着いた色にして、本文中のリンクを目立たせるといった調整も可能

イメージとしては、次のようなパターンに分かれます。

• シンプルな枠線だけで囲む…企業サイトやビジネス系ブログ向き
• カード型＋薄い影…雑記ブログや特化ブログのような「読み物」メインのサイト向き
• カラフルな見出しバー…個性を出したい個人ブログ向き
• フラットで背景のみ変更…ミニマルな雰囲気にしたいサイト向き

自分のサイトの雰囲気を思い浮かべて、「これなら合いそう」と感じるパターンから1種類だけ試してみるのがコツです。一度にいろいろ試すと、逆にごちゃごちゃしてしまうので注意してください。

目的別にcocoonサイドバーをカスタマイズしよう

雑記ブログ向けのサイドバー構成

雑記ブログの場合、読者は「ちょっと気になった記事をふらっと読みに来た人」が多いです。そのため、「いろいろな記事を回遊してもらうこと」を意識してサイドバーを組み立てると相性が良くなります。

おすすめの構成は次のようなイメージです。

• プロフィール（運営者の顔やキャラを出す）
• 検索フォーム
• 人気記事
• カテゴリー一覧
• 新着記事
• 広告（1〜2箇所まで）

順番と狙いを整理すると、こんな形になります。

表示順	ウィジェット	狙い
1	プロフィール	最初に「誰が書いているか」を伝え、安心感を出す
2	検索フォーム	読者が知りたいテーマをすぐ探せるようにする
3	人気記事	よく読まれている記事へ誘導する
4	カテゴリー一覧	気になるジャンルをまとめて読んでもらう
5	新着記事	最近書いた記事も見てもらう
6	広告（バナーなど）	流れを邪魔しない位置に1〜2個だけ置く

私も雑記ブログを始めたころ、うれしくなって広告をたくさん貼り付けたことがあります。結果として、クリックはほとんどされず、「広告が多くて読みづらい」と言われてしまいました。

今は、「プロフィール」「人気記事」でまずブログに興味を持ってもらい、そのあとで広告が自然に目に入るように配置するよう意識しています。そのほうが、自分が読者として見たときにもストレスが少ないと感じます。

アフィリエイト・特化ブログ向けのサイドバー構成

特化ブログやアフィリエイトサイトの場合は、「成約につながる記事やページに読者を案内すること」がゴールになります。雑記ブログよりも、サイドバーを「導線づくりのエリア」として考えると、構成が組みやすくなります。

たとえば、次のような構成が分かりやすいです。

順番と狙いを整理すると、次のような形になります。

表示順	ウィジェット	狙い
1	プロフィール	専門性や経験値をアピールし、信頼感を出す
2	カテゴリーメニュー	読者の関心ジャンルにすぐアクセスさせる
3	おすすめ記事（固定）	成約に近い記事へ集中的に誘導する
4	ランキング記事	比較系のコンテンツに誘導する
5	バナー広告	ここまで読んだ人にだけオファーを見せる

特化ブログでは、「とにかく広告を増やす」のではなく、「本当に押してほしい導線だけを残す」ほうが結果につながりやすいです。また、ウィジェットごとの表示条件を使って、カテゴリごとに違うバナーを出し分けると、読者の興味とマッチしやすくなります。

トラブルを防ぐためのcocoonサイドバーチェックリスト

サイドバーが表示されないときに見るポイント

サイドバーが表示されないとき、原因はだいたい次のどれかに当てはまります。

• ページタイプが1カラムになっている
• Cocoon設定でサイドバーを非表示にしている
• ウィジェットエリアに何も入っていない
• ウィジェットの表示条件で非表示にしている

症状と確認する場所を表にまとめると、こんな感じです。

症状	よくある原因	確認する場所
どのページでもサイドバーが出ない	テーマのレイアウト設定の問題	Cocoon設定＞全体
特定のページだけサイドバーがない	ページタイプが1カラムになっている	投稿／固定ページ編集画面
ウィジェットだけ何も表示されない	ウィジェットが未設定	外観＞ウィジェット
あるカテゴリだけサイドバーが違う	表示条件の設定ミス	各ウィジェットの表示条件設定画面

一つずつ順番に確認していけば、ほとんどのトラブルは解消できます。特に多いのは、編集画面で「このページは1カラムでいいや」と思って変更したことを忘れてしまい、「サイドバーが消えた」と焦ってしまうパターンです。

サイドバーがごちゃごちゃしてきたときの整理手順

運営を続けていると、「あれも入れたい、これも入れたい」と思っているうちに、サイドバーが情報だらけになることがあります。そんなときは、次の順番で整理していくとスッキリしやすいです。

• ほとんどクリックされていないウィジェットを削る
• 似た役割のウィジェットを統合する（例：新着記事と人気記事のどちらかに絞る）
• 広告の数を「ここぞ」という位置だけに厳選する
• スマホで縦に長すぎないかを確認し、不要なものを外す

私自身、「せっかく入れたウィジェットだから」となかなか消せずにいた時期がありましたが、思い切って半分近く削ったところ、むしろクリックされるリンクがはっきりしてきました。

「新しいものを足す前に、いらないものを減らす」。この意識でサイドバーを見直すと、読者にも自分にもやさしい構成になっていきます。

よくある質問（FAQ）

Q1. cocoonのサイドバーを特定の固定ページだけ非表示にしたいです

A. 特定の固定ページだけサイドバーを非表示にしたい場合は、そのページの編集画面でページタイプを変更する方法がシンプルです。編集画面の設定から「1カラム」や「本文のみ」といったレイアウトを選べる場合があるので、そこを切り替えると、そのページだけサイドバーが出なくなります。

それでもうまくいかないときは、Cocoon設定側で「固定ページのサイドバー表示」がオフになっていないかも合わせて確認してみてください。

Q2. cocoonのサイドバーをカスタマイズするとき、広告を増やしても大丈夫？

A. 広告を増やすこと自体は可能ですが、サイドバーに広告を詰め込みすぎると逆効果になることが多いです。読者の立場で見て「広告が多くて読む気がなくなる」と感じるようなら、かなり入れすぎだと思っていいです。

まずは「プロフィール」「人気記事」「おすすめ記事」など、信頼や価値を感じてもらえるウィジェットを前半に置き、その流れの中で広告が自然に目に入るようにサイドバーを調整してみてください。

Q3. CSSでcocoonのサイドバーをカスタマイズしたら崩れました

A. CSSでサイドバーをいじったあとにレイアウトが崩れた場合は、追加したCSSをいったんコメントアウト（無効化）して、原因となっている部分を切り分けるのが安心です。

少しずつCSSをオン／オフしながら「どの行を消すと直るのか」を確認し、問題になっている箇所を特定しましょう。また、余白（marginやpadding）をマイナスの値で大きく設定すると崩れやすいので、最初は控えめな値から試すのがおすすめです。

まとめ：まずは「削る」ことからサイドバーをカスタマイズしよう

この記事のポイントを振り返ります

今日からできる最初の一歩としては、「外観＞ウィジェット」でサイドバーを開き、次の3つだけを残してみてください。

• プロフィール
• 検索フォーム
• 人気記事（またはおすすめ記事）

それ以外のウィジェットはいったん外してしまい、どうしても必要だと感じたものだけ、あとから少しずつ足していく。そんなイメージでcocoonのサイドバーをカスタマイズしていくと、シンプルで使いやすく、読者にも喜ばれるサイドバーに近づいていきます。