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

<PR>

今回は『Cocoonのサイドバーを非表示にする方法』を３つ解説していきます。

どのやり方も簡単にできますし、「固定ページだけサイドバーを非表示にする」といった設定も可能です。

サイドバーを非表示する目的に合わせて、ぜひ参考にしてみてください。

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

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

Cocoonのサイドバーを非表示にする一つ目の方法は『Cocoon設定の全体設定でサイドバーを非表示にする』やり方です。

Cocoon設定の全体設定を選択します。

下にスクロールしていくと、サイドバーの表示状態が選択できます。

【サイドバーを表示させている状態】

【サイドバーを非表示にした状態】

ページの形式を選んでサイドバーを非表示にできますので、利用目的に合わせて選んでみてください。

そもそもサイドバーにウィジェットを入れない

Cocoonのサイドバーを非表示にする二つ目の方法は『サイドバーにウィジェットを入れない』ことです。

『外観 ⇒ ウィジェット』を選択します。

ウィジェットエリアの『サイドバー』と『サイドバースクロール追従』からウィジェットを全て外すと、ブログのデザインが自動で1カラムになってサイドバーが非表示になります。

なお、このやり方の場合はサイドバーに何も入っていないので、ブログ内の全てのページでサイドバーが非表示となります。

投稿画面のページ設定でサイドバーを非表示にする

Cocoonのサイドバーを非表示にする三つ目の方法は『投稿画面のページ設定でサイドバーを非表示にする』やり方です。

このやり方では、1ページずつサイドバーを非表示にすることができます。

クラシックエディターを利用している方は、表示オプションで『ページ設定』にチェックを入れてください。

Gutenberg（ブロックエディター）を利用している方は、右上の設定（歯車マーク）を開いてください。

投稿画面のサイドメニューに表示されるページ設定の『ページタイプ』でデフォルトデフォルト以外を選択すると、サイドバーが非表示となります。

【1カラム（広い）】

【1カラム（狭い）】

【本文のみ（広い）】

【本文のみ（狭い）】

『広い』を選択すると画面全体にカラムが広がりますが、『狭い』を選択すると『Cocoon設定 ⇒ カラム』で設定しているコンテンツ幅（デフォルトは800px）になります。

ただし、スマホで見たときは『広い』を選んでも『狭い』を選んでも違いはありません。

また、『本文のみ』を選択した場合は、サイドバーだけではなく、ヘッダーやフッターも非表示なります。

メルマガの登録ページのようなランディングページ（LP）を作る時には『本文のみ』はオススメの設定です。

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

Cocoonでスマホのサイドバーを非表示にするには、CSSに追記する必要があります。

『外観 ⇒ カスタマイズ』に進みます。

『追加CSS』を選択します。

Cocoon製作者のわいひらさんがGitHubで公開しているコードをコピーします。
⇒ わいひらさんがGitHubで公開しているコード

コピーしたコードを『追加CSS』に貼り付けて公開します。

CSSを追加すると、このようにスマホで見た時だけサイドバーが非表示になります。

補足②：『特定の記事』の『特定のウィジェット』のみ非表示にする方法

Cocoonのウィジェットの『表示設定』機能を使うと、『特定の記事』の『特定のウィジェット』のみ非表示にすることができます。

例えば、通常はサイドバーに表示させているアドセンス広告を、お問い合わせページだけ非表示にするといった設定が可能です。

【サイドバーにアドセンス広告】

【特定のページのみアドセンス広告を非表示にしている状態】

詳しい設定方法はこちらの記事で解説していますので、合わせて参考にしてみてください。

 

【Cocoon】ウィジェットの『表示設定』の使い方を解説

今回はCocoonのウィジェットの『表示設定』について解説していきます。この『表示設定』は、Cocoonだけに搭載されているオリジナル機能です。今すぐ使わなくても、覚えておくといつか役立つ時があるかもしれませんので、ぜひ参考にしてみてください。

sattoga.com

まとめ

今回は『Cocoonのサイドバーを非表示にする方法』を紹介してきました。

Cocoonのサイドバーを非表示にしたいときは、目的に合わせて、ぜひ今回の内容を参考にしていただければと思います。