WordPressでCocoonを入れたものの、ウィジェットの数が多すぎて「何をどこに置けばいいのか分からない…」と感じていませんか。
この記事では、Cocoonのウィジェットの基本から、読まれやすい・クリックされやすい配置の考え方、表示設定のコツ、トラブル時のチェックポイントまで、ひとまとめにして解説します。
先に結論だけお伝えすると、cocoon ウィジェットは「全部盛り」にするのではなく、ブログの目的に合わせて本当に必要なものだけを厳選して配置するのが、読みやすさと成果の両方を高める一番の近道です。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
cocoon ウィジェットとは？まず全体像を整理しよう
まずは、Cocoonのウィジェットがどんな役割を持っているのか、ざっくりと全体像を整理しておきます。仕組みをざっくり理解してから操作すると、「とりあえず入れてみる」ではなく、「狙いを持って置く」ことができるようになります。
cocoon ウィジェットでできること一覧
最初に、Cocoonで設定できるウィジェットがどんなことに使えるのかを一覧で見ておきましょう。
| 項目 | できること | 具体例 |
|---|---|---|
| プロフィール | 運営者情報を表示して信頼感を出す | サイドバーに顔写真付きの自己紹介を表示する |
| ナビゲーション | サイト内の案内を増やす | カテゴリー一覧やグローバルメニューを表示する |
| 記事紹介 | ほかの記事への導線を増やす | 新着記事・人気記事・関連記事を出す |
| 広告・CTA | クリックや申し込みにつなげる | アドセンスやアフィリエイトバナー、ボタンを配置する |
| SNS | SNSフォローを促す | X（旧Twitter）やInstagramのフォローボタンを表示する |
| 補助情報 | サイト内を回りやすくする | 検索フォーム・アーカイブ・タグクラウドを置く |
CocoonにはWordPress標準のウィジェットに加えて、テーマ独自のウィジェットも多数用意されています。
特にランキングやCTAボックス、PC用／モバイル用広告などは、ブログの回遊率や収益に直結しやすいので、後ほどじっくり触れていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
cocoon ウィジェットエリアの種類と役割を理解しよう
次に、「どこにウィジェットを表示できるのか」を整理しておきます。同じウィジェットでも、置く場所によって見られ方やクリックされる確率が変わるので、エリアごとの役割をざっくり押さえておくと配置に迷いにくくなります。
主なcocoon ウィジェットエリアの種類
Cocoonでよく使うウィジェットエリアをまとめると、次のようになります。
| エリア名 | 画面上のおおよその位置 | 向いている役割 |
|---|---|---|
| サイドバー | 記事本文の横 | プロフィール・人気記事・カテゴリー・バナー |
| サイドバー追従 | スクロールしてもついてくるサイドバー内のエリア | 広告・メルマガ登録・目立たせたいリンク |
| コンテンツ上部 | 記事タイトルの上あたり | お知らせ・キャンペーン・重要な告知 |
| コンテンツ下部 | 記事本文のすぐ下 | 関連記事・CTAボックス・アフィリエイトリンク |
| インデックスリスト中部 | 記事一覧の途中 | 人気記事・特集記事への導線 |
| インデックスリスト下部 | 記事一覧の一番下 | メルマガやバナー、お問い合わせ導線 |
| フッター（複数カラム） | ページ最下部の横並びのエリア | メニュー・プロフィール簡易版・タグやアーカイブ |
| スマホ用フッターエリア | スマホ画面の下側 | 検索・プロフィール・カテゴリメニューなど |
ざっくり言えば、「サイドバー」「コンテンツ上下」「フッター」の3つを押さえておけば、Cocoonのウィジェットはかなり使いこなせます。
スマホ専用エリアやインデックスリスト用のエリアは、慣れてきたタイミングで少しずつ試していくイメージで十分です。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
cocoon ウィジェットの基本操作と入れ替え方
ここでは、Cocoonでウィジェットを追加したり並び替えたりする基本操作をまとめます。設定画面は少し複雑に見えますが、やること自体はシンプルなので、一度手を動かしてみるのがおすすめです。
cocoon ウィジェットの編集画面を開く手順
ウィジェットは、WordPressの管理画面から次の2つの方法で編集できます。
| 手順 | メニュー | 特徴 |
|---|---|---|
| 方法1 | 「外観」→「ウィジェット」 | シンプルな一覧画面で、ウィジェットの入れ替えがしやすい |
| 方法2 | 「外観」→「カスタマイズ」→「ウィジェット」 | サイトの見た目をプレビューしながら調整できる |
慣れるまでは、方法1の「外観」→「ウィジェット」から操作するのが分かりやすいと思います。
基本的な流れはどちらも同じで、次のようなイメージです。
- 左側の「利用できるウィジェット」から目的のものを選ぶ
- ドラッグ＆ドロップで右側の好きなエリアに移動する
- ウィジェットの設定欄にタイトルや内容を入力して保存する
- 不要になったらウィジェット内の「削除」をクリックする
この一連の操作さえ覚えてしまえば、Cocoonのウィジェットでできることがぐっと広がります。
cocoon ウィジェットでよく使う基本ウィジェット
実際のブログ運営でよく出番があるウィジェットをピックアップすると、だいたい次のようなラインナップになります。
- プロフィール：運営者の顔や雰囲気が伝わり、安心感につながる
- 検索フォーム：過去の記事を探してもらいやすくなる
- 人気記事：よく読まれている記事をまとめ、回遊率アップに貢献する
- 新着記事：新しく書いた記事への導線を増やす
- カテゴリー：ブログ全体の地図として機能する
- PC用広告／モバイル用広告：端末ごとに最適なサイズの広告を出し分ける
このあたりを中心に、後で紹介する「おすすめ配置パターン」と組み合わせれば、ひとまず迷子にならないウィジェット構成を組めます。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
cocoon ウィジェットのおすすめ配置パターン7選
ここからは、Cocoonのウィジェットをどんな順番で配置するとバランスが良いか、具体的なパターンをご紹介します。ゼロから考えるのは大変なので、ひとまず「テンプレを真似してから、自分のブログ向けに微調整する」くらいの感覚で読んでみてください。
ブログタイプ別のcocoon ウィジェット構成例
ブログのタイプによって、ウィジェットの最適な組み合わせは少し変わります。
| ブログタイプ | サイドバー構成例 | コンテンツ下部 | フッター構成例 |
|---|---|---|---|
| 雑記ブログ | プロフィール → 検索 → 人気記事 → カテゴリー | 関連記事 → CTAボックス | メニュー → プロフィール簡易版 → アーカイブ |
| 特化ブログ | プロフィール → カテゴリー → 人気記事 → 商品バナー | 商品訴求ボックス → 関連レビュー記事へのリンク | 運営者情報 → お問い合わせ → プライバシーポリシー |
| アフィリエイト寄り | プロフィール → ランキング → 比較記事リンク → メルマガ案内 | 比較表 → 申し込みボタン → 公式サイトへのリンク | 免責事項 → プライバシーポリシー → 特定商取引法に基づく表記 |
上の表はあくまで一例なので、実際には扱っているジャンルやブログの雰囲気に合わせて、1つずつ入れ替えてみてください。
「このウィジェットは何のために置くのか」を意識しながら組むと、無駄なものを減らしやすくなります。
サイドバーのcocoon ウィジェット配置のコツ
サイドバーは、初めて訪れた読者が「このブログはどんな人が書いているのか」「どんな記事が人気なのか」をざっと把握する場所として使うと効果的です。
私がよく使う並びは、次のような順番です。
- 一番上：プロフィールウィジェット
- 次に：検索フォーム
- 続いて：人気記事ウィジェット
- その下に：カテゴリー一覧
- 最後に：バナーやメルマガ登録、キャンペーン告知など
サイドバー追従エリアには、アドセンス広告やアフィリエイトバナー、メルマガ登録フォームなど「じっくり見てほしいもの」を置くと、スクロールしても目に入り続けるので相性がいいです。
コンテンツ上下のcocoon ウィジェットで回遊率を上げる
記事本文の上と下も、Cocoonのウィジェットを活用しやすいポイントです。
- コンテンツ上部：サイト全体のお知らせ、期間限定のキャンペーン告知、重要な注意書きなど
- コンテンツ下部：関連記事、人気記事、CTAボックス、商品リンクやサービスの案内など
特にコンテンツ下部は、読者が記事を読み終えて「次どうしようかな」と考えるタイミングなので、「もう一記事読んでもらう」「商品ページに進んでもらう」といった行動につなげるのにぴったりです。
cocoon ウィジェットの表示設定の使い方
ここからは、Cocoon独自の便利機能である「ウィジェットの表示設定」について解説します。これを使いこなせるようになると、ページの種類やカテゴリーごとに、見せるウィジェットを細かく出し分けられるようになります。
cocoon ウィジェット表示設定でできること
ウィジェットの編集画面の下のほうに、「表示設定」という項目があります。
ここで条件を指定することで、次のような細かい表示の調整が可能です。
| 条件 | できること | 例 |
|---|---|---|
| 投稿タイプ | 投稿記事だけ／固定ページだけに表示 | ブログ記事にだけ広告ウィジェットを出す |
| カテゴリー | 特定カテゴリーにだけ表示・非表示 | レビュー系カテゴリーだけ専用バナーを見せる |
| タグ | 特定タグにだけ表示・非表示 | 「セール」タグの記事にキャンペーン案内を出す |
| ページ個別指定 | 特定ページだけ表示・非表示 | お問い合わせページでは広告を出さない |
最初は難しそうに見えますが、「どのページで見せたいのか」を先に紙に書き出してから、それを表示設定に入力していくと迷いにくくなります。
cocoon ウィジェット表示設定の活用例
【稼げるキーワード教えます】
▼ ▼ ▼
具体的な活用アイデアをいくつか挙げておきます。
- お問い合わせ・プロフィール・ポリシーページでは、広告ウィジェットを非表示にして、読みやすさを優先する
- 商品レビュー記事カテゴリーだけ、ランキングウィジェットや比較記事へのバナーを表示する
- 初心者向けの解説記事では難しい商材の広告を外し、段階を踏んだ関連記事へのリンクを配置する
表示設定をうまく使うことで、「どの読者に、どのタイミングで、どんな情報を見せるか」を細かくコントロールできます。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
cocoon ウィジェットが表示されないときの対処法
ここでは、Cocoonのウィジェットを触っているときに起こりがちなトラブルと、そのチェックポイントをまとめます。「ちゃんと設定したはずなのに、画面に出てこない」「さっきまであったものが消えた」といったときは、あわてずに次の項目を順番に確認してみてください。
cocoon ウィジェットの代表的なトラブルとチェックポイント
よくある症状と原因を表に整理しました。
| 症状 | 主な原因 | チェックポイント |
|---|---|---|
| ウィジェットが全く表示されない | 表示エリアの勘違い | PC表示なのにスマホ専用エリアに入れていないか確認する |
| 特定のページだけ表示されない | 表示設定の条件が厳しすぎる | カテゴリーや投稿タイプ指定で「非表示」にしていないか見る |
| デザインが急に崩れた | プラグインや独自CSSとの相性 | 最近入れたプラグインを一度停止し、影響を確認する |
| 保存しても反映されない | キャッシュの影響 | キャッシュ系プラグインやブラウザのキャッシュを削除してから再確認する |
これらに加えて、次のような点もチェックしてみてください。
- テーマや子テーマを切り替えたタイミングで、ウィジェットのエリアが変わっていないか
- ウィジェットエリア自体が非表示設定になっていないか
- 編集しているユーザーが、管理者以外の権限になっていないか
原因がなかなか分からないときは、一度ウィジェットの数を減らして「プロフィール＋人気記事＋1つだけバナー」など、最小構成に戻してから、1つずつ追加していくと問題の箇所を特定しやすくなります。
PC・スマホ別にcocoon ウィジェットを最適化する
CocoonにはPC向け・スマホ向けの表示を分けられるウィジェットがあり、これを使うと端末ごとに見やすいデザインに調整できます。同じウィジェットでも、PCとスマホでは「ちょうどいい情報量」が変わるので、この章ではその考え方を整理します。
PC用・モバイル用cocoon ウィジェットの使い分け
PCとスマホの違いを整理すると、次のようになります。
| デバイス | 意識したいポイント | 向いているウィジェット例 |
|---|---|---|
| PC | 横幅に余裕があり、サイドバーも見てもらいやすい | サイドバーにプロフィール・人気記事・カテゴリー・バナー |
| スマホ | 縦長で、指でどんどんスクロールしながら読む | 表示項目を絞り、重要な情報だけ出す |
| 共通 | 記事の最後はどちらも要チェックポイント | コンテンツ下部にCTAボックスや関連記事ウィジェット |
Cocoonの「PC用テキスト」「モバイル用テキスト」「PC用広告」「モバイル用広告」などを使えば、同じ場所に置いていても、端末ごとに別の内容を表示できます。
PCでは横長のバナー、スマホでは縦長の目立つボタン付きバナー、という出し分けもできるので、広告のクリック率を高めたいときにも役立ちます。
モバイルフッターのcocoon ウィジェット活用例
スマホで見たときの画面下側（スマホ用のフッターエリア）は、意外と見落とされがちですが、うまく活用するととても便利な場所です。
- プロフィールページへのリンク
- サイト内検索ボックス
- 主要カテゴリーへのショートカット
- お問い合わせフォームへのボタン
こうしたウィジェットをスマホ用フッターにまとめておくと、「もう少し読みたいな」「運営者のことを知りたいな」と思った読者が、迷わず次のアクションに進むことができます。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
cocoon ウィジェット運用で意識したいこと
最後のほうは、Cocoonのウィジェットに少し慣れてきた人向けの内容です。最初は完璧を目指さなくて大丈夫なので、「ここだけは頭の片隅に置いておこう」というポイントとして軽く読んでみてください。
ウィジェットを増やしすぎない
Cocoonのウィジェットは便利なものが多いので、あれこれ試したくなりますが、詰め込みすぎると次のようなデメリットが出てきます。
- 画面がにぎやかになりすぎて、読者がどこを見ればいいか分からなくなる
- 読み込みが重く感じられ、離脱されやすくなる
- 本当にクリックしてほしいボタンやリンクの存在感が薄くなる
「ウィジェットは必要最低限にして、その分1つ1つの役割をはっきりさせる」という意識で調整していくと、自然とスッキリしたデザインになっていきます。
数値を見ながらcocoon ウィジェットを調整する
少し余裕が出てきたら、アクセス解析やクリック数をざっくり見ながら、Cocoonのウィジェットを微調整していくのがおすすめです。
- 人気記事ウィジェットからのアクセスが多いなら、さらに上の位置に移動してみる
- 広告のクリックが少ないなら、画像やボタンの文言を変える、配置する場所を変える
- プロフィールからプロフィールページへの移動が少ないなら、写真や自己紹介文を見直してみる
なんとなくウィジェットを置くのではなく、「このウィジェットをここに置くのは、こういう行動をしてほしいから」という意識を持つだけでも、ブログ全体の質が大きく変わります。
cocoon ウィジェットのよくある質問
最後に、Cocoonのウィジェット周りでよく聞かれる質問を、簡単なQ&A形式でまとめておきます。
Q1.cocoon ウィジェットは何個くらいまでなら配置しても大丈夫ですか？
A1.
Cocoonのウィジェット自体に厳密な上限はありませんが、サイドバーに関しては5〜7個くらいを目安にしておくと、見た目がすっきりしやすいです。
特に最初のうちは、
- プロフィール
- 検索フォーム
- 人気記事
- カテゴリー
- 1〜2個のバナーやお知らせ
といった構成から始めて、必要に応じて少しずつ足していくやり方がおすすめです。
Q2.cocoon ウィジェットが突然消えました。どうすれば戻せますか？
A2.
まずは、ウィジェットを入れていたつもりのエリアが本当に合っているかを確認してみてください。
テーマや子テーマを切り替えたときなどに、別のウィジェットエリアに移動してしまっていることがあります。
「外観」→「ウィジェット」を開き、サイドバーやフッターなどすべてのエリアを一度ざっと見て回ると、思わぬ場所に移動しているウィジェットが見つかることがあります。
どうしても見つからない場合は、あきらめて一から組みなおしたほうが早いことも多いので、「プロフィール＋人気記事＋1つだけバナー」といった最低限の構成から再スタートしてみてください。
Q3.cocoon ウィジェットの表示設定がうまくいきません
A3.
Cocoonの表示設定は便利な反面、条件を増やしすぎると自分でも何を設定したのか分からなくなりがちです。
うまく表示されないときは、いったん条件を1つだけに絞って、正しく動いているかを確認してみてください。
- まずは「投稿記事だけ」などシンプルな条件から試す
- そのあとでカテゴリー条件やページ個別指定を足していく
- どのページで表示したいのかを紙に書き出してから設定する
この順番で進めると、cocoon ウィジェットの表示設定で迷子になりにくくなります。
cocoon ウィジェットのまとめ
この記事のポイントをもう一度整理しておきます
- Cocoonのウィジェットは「サイドバー」「コンテンツ上下」「フッター」を押さえると一気に分かりやすくなる
- サイドバーは「プロフィール → 検索 → 人気記事 → カテゴリー → バナー」の順番にすると安定しやすい
- 記事の最後に置くウィジェットは、関連記事やCTAなど「読んだあとどうしてほしいか」をはっきり示すものにする
- 表示設定を使うと、カテゴリーやページごとにCocoonのウィジェットを出し分けできる
- トラブル時は「表示エリア」「表示設定」「キャッシュ」の3点を優先してチェックする
今日からできる最初の一歩としては、まず「サイドバーのウィジェットを整理する」ことから始めてみてください。
いま表示されているウィジェットを紙に書き出し、「これは本当に必要かな？」と1つずつ見直していくだけでも、サイトの印象や使いやすさはかなり変わります。
少しずつ試しながら、自分のブログに合ったcocoon ウィジェットの配置を育てていきましょう。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
