Cocoonでサイドバーを非表示にする方法！特定のページでのみ非表示にする方法も解説

管理画面「cocoon設定」をクリックしてします。

cocoon設定の「全体」をクリックしてください。

「サイドバーの表示状態」の「全てのページで非表示」にチェックを入れて変更を保存しましょう。

これで、サイト内のすべてのページでサイドバーが非表示になります。

管理画面cocoon設定「全体」を開きます。
サイドバーの表示状態を「フロントページで非表示」にチェックします。

これで、サイトのTOPページだけサイドバーが非表示になります。

TOPページ以外では、サイドバーが表示されます。

管理画面cocoon設定「全体」を開きます。
サイドバーの表示状態を「インデックスページで非表示」にチェックします。

これで、サイトのTOPページとインデックスページのみサイドバーが非表示になります。インデックスページとは、カテゴリー一覧、タグ一覧、投稿者一覧、投稿月一覧などの一覧ページのことです。

そのほかの投稿記事ページや固定ページでは、サイドバーが表示されます。

管理画面cocoon設定「全体」を開きます。
サイドバーの表示状態を「固定ページで非表示」にチェックします。

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

そのほかのインデックスページや投稿記事ページでは、サイドバーが表示されます。

管理画面cocoon設定「全体」を開きます。
サイドバーの表示状態を「投稿ページで非表示」にチェックします。

これで、投稿記事のみサイドバーが非表示になります。

そのほかのインデックスページや固定ページでは、サイドバーが表示されます。

管理画面cocoon設定「全体」を開きます。
サイドバーの表示状態を「404ページで非表示」にチェックします。

これで、404ページのみサイドバーが非表示になります。
404ページとは、存在しないURLが入力されたときなどに表示されるページのことです。通常は全然気にしなくて大丈夫なので、この設定はあまり使わないと思います。

404以外のページでは、サイドバーが表示されます。

管理画面「投稿一覧」から、サイドバーを消したい記事の編集ページを開いてください。

右側メニューが隠れている場合は、右上のボタンでメニューを開きましょう。

「投稿」メニューの「ページ設定」≫「ページタイプ」を探します。
通常はデフォルトになっているはずです。

ページタイプを1カラムのいずれかに変更して、記事の「更新」ボタンを押してください。
※フルワイド、広い、狭いはデザインの違いです。好きなものを選びましょう。
※本文のみを選択すると、サイドバーだけでなくヘッダー・フッターも消えます。

これで、この記事だけサイドバーが非表示になります。

ほかの通常の記事ではサイドバーが表示されています。

投稿ページだけなく、固定ページも同様のやり方でできます。

管理画面「外観」の「ウィジェット」をクリックします。

「サイドバー」の項目を開きましょう。
初期設定で、私の場合はこんな感じになっています。

ブロックの中を開くと中身が分かります。
不要な項目は左下の「削除」を押して消しましょう。
※ウィジェットの編集はリアルタイム保存になるケースが多いので、削除を押した時点で即時反映されます。
※間違えて消しても、左側「利用できるウィジェット」から色々と追加できるので大丈夫です。

管理画面「投稿一覧」を開いてください。
※今回は、任意の投稿ページでサイドバーの広告を非表示にする方法で説明します
※カテゴリーやタグページで出し分けることも可能です

該当する記事のタイトル上にカーソル（マウス）を置いてください。
すると画面左下に小さくURLが出ます。post=XXXXとなっている数字がidになるので覚えておきましょう。今回は19です。

次のステップへ進みます。

管理画面「外観」の「ウィジェット」をクリックしてください。

「サイドバー」の出し分けしたいブロックを探します。
今回は広告ブロックを、特定の記事でのみ非表示にします。

中を開き、「表示設定」をクリックしましょう。

「投稿」をクリックし、先ほど調べたid19を入れて保存します。

これで、そのページだけ広告ウィジェットが非表示となります。
複数のページを入れる際は、【19,50,200,201】のようにカンマ区切りで入力します。

カテゴリーページやタグページで出し分けをしたい場合も同様の手順で行うことができます。カテゴリーやタグのidを調べて、表示設定に入力するとそのページだけ非表示にできます。

管理画面「cocoon設定」の「モバイル」をクリックします。

「モバイル設定」≫「モバイルボタン」の「モバイルボタン時コンテンツ下のサイドバーを表示」のチェックを外して、変更を保存しましょう。

これで、スクロール下のサイドバーは非表示になります。

管理画面「外観」の「ウィジェット」をクリックします。

cocoonテーマでは、PC用とモバイル用の二つが用意されているブロックが存在します。それで対応できる場合は、このブロックを利用するのが簡単でおすすめです。

PC用とモバイル用でブロックの中身を変えれば、テキストや画像を出し分けることができます。

パソコンでのみ表示したければ、PC用ブロックだけを入れれば（モバイル用は入れない）スマホでその項目は表示されなくなります。

PC用・モバイル用ウィジェットで対応できない場合は、下記の方法で行う必要があります。

PC用とモバイル用ウィジェットが用意されていない項目は、上の方法が使えません。その場合はテーマファイルエディターでcssを追記します。
（※検証ツールとHTML/CSSがある程度分かるのが前提です）

今回は、サイドバー「人気の記事」をPC版でのみ表示し、スマホ版で非表示にするケースをご紹介します。

まずは、Google Chromeなどのブラウザで右クリック検証を開いてください。
スマホで非表示にしたいサイドバー項目のid名を探します。

<aside>タグの中にid="XXXXXX"があるかと思いますが、そこが各項目のid名となっています。

今回消す「人気記事」項目のid名はpopular_entries-2ですね。これをメモしておきましょう。

管理画面「外観」の「テーマファイルエディター」を開きます。

スタイルシートを開き、メディアクエリの834px以下の箇所にコードを追記します。
※1023px以下や480px以下でも機能しますが、今回はcocoonの設定に合わせて834px以下に記載します。
※開始タグ{と、終了タグ}の間にcssは追記するのがお作法です。カッコは必要なので間違って消さないように気をつけましょう。

下記のコードを追記してください。
id名には先ほど調べた名前を入れましょう。私の場合は、popular_entries-2です。

#id名{
    display: none;
}

これで、ファイルを更新するとスマホ時だけ人気記事が消えるようになります。