【Cocoon】サイドバーの設定と設置におすすめな7つの項目を解説

「サイドバーを設定したい」

「サイドバーに入れる項目は？」

「サイドバーの色を変えられる？」

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

この記事を読めば、あなたもサイドバーの設定方法はもちろん、

• 設置におすすめな項目
• 色を変える方法
• スマホでも表示させる方法

がかんたんに理解できるようになります。

私もユーザーにいろんな記事を読んでもらいたい！という思いで、本記事の方法でパパッと設定できました。

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

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

さっそく本題に入りましょう。

Cocoonサイドバーの設定方法

Cocoonのサイドバーでは、下記3つの設定ができます。

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

サイドバーに好きな項目を追加する

Cocoonでサイドバーに好きな項目を追加する方法は、下記の通りです。

サイドバーの表示する位置を決める

Cocoonでサイドバーを表示する位置を決める方法は、下記の通りです。

サイドバーを表示するページを選ぶ

Cocoonでサイドバーを表示するページを選ぶ方法は、下記の通りです。

Cocoonでサイドバーを非表示にする方法を詳しく知りたい場合は、下の記事を参考にしてください。

Cocoonサイドバーの設置におすすめな7つの項目

Cocoonでサイドバーに設置するおすすめの項目は、下記7つあります。

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

プロフィール

プロフィールは、「サイトを運営している人がどういう人なのか？」を伝える項目です。

下の画像は、当ブログがサイドバーに設置しているプロフィールです。

プロフィールを設置することで、

• 安心感（＝悪質サイトではないか）
• 親近感（＝趣味が同じ、年齢が近いなど）
• 信頼感（＝間違った情報が書かれてないか、実績があるかなど）

が得られるので、必ず設置しましょう。

Cocoonでプロフィールを作る方法は、下の記事を参考にしてください。

検索ボックス

検索ボックスは、サイト内にある記事を検索で探すことができます。

「読みたい記事があるけど探しきれない」というときも、サイドバーに検索ボックスを設置していれば、すぐに探し出せます。

新着記事

気に入ってるブロガーやユーチューバーが新しい記事や動画を公開していたら見ますよね。

新着記事がサイドバーにあれば、あなたのブログのファンになってくれた人がすぐに記事を確認できるようになります。

以下が、当ブログにあるCocoonカテゴリーの新着記事です。

人気記事

人気記事は、PV数をランキング形式で表示してくれます。

ランキング上位にある記事＝みんなが見ている記事なので、気になって思わずクリックしたくなる心理になりますよ。

以下が、当ブログにあるCocoonカテゴリーの人気記事です。

𝕏(旧Twitter)

もし𝕏(旧Twitter)をやっているならば、サイドバーに設置しましょう。

サイドバーにリアルタイムのツイートや好きなツイートを自由に設置できます。

ブログ経由であなたの𝕏(旧Twitter)をフォローしてくれるかも…

Cocoonで𝕏(旧Twitter)の埋め込み方法は、下の記事を参考にしてください。

ボックスメニュー

ボックスメニューは視認性が高いので、サイドバーに設置すればクリック率の上昇が見込めます。

タイトルや画像・アイコンを自由に設定できたりとカスタマイズ性も高いので、必ず設置しましょう。

下の画像は、当ブログがサイドバーに設置しているボックスメニューです。

Cocoonでボックスメニューの作り方は、下の記事を参考にしてください。

目次

目次は「サイドバースクロール追従」に設置することをおすすめです。

目次がなければ、

• 記事に書かれている内容が分からない
• 読みたい内容が見つけられない
• 自分がどこを読んでいるか分からなくなる

といったリスクがあります。

サイドバースクロール追従に設置すれば、記事を読み進めても目次がついてくるので、設置しましょう。

サイドバーに目次を設置したくない人は、下のような「目次に戻るボタン」を記事中に設置するのもおすすめです。

∧ 目次に戻る

Cocoonで目次に戻るボタンを作る方法は、下の記事を参考にしてください。

Cocoonサイドバーの色をカスタマイズする方法

サイドバーの色をカスタマイズするために、CSSを編集します。

Cocoonのサイドバーでは、下記2つの項目の色をカスタマイズできます。

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

サイドバーの文字色を変える

Cocoonでサイドバーの文字色をカスタマイズできるコードです。

.sidebar {
  background-color: #000000;/*こちらにカラーコードを入力*/
}

≫ カラーコードを調べる方法はこちら

サイドバーの見出しの色を変える

Cocoonでサイドバーの見出しの色をカスタマイズできるコードです。

.sidebar {
color:#000000;/*こちらにカラーコードを入力*/
}

カラーコードを調べる方法は、下の記事を参考にしてください。

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

Cocoonでサイドバーをスマホでも表示させるには、下記2つの手順にそって行います。

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

手順①スマホ用フッターにサイドバーを設置する

まず、スマホ用フッターにサイドバーを設置します。

手順②スマホ用フッターの表示設定をする

次に、スマホ用フッターを表示させる設定をします。

自サイトに戻って、フッターに設置したサイドバーをタップしてみましょう。

まとめ：サイドバーのデザイン次第で回遊率が変わる

今回は、Cocoonでサイドバーの設定方法を紹介しました。

サイドバーを設置するのと同じくらい、ヘッダー・フッターを設置するのも重要です。

ヘッダーやフッターを設置したい！という人は、下の記事もあわせてご覧ください。

また以下の記事では、その他カスタマイズ方法も紹介しています。