PR
当ブログ愛用のWordPressテーマ
＼乗り換え先おすすめNo.1テーマ！／
／ブロガーとして本格的に取り組む＼
おすすめAIツール6選
- AIブログくん
【Cocoon】サイドバーを非表示にする3つの方法｜スマホでも設定できる
「サイドバーを非表示にしたい」
「スマホでサイドバーを非表示にする方法は？」
「特定のページだけサイドバーを非表示にできる？」
この記事では、そんな方に向けて、Cocoonでサイドバーを非表示にする方法を解説します。
かめコンパスこんにちは、かめコンパスです！
この記事を読めば、あなたも簡単に
- サイドバーを非表示
- スマホでもサイドバーを非表示
- 特定のページだけサイドバーを非表示
にできるようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でパパッと解決できました。
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！
Cocoonでサイドバーを設定する方法も、下の記事で解説しています。
関連記事
【Cocoon】サイドバーの設定と設置におすすめな7つの項目を解説
WordPress利用者必見！Cocoonでサイドバーの設置を始めとした色や位置のカスタマイズ、スマホでもサイドバーを表示する方法を解説しています。この記事を読めば、ユーザー…
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
あわせて読みたい
【Cocoon】使い方と初期設定を初心者向けに解説【WordPressテーマ】
WordPress利用者必見！ブログ初心者向けにCocoonの使い方と設定方法を運営歴・記事数別で紹介しています。この記事を読めば、記事の書き方やサイト設計・デザイン、収益化…
さっそく本題に入りましょう。
目次
Cocoonでサイドバーを非表示にする3つの方法
Cocoonでサイドバーを非表示にする方法は、下記3つあります。
それぞれ詳しく解説します。
Cocoon設定でサイドバーを非表示にする
Cocoon設定でサイドバーを非表示にする方法は、下記の通りです。
STEP
WordPress管理画面で、Cocoon設定⇒全体の順にクリックする
STEP
「サイドバーの表示状態」でサイドバーを非表示にしたいページを選ぶ
STEP
変更をまとめて保存をクリックする
これでサイドバーを非表示にできます
Cocoonでサイドバーを非表示にできるページは、下記6つあります。
それぞれ詳しく解説します。
全てのページで非表示にする
文字通り、サイト内にある全てのページでサイドバーが非表示になります。
かめコンパスサイドバーにある情報に目移りせず、ページを読むのに集中できる
フロントページのみ非表示にする
トップページのみサイドバーを非表示にできます。
かめコンパスサイト型トップページを作る際におすすめ
インデックスページのみ非表示にする
Googleなどの検索エンジンで検索したときに表示されるページがインデックスページです。
Cocoonではインデックスページのサイドバーを非表示にできます。
例えば、投稿記事、プロフィール、カテゴリー一覧などがインデックスページになるかと思います。
かめコンパス他の記事も読んでほしいので、表示がおすすめ
固定ページのみ非表示にする
固定ページでサイドバーが非表示になります。
プロフィール、プライバシーポリシー、お問い合わせフォーム、サイトマップが固定ページになると思います。
かめコンパス固定ページではサイドバーがなくても問題なさそう
投稿ページのみ非表示にする
投稿ページでサイドバーが非表示になります。
かめコンパス記事の回遊率が下がるのでおすすめしないかな
404ページのみ非表示にする
そのページにアクセスしても存在しなかった場合に表示されるのが404です。
Cocoonでは404ページのみでもサイドバーを非表示にできます。
かめコンパスお好みでどうぞ
ウィジェットでサイドバーを非表示にする
Cocoonのウィジェットでサイドバーを非表示にする方法は、下記の通りです。
STEP
WardPress管理画面で、外観⇒ウィジェットの順にクリックする
STEP
- サイドバーをプルダウン
- 項目をプルダウン
- 削除をクリックする
STEP
すべての項目を削除するとサイドバーを非表示にできます
記事編集画面でサイドバーを非表示にする
Cocoonの記事編集画面でサイドバーを非表示にする方法は、下記の通りです。
STEP
サイドバーを非表示にしたいページの記事編集画面で、
- 設定をクリック
- 投稿をクリック
- ページ設定をプルダウンする
STEP
- ページタイプをプルダウン
- デフォルト以外から選ぶ
STEP
更新をクリックする
これでサイドバーを非表示にできます
Cocoonでスマホのサイドバーを非表示にする方法
スマホを下にスクロールするとサイドバーが表示される場合もあります。
Cocoonでスマホのサイドバーを非表示にする方法は、下記の通りです。
STEP
WordPress管理画面で、Cocoon設定⇒モバイルの順にクリックする
STEP
「モバイルボタン時コンテンツ下のサイドバーを表示」の✔を外す
STEP
変更をまとめて保存をクリックする
これでスマホのサイドバーを非表示にできます
Cocoonのサイドバーで任意の項目を任意のページで非表示にする方法
Cocoonのサイドバーで任意の項目を任意のページで非表示にするには、ウィジェットから設定します。
STEP
WordPress管理画面で、外観⇒ウィジェットの順にクリックする
STEP
- サイドバーをプルダウン
- 非表示にしたい項目をプルダウンする
STEP
- 表示設定をクリック
- ウィジェットの表示で「チェック・入力したページで非表示」を選ぶ
- 非表示にしたいページに✔、もしくは投稿IDを入力
- 保存をクリックする
これでサイドバーで任意の項目を任意のページで非表示にできます。
Cocoonのサイドバーから非表示にするおすすめの設定2選
Cocoonのサイドバーから非表示にするおすすめの設定方法を2つ紹介します。
かめコンパス当ブログを例に解説するよ
任意のカテゴリー・タグ一覧で関係のない記事をサイドバーから非表示にする
上の画像は、当ブログのCocoonカテゴリーページにあるサイドバーの比較です。
afterのように、任意のカテゴリー・タグ一覧で関係のない記事をサイドバーから非表示にすることで、
- サイトに統一感が出る
- ユーザーの興味がある記事だけ表示できる
- 関連記事のPV数が増える
などが期待できます。
かめコンパス見た目スッキリ！ユーザーの利便性も上がって良いことづくし！
設定方法は以下の通りです。
STEP
WordPress管理画面で、外観⇒ウィジェットの順にクリックする
STEP
- サイドバーをプルダウン
- 任意のカテゴリー・タグ一覧で非表示にしたい項目をプルダウン
- 表示モードで「カテゴリー別〇〇記事」を選ぶ
STEP
保存をクリックする
これで任意のカテゴリー・タグ一覧で関係のない記事をサイドバーから非表示にできます
任意のページで関連性のないページをサイドバーから非表示にする
上の画像は、当ブログのCocoon記事にあるサイドバーの比較です。
afterのように、任意のページで関連性のないページをサイドバーから非表示にすることで、
- サイトに統一感が出る
- ユーザーの興味がある記事だけ表示できる
- 関連性のある別記事へ誘導できる
などが期待できます。
かめコンパス他の記事もユーザーに見てほしいよね
設定方法は以下の通りです。
STEP
WordPress管理画面で、外観⇒ウィジェットの順にクリックする
STEP
- サイドバーをプルダウン
- 非表示にしたい項目をプルダウンする
STEP
- 表示設定をクリック
- ウィジェットの表示で「チェック・入力したページで非表示」を選ぶ
- カテゴリーをクリック
- 非表示にしたいカテゴリーページに✔
- 保存をクリックする
これで任意のページで関連性のないページをサイドバーから非表示にできます
まとめ：ページごとにサイドバーの非表示を使い分けよう
今回は、Cocoonでサイドバーを非表示にする方法を紹介しました。
以下の記事では、サイドバーで非表示にする以外のカスタマイズ方法も紹介しています。
あわせて読みたい
【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】
WordPress利用者必見！CocoonでCSSを使わず、おしゃれにカスタマイズする方法を紹介しています。この記事に書いてある内容を行えば、ユーザビリティーの向上はもちろん、感…
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです！
・ ・ ・
本記事は人気No.1*のWordPressテーマ「SWELL」で作成したので、デザインが抜群にオシャレです！
当ブログ愛用のWordPressテーマ「SWELL」
- プロのデザイナーが作ったかのようなオシャレなデザイン性！
- SWELL独自のブロックエディターが優秀！
- 専門家との提携でサイトの表示速度が圧倒的に速い！
- 専用プラグインでSEO評価が向上！
- 記事を書くスピードが1段階アップする！
- 計測機能付きでアフィリエイトで稼ぎやすい！
＼もっと早く乗り換えればよかった…／
／テーマ移行も5ステップのみ！＼
この記事が気に入ったら
フォローしてね！
コメント