WordPressテーマ「Cocoon」を使っていて、「サイドバーを消したいのに、どこを触ればいいのかさっぱり分からない…」と手が止まっていませんか。
この記事では、Cocoonでサイドバーを非表示にする方法から、特定ページだけ1カラムにする方法、うまく消えないときのチェックポイントまでをまとめて紹介します。
結論から言うと、「Cocoonの全体設定」と「ページごとの1カラム設定」を押さえておけば、ほとんどのケースでサイドバーの非表示は簡単にコントロールできます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Cocoonでサイドバーを非表示にしたい人へ｜この記事のゴール
最初に、このあと何を順番に説明していくのかを簡単に整理しておきます。「自分はどのやり方を知りたいのか」を頭の中で決めてから読むと、迷いにくくなります。
サイドバー非表示で何が変わる？メリット・デメリット
Cocoonでサイドバーを非表示にすると、見た目だけでなく、読者の動き方もけっこう変わります。ざっくりメリット・デメリットを比べてみましょう。
| 項目 | サイドバーを非表示にするメリット | サイドバーを残すメリット |
|---|---|---|
| 読みやすさ | 1カラムになり、本文だけに集中しやすい | 画面が2カラムになり、全体の雰囲気が伝わりやすい |
| 行動（CTA） | LPやサービス紹介など、1つのゴールに視線を集めやすい | 複数のバナーや広告を同時に見せやすい |
| 回遊性 | 本文下に関連記事やバナーをまとめて置ける | カテゴリ、人気記事、検索窓などを常に見せられる |
| デザイン | すっきりしたレイアウトで「サイト」っぽい印象になる | いかにもブログという雰囲気になり、親しみが出る |
ざっくり分けると、次のような使い分けがおすすめです。
- LP、サービス紹介、プロフィール、問い合わせページ → サイドバー非表示（1カラム）
- 雑記ブログの記事、日記、読み物中心のページ → サイドバーあり（2カラム）
この記事のゴールは、「どのページでサイドバーを消すべきか」「どうやって非表示にするか」を自分で判断できるようになることです。
Cocoonサイドバー非表示の3つのやり方を押さえよう
これから説明していく内容は、次の3パターンに分かれます。
- サイト全体、またはページタイプごとにサイドバーを非表示にする方法
- 特定の投稿・固定ページだけ1カラムにしてサイドバーを消す方法
- スマホや一部ページでサイドバーの扱いを調整する考え方
自分のサイトの構成をイメージしながら、「このパターンは使いそうだな」と感じるところを重点的に読んでみてください。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Cocoon設定でサイト全体のサイドバーを非表示にする基本手順
まずは、Cocoonの全体設定でサイドバーを非表示にする方法です。ここを押さえておくと、「トップページだけサイドバーを消したい」「固定ページだけ1カラムにしたい」といったパターンもすぐ対応できます。
Cocoon設定「全体」からサイドバーを消す流れ
Cocoonでサイドバーの表示・非表示をまとめて切り替えたいときは、「Cocoon設定」の「全体」タブから操作します。流れを簡単な表にまとめました。
| 手順 | 操作場所 | やること |
|---|---|---|
| 1 | ダッシュボード | 「Cocoon設定」をクリックする |
| 2 | Cocoon設定画面 | 「全体」タブを選択する |
| 3 | サイドバー設定エリア | 「サイドバーの表示状態」を探す |
| 4 | サイドバーの表示状態 | 「全てのページで非表示」など目的に合う項目を選ぶ |
| 5 | 画面下部 | 「変更をまとめて保存」をクリックする |
「サイドバーの表示状態」では、たとえば次のような項目をチェックボックスで選べます。
- 全てのページで表示 / 全てのページで非表示
- フロントページで非表示（トップページだけ消す）
- インデックスページで非表示（カテゴリ一覧などの記事一覧で消す）
- 固定ページで非表示
- 投稿ページで非表示
- 404ページで非表示
ブログ全体を1カラムにしたいなら、「全てのページで非表示」にしてしまうのがいちばん簡単です。あとからページ単位でサイドバーを出すこともできるので、思い切って試してみても大丈夫です。
ページタイプ別にサイドバー非表示を切り替える
「トップページだけ消したい」「記事ページだけ1カラムにしたい」といったケースでは、ページタイプ別の設定を使います。
- トップページだけ1カラムにしたい → 「フロントページで非表示」にチェック
- ブログ記事だけサイドバーを消したい → 「投稿ページで非表示」にチェック
- プロフィールや問い合わせなど、固定ページだけシンプルにしたい → 「固定ページで非表示」にチェック
よくある目的とおすすめの設定を一覧にしておきます。
| 目的 | おすすめの設定 | メモ |
|---|---|---|
| サイト全体を1カラムにしたい | 全てのページで非表示 | サイドバーを基本的に使わない構成にする |
| トップページだけすっきり見せたい | フロントページで非表示 | ブログ型でもサイト型でも使える |
| ブログ記事だけサイドバーを消したい | 投稿ページで非表示 | 記事をLPっぽく見せたいときに便利 |
| 固定ページだけシンプルにしたい | 固定ページで非表示 | プロフィール、問い合わせ、利用規約などに向いている |
Cocoonの全体設定だけでも、かなり柔軟にサイドバーの表示・非表示を切り替えられます。細かく調整したくなったら、次の「ページごとの設定」に進みましょう。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
投稿・固定ページごとにCocoonサイドバーを非表示にする方法
次は、「このページだけ1カラムにしたい」というピンポイントなケースです。LPやセールスページ、プロフィールなど、特定のページだけサイドバーを消したいときに役立つやり方です。
記事編集画面から1カラムにする手順
投稿や固定ページの編集画面には、「ページ設定」や「ページタイプ」を選べるエリアがあります。ここを切り替えるだけで、そのページのレイアウトを1カラムにできます。
大まかな流れは次のとおりです。
- サイドバーを消したい投稿または固定ページの編集画面を開く
- 画面右側、または下の方にある「ページ設定（Cocoon設定）」を探す
- 「ページタイプ」のプルダウンを開き、「1カラム（狭い／広い）」や「本文のみ」を選ぶ
- 「更新」または「公開」ボタンを押して保存する
この設定は、Cocoonの全体設定と独立して効きます。「全てのページで表示」のままでも、ページタイプを1カラムにすれば、そのページだけサイドバーが非表示になります。
1カラムテンプレートの違いを比較する
ページタイプの1カラムには何種類かあります。「違いが分からないから、どれを選べばいいのか迷う」という人も多いので、特徴をざっと比べておきます。
| ページタイプ | 特徴 | 向いている用途 |
|---|---|---|
| 1カラム（狭い） | 本文の幅がやや細めで、読みやすさ重視 | 文字中心の長文記事、ストーリー仕立てのページ |
| 1カラム（広い） | 1カラム（狭い）より横幅が広く、写真も見せやすい | 画像多めの解説記事、シンプルなLP |
| 本文のみ（狭い／広い） | ヘッダーやフッターを消して、本文だけにするレイアウト | 申し込みフォームや、1つの行動だけに集中させたいLP |
私は、通常の記事ならまず「1カラム（狭い）」か「1カラム（広い）」を試すことが多いです。横幅が広すぎると、1行の文字数が増えて目を左右に振る距離が長くなり、意外と読むのがしんどくなります。文字中心の記事なら、少し細めのほうが読みやすいと感じる人が多いはずです。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
Cocoonサイドバー非表示にしたのに消えないときのチェックリスト
ここまで設定しても、「なぜかサイドバーが残ったまま」「一部のページだけレイアウトがおかしい」ということがあります。この章では、そんなときに順番に見てほしいポイントをチェックリスト形式でまとめます。
よくある原因と対処法をまとめた表
まずは、Cocoonでサイドバーが非表示にならないときに多いパターンを一覧で見てみましょう。原因が思い当たるものがあれば、そこから順番に潰していくイメージです。
| 症状 | ありがちな原因 | 主な対処法 |
|---|---|---|
| サイドバーがまったく消えない | Cocoon設定の保存忘れ、別タブでの上書き | 「変更をまとめて保存」を押し直し、設定が反映されているか確認する |
| 特定のページだけサイドバーが残る | そのページのページタイプがデフォルト（2カラム）のまま | 該当ページの「ページタイプ」を1カラム系に変更する |
| サイドバーらしき中身が見えている | テーマや子テーマのテンプレートが独自にカスタマイズされている | 子テーマのテンプレートファイルにサイドバーの呼び出しがないかチェックする |
| PCでは消えているのにスマホでは残る | モバイルのレイアウト設定やキャッシュの影響 | モバイル設定とキャッシュ削除を行い、別ブラウザでも表示を確かめる |
| 設定を戻してもレイアウトが崩れたまま | 追加CSSや子テーマのstyle.cssが上書きしている | サイドバー関連のクラスをいじっていないかCSSを確認する |
【稼げるキーワード教えます】
▼ ▼ ▼
実際に相談を受けていると、「保存ボタンを押し忘れていた」「ページごとにページタイプを変えていなかった」など、ほんの少しの見落としで詰まっているケースがかなり多いです。焦らず、一つずつ確認していきましょう。
キャッシュ・プラグイン・子テーマを確認する
サイドバー非表示の設定を変えたのに表示が変わらない場合、キャッシュやテーマのカスタマイズが影響していることもよくあります。次のポイントもチェックしてみてください。
- キャッシュ系プラグインを使っている場合は、サイトのキャッシュを削除してから再表示する
- ブラウザ側のキャッシュも、シークレットウィンドウや別ブラウザで確認してみる
- 子テーマを使っているなら、sidebar.phpやpageテンプレートを独自に編集していないか確認する
- 追加CSSで .sidebar や .widget-area など、サイドバーに関係するクラスを書き換えていないか見直す
以前別のテーマを使っていて、そのときのカスタマイズが残っているサイトだと、思わぬところに原因が隠れていたりします。Cocoon本体の設定はシンプルなので、うまく効かないときは「キャッシュ」と「過去のカスタマイズ」を疑うのが近道です。
スマホだけCocoonサイドバーを非表示にしたいときの考え方
「PCではサイドバーを表示したいけれど、スマホではなるべくすっきりさせたい」という相談もよくあります。具体的なカスタマイズの前に、一度スマホ表示でのサイドバーの役割を整理しておきましょう。
モバイル表示でのサイドバーの役割を整理する
スマホ表示の場合、CocoonのサイドバーはPCのように画面の横には出ず、多くのケースでは本文の下やモバイルメニューの中に回り込みます。そのため、PCと同じ感覚で「いつも右側に見えているメニュー」と考えると少しズレが出ます。
スマホのサイドバーには、例えば次のような情報を置いていることが多いと思います。
- カテゴリー一覧
- 新着記事・人気記事
- プロフィール
- サイト内検索窓
- バナー広告
ここで考えたいのは、「それぞれの情報を、読者はどのタイミングで見てくれそうか」という点です。
- 絶対に見てほしい案内 → 本文の直下やボタンとして設置する
- あると便利なメニュー → サイドバーやフッターにまとめる
スマホだけ完全にサイドバーを消してしまうことも技術的にはできますが、その前に「どの情報をどこに置けば読みやすいか」を整理しておくと、むやみに消しすぎて後悔せずに済みます。
表で見るPCとスマホのレイアウト使い分け
PCとスマホでサイドバーをどう使い分けるか、イメージしやすいように表にしておきます。
| デバイス | サイドバーの基本方針 | おすすめの使い方 |
|---|---|---|
| PC | 画面の横に見せる前提 | カテゴリ、人気記事、プロフィール、広告などを常に見せる |
| スマホ | 本文の下やメニューの中に表示される前提 | 本当に必要なものだけに絞って配置する |
| タブレット | 画面幅によってPC寄りにもスマホ寄りにもなる | まずはPCとスマホの両方で違和感のない配置を目指す |
「スマホの読者はサイドバーまでスクロールしてくれないことが多い」という前提で、本文の前後に必要な導線を集めていくと、自然と見やすいレイアウトになっていきます。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
デザイン面で失敗しないCocoonサイドバー非表示と1カラム運用のコツ
サイドバーを非表示にできても、1カラムのデザインが読みづらいと読者はすぐ離脱してしまいます。この章では、Cocoonで1カラム運用をするときに意識したいデザイン面のポイントをまとめます。
1カラム時の本文幅・行間・フォントサイズの目安
テーマや好みで調整は変わりますが、読みやすさの観点から次のような目安を意識しておくと安心です。
| 項目 | 目安 | コメント |
|---|---|---|
| 本文の横幅 | おおよそ600〜800px | 1行あたり全角30〜40文字前後だと読みやすい |
| 行間 | フォントサイズの1.6〜1.8倍 | 詰めすぎると圧迫感が出るので少しゆとりを持たせる |
| 本文フォントサイズ | PCで約16px、スマホで15〜16px | 小さすぎるとスマホで読み続けるのがつらくなる |
| 見出しの前後の余白 | 本文1〜2行分程度 | 見出しが浮きすぎず、本文に埋もれないバランスを意識 |
Cocoonの標準設定でも十分見やすいですが、サイドバーを非表示にして1カラムにするときは、次のような点もチェックしてみてください。
- PCの横幅で、本文が広がりすぎていないか
- スマホで読んだとき、文字が小さすぎたり、逆に大きすぎたりしないか
- 行間がスカスカすぎたり、逆にギュッと詰まりすぎていないか
CSSが分かる方なら、子テーマのstyle.cssに .no-sidebar .wrap のmax-widthを指定してあげると、1カラム時の本文幅を細かく調整できます。
CTAや関連記事の置き場所を工夫する
サイドバーを非表示にすると、読者にしてほしい行動に視線を集めやすくなる反面、何も考えずにサイドバーを消すだけだと回遊性が落ちることもあります。そこで大事になるのが、本文のあとにどんな順番で要素を並べるかです。
私がよく使う流れはこんな感じです。
- 本文のすぐ下に、いちばんしてほしい行動のボタン（問い合わせ、申し込みなど）を置く
- その下に「合わせて読みたい記事」「関連する記事」を2〜4件並べる
- さらにその下に、プロフィールやメルマガ登録フォームを配置する
流れを表にすると次のようなイメージになります。
| 順番 | 表示内容 | 役割 |
|---|---|---|
| 1 | 本文の終わり | 読み切った達成感を感じてもらうポイント |
| 2 | メインCTAボタン | いちばん取ってほしい行動を明確に伝える |
| 3 | 関連記事リンク | 他の記事にも興味を持ってもらう |
| 4 | プロフィールやメルマガ案内 | 「また来たい」と思ってもらうきっかけを作る |
サイドバーを非表示にするからこそ、本文下の導線を丁寧に設計しておくと、サイト全体の成果も出やすくなります。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問｜Cocoonでサイドバーを非表示にするときの疑問
最後に、Cocoonのサイドバー非表示についてよく聞かれる質問を、Q&A形式でまとめます。
固定ページだけサイドバーを非表示にしたいときは？
Q. Cocoonで固定ページだけサイドバーを非表示にしたいのですが、どうすればいいですか。
A. やり方は2通りあります。1つめは「Cocoon設定 > 全体 > サイドバーの表示状態」で「固定ページで非表示」にチェックを入れる方法です。2つめは、固定ページごとの編集画面で「ページタイプ」を1カラム系に変更する方法です。すべての固定ページでサイドバーを消したいなら前者、ページごとにCocoonのサイドバーを非表示にするかどうかを分けたいなら後者がおすすめです。
特定のカテゴリーの記事だけサイドバーを消せる？
Q. 特定のカテゴリーの記事だけ、Cocoonのサイドバーを非表示にすることはできますか。
A. Cocoonの標準設定には「カテゴリーごとにサイドバーを非表示にする」項目はありません。ただ、あるカテゴリーの記事はすべて1カラムで書くと決めておき、そのカテゴリーに属する記事のページタイプを1カラムに統一していくことで、実質的に「そのカテゴリーはサイドバー非表示」という状態を作ることは可能です。もっと細かく制御したい場合は、条件分岐を使ったテンプレート編集や独自CSSといったカスタマイズが必要になります。
サイドバーを非表示にしたあと、元に戻すのは簡単？
Q. 一度Cocoonでサイドバーを非表示にしたあと、やっぱり戻したくなった場合は簡単に元に戻せますか。
A. いつでも戻せます。Cocoon設定で「サイドバーの表示状態」を元の状態に戻し、「全てのページで非表示」などのチェックを外せばOKです。個別のページについては、編集画面の「ページタイプ」をデフォルト（2カラム）に戻すだけでサイドバーが復活します。Cocoonのサイドバー非表示は気軽に試せる設定なので、まずは数ページだけでテストして感覚をつかんでみてください。
まとめ｜Cocoonサイドバー非表示設定で今日からやるべきこと
ここまでのポイントを整理して、最初に何から手を付ければいいかをまとめておきます。
この記事の要点おさらい
- Cocoonでサイドバーを非表示にする方法は、「全体設定」「ページタイプごと」「個別ページ」の3パターンがある
- サイト全体やページタイプ別の設定は、「Cocoon設定 > 全体 > サイドバーの表示状態」から切り替えられる
- 特定の記事だけ1カラムにしたい場合は、そのページの「ページタイプ」を1カラム系に変更すればよい
- サイドバーが消えないときは、「保存忘れ」「ページタイプ」「キャッシュ」「子テーマや追加CSS」の順で原因を追うと見つけやすい
- サイドバーを非表示にしたら、本文下のCTAや関連記事の配置までセットで考えると、読者の動きが安定しやすい
今日からできる最初の一歩
いきなりサイト全体をいじると不安だと思うので、まずは次の2ステップだけやってみてください。
- 自分のサイトの中で、「サイドバーを消したほうが読みやすくなりそうだな」と感じるページを3つピックアップする
- その3ページの編集画面を開き、「ページタイプ」を1カラム（狭い／広い）のどちらかに変更して、実際の見え方を確認する
この小さな一歩だけでも、「どのページをCocoonの1カラムにして、どのページはサイドバーを残すべきか」がかなりはっきりしてきます。この記事を手元に置きながら、自分のサイトに合ったサイドバーの使い方を試してみてください。少しずつ調整していけば、「読まれるページ」「行動してもらえるページ」に近づいていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
