【Cocoon】サイドバーを非表示にする3つの方法|スマホでも設定できる

「サイドバーを非表示にしたい」

「スマホでサイドバーを非表示にする方法は?」

「特定のページだけサイドバーを非表示にできる?」

この記事では、そんな方に向けて、Cocoonでサイドバーを非表示にする方法を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • サイドバーを非表示
  • スマホでもサイドバーを非表示
  • 特定のページだけサイドバーを非表示

にできるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でパパッと解決できました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

Cocoonでサイドバーを設定する方法も、下の記事で解説しています。

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

目次

Cocoonでサイドバーを非表示にする3つの方法

Cocoonでサイドバーを非表示にする方法は、下記3つあります。

それぞれ詳しく解説します。

Cocoon設定でサイドバーを非表示にする

Cocoon設定でサイドバーを非表示にする方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定全体の順にクリックする

「Cocoon設定」、「全体」がある場所
STEP

「サイドバーの表示状態」でサイドバーを非表示にしたいページを選ぶ

「サイドバーの表示状態」がある場所
STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これでサイドバーを非表示にできます

Cocoonでサイドバーを非表示にできるページは、下記6つあります。

それぞれ詳しく解説します。

全てのページで非表示にする

「全てのページで非表示」がある場所

文字通り、サイト内にある全てのページでサイドバーが非表示になります。

かめコンパス

サイドバーにある情報に目移りせず、ページを読むのに集中できる

フロントページのみ非表示にする

「フロントページのみ非表示」がある場所

トップページのみサイドバーを非表示にできます。

かめコンパス

サイト型トップページを作る際におすすめ

インデックスページのみ非表示にする

「インデックスページのみ非表示」がある場所

Googleなどの検索エンジンで検索したときに表示されるページがインデックスページです。

インデックスページが検索結果に表示されている様子

Cocoonではインデックスページのサイドバーを非表示にできます。

例えば、投稿記事、プロフィール、カテゴリー一覧などがインデックスページになるかと思います。

かめコンパス

他の記事も読んでほしいので、表示がおすすめ

固定ページのみ非表示にする

「固定ページのみ非表示」がある場所

固定ページでサイドバーが非表示になります。

プロフィール、プライバシーポリシー、お問い合わせフォーム、サイトマップが固定ページになると思います。

かめコンパス

固定ページではサイドバーがなくても問題なさそう

投稿ページのみ非表示にする

「投稿ページのみ非表示」がある場所

投稿ページでサイドバーが非表示になります。

かめコンパス

記事の回遊率が下がるのでおすすめしないかな

404ページのみ非表示にする

「404ページのみ非表示」がある場所

そのページにアクセスしても存在しなかった場合に表示されるのが404です。

404ページが表示されている様子

Cocoonでは404ページのみでもサイドバーを非表示にできます。

かめコンパス

お好みでどうぞ

ウィジェットでサイドバーを非表示にする

Cocoonのウィジェットでサイドバーを非表示にする方法は、下記の通りです。

STEP

WardPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP
  1. サイドバーをプルダウン
  2. 項目をプルダウン
  3. 削除をクリックする
「サイドバー」、「項目」をプルダウンしている様子と、「削除」がある場所
STEP

すべての項目を削除するとサイドバーを非表示にできます

サイドバーにあるすべての項目を削除した様子

記事編集画面でサイドバーを非表示にする

Cocoonの記事編集画面でサイドバーを非表示にする方法は、下記の通りです。

STEP

サイドバーを非表示にしたいページの記事編集画面で、

  1. 設定をクリック
  2. 投稿をクリック
  3. ページ設定をプルダウンする
「設定」、「投稿」、「ページ設定」がある場所
STEP
  1. ページタイプをプルダウン
  2. デフォルト以外から選ぶ
ページタイプをプルダウンし、デフォルト以外から選んでいる様子
STEP

更新をクリックする

「更新」がある場所

これでサイドバーを非表示にできます

Cocoonでスマホのサイドバーを非表示にする方法

スマホを下にスクロールするとサイドバーが表示される場合もあります。

スマホでサイトを下にスクロールしたときにサイドバーが表れた様子

Cocoonでスマホのサイドバーを非表示にする方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定モバイルの順にクリックする

「Cocoon設定」、「モバイル」がある場所
STEP

「モバイルボタン時コンテンツ下のサイドバーを表示」の✔を外す

「モバイルボタン時コンテンツ下のサイドバーを表示」がある場所
STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これでスマホのサイドバーを非表示にできます

Cocoonのサイドバーで任意の項目を任意のページで非表示にする方法

Cocoonのサイドバーで任意の項目を任意のページで非表示にするには、ウィジェットから設定します。

STEP

WordPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP
  1. サイドバーをプルダウン
  2. 非表示にしたい項目をプルダウンする
サイドバーと非表示にしたい項目をプルダウンしている様子
STEP
  1. 表示設定をクリック
  2. ウィジェットの表示で「チェック・入力したページで非表示」を選ぶ
  3. 非表示にしたいページに✔、もしくは投稿IDを入力
  4. 保存をクリックする
「表示設定」、「チェック・入力したページで非表示」、「保存」がある場所

これでサイドバーで任意の項目を任意のページで非表示にできます。

Cocoonのサイドバーから非表示にするおすすめの設定2選

Cocoonのサイドバーから非表示にするおすすめの設定方法を2つ紹介します。

かめコンパス

当ブログを例に解説するよ

任意のカテゴリー・タグ一覧で関係のない記事をサイドバーから非表示にする

任意のカテゴリー・タグ一覧で関係のない記事をサイドバーから非表示にする前と後の比較

上の画像は、当ブログのCocoonカテゴリーページにあるサイドバーの比較です。

  • beforeでは、Cocoonカテゴリーページとは関係のない記事がサイドバーに表示されているのに対し、
  • afterでは、Cocoonカテゴリーページと関係のある記事が表示されています。

afterのように、任意のカテゴリー・タグ一覧で関係のない記事をサイドバーから非表示にすることで、

  • サイトに統一感が出る
  • ユーザーの興味がある記事だけ表示できる
  • 関連記事のPV数が増える

などが期待できます。

かめコンパス

見た目スッキリ!ユーザーの利便性も上がって良いことづくし!

設定方法は以下の通りです。

STEP

WordPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP
  1. サイドバーをプルダウン
  2. 任意のカテゴリー・タグ一覧で非表示にしたい項目をプルダウン
  3. 表示モードで「カテゴリー別〇〇記事」を選ぶ
「カテゴリー別〇〇記事」がある場所
STEP

保存をクリックする

「保存」がある場所

これで任意のカテゴリー・タグ一覧で関係のない記事をサイドバーから非表示にできます

任意のページで関連性のないページをサイドバーから非表示にする

任意のページで関連性のないページをサイドバーから非表示にする前と後の比較

上の画像は、当ブログのCocoon記事にあるサイドバーの比較です。

  • beforeでは、Cocoon記事とは関係のない記事がサイドバーに表示されているのに対し、
  • afterでは、Cocoon記事と関係のある記事が表示されています。

afterのように、任意のページで関連性のないページをサイドバーから非表示にすることで、

  • サイトに統一感が出る
  • ユーザーの興味がある記事だけ表示できる
  • 関連性のある別記事へ誘導できる

などが期待できます。

かめコンパス

他の記事もユーザーに見てほしいよね

設定方法は以下の通りです。

STEP

WordPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP
  1. サイドバーをプルダウン
  2. 非表示にしたい項目をプルダウンする
サイドバーと非表示にしたい項目をプルダウンしている様子
STEP
  1. 表示設定をクリック
  2. ウィジェットの表示で「チェック・入力したページで非表示」を選ぶ
  3. カテゴリーをクリック
  4. 非表示にしたいカテゴリーページに✔
  5. 保存をクリックする
「表示設定」、「チェック・入力したページで非表示」、「カテゴリー」、「保存」がある場所

これで任意のページで関連性のないページをサイドバーから非表示にできます

まとめ:ページごとにサイドバーの非表示を使い分けよう

今回は、Cocoonでサイドバーを非表示にする方法を紹介しました。

以下の記事では、サイドバーで非表示にする以外のカスタマイズ方法も紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonでサイドバーを非表示にする方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次