【Cocoon】サイドバーの設定とカスタマイズのやり方

こんにちは、ikuzo(いくぞう)です。

今回は、Cocoonのサイドバーの設定方法とカスタマイズのやり方を書こうと思います。

サイドバーって使い方によってはブログの強力な武器になります。

人気のある記事や広告をサイドバーにのせることにより、PVや収益の増加に繋がる可能性があります。

そんなブログのサイドバーを上手に活用していきましょう！

Cocoonのサイドバーは2種類あります

Cocoonのサイドバーは2種類あります。

ひとつは記事のスクロールに連動する「サイドバー」です。

もうひとつは記事をスクロールしても止まったままの「サイドバースクロール追従」です。

記事（コンテンツ）よりもサイドバーが短いと「スクロール追従」エリアが記事に追従します。

サイドバーの設定方法

どちらのサイドバーも「ウィジェット」で設定します。

WordPressメニューの「外観」→「ウィジェット」をクリックします。

「サイドバー」と「サイドバースクロール追従」のウィジェットエリアがあります。

それぞれの▼マークを押すと、中のウィジェットが表示されます。

ウィジェットの追加方法

ウィジェットを追加するには、使いたいウィジェットをウィジェットエリアに直接ドラッグするか

もしくはウィジェットの▼マークを押して、ウィジェットエリアを選択してから「ウィジェットを追加」を押します。

ウィジェットの削除方法

最初から入っていて必要のないウィジェットや、「入れたけどやっぱり要らない」というウィジェットは、▼マークを押して「削除」を押します。

ウィジェットの順番を入れ替える方法

ウィジェットの順番はドラッグで入れ替えが可能です。

サイドバーを左側に表示させるには

Cocoonのサイドバーはデフォルトで記事の右側に表示されています。

「右側でなく、サイドバーは左側に表示させたい」という場合は、「Cocoon設定」の「全体」タブで設定を行います。

「全体」タブの下の方に「サイドバーの位置」という項目があります。

ここでサイドバーをコンテンツの右側に表示させるか、左側に表示させるかを選択できます。

サイドバーでよく使われているウィジェット

ここではサイドバーに入れている人が多いウィジェット（項目）を紹介します。

検索

「検索ボックス」を表示させるウィジェットです。

アナリティクスGA4を見ると「検索ボックス」を利用しているユーザー（読者）は意外に多いです。

ユーザビリティ向上のために「検索ボックス」は設置することをおすすめします。

プロフィール

プロフィールのウィジェットを使うには、先にプロフィールを設定する必要があります。

プロフィールの設定方法は別記事で紹介していますので、これから作る人は参考にしてください。

【WordPress】サイドバーにプロフィールを設置する方法

こんにちは、ikuzo(いくぞう)です。今回は、WordPressのサイドバーにプロフィールを設置する方法を2つ紹介します。1つはWordPressのプロフィールウィジェットを使う方法で、もう一つはテキストウィジェットを使うやり方です。2つ

ikuzoblog.com

新着記事・人気記事

サイドバーに新着記事・人気記事を表示させるとPVが増える可能性があります。

カテゴリー

カテゴリーのウィジェットです。しかしウィジェットだけではカテゴリーの順番は設定できません。

カテゴリーの順番を変更するには「Category Order and Taxonomy Terms Order」というプラグインをインストールします。

インストールしたら「投稿」→「タクソノミーの並び順」を押します。

ドラッグで順番を入れ替えて「更新」を押すとカテゴリーの表示順が変わります。

アーカイブ

記事を投稿月ごとに表示させます。

タグクラウド

タグ一覧を表示させます。

広告

広告ウィジェットは「広告」「広告（モバイル用）」「広告（PC用）」の3種類があります。

サイドバーにアドセンス広告を表示させる場合、あらかじめ広告ユニットコードの設定が必要です。

Cocoonのアドセンス広告ユニットコードを貼り付ける場所はこちらの記事をご覧ください。

【Cocoon】Googleアドセンスの自動広告と手動広告の設定方法

こんにちは、ikuzo(いくぞう)です。以前、Googleグーグル AdSenseアドセンスの「自動広告」を使っていましたが、その後「手動広告」に変えました。すると、クリック率がかなり上がったんですよ。自動広告はその名の通り、Google様

ikuzoblog.com

 

広告ユニットコードの設定が終わったら、サイドバーやサイドバースクロール追従に広告ウィジェットを追加して、

広告フォーマット（広告の種類）を選択するとサイドバーにアドセンス広告が表示されます。

ご参考までにウィジェットを使わずに、サイドバーにアドセンス広告を表示させる方法もあります。

「Cocoon設定」の「広告」タブを選択して、「サイドバーの表示位置」の項目にチェックを入れます。

ただしこちらは、サイドバートップとボトムのみの広告表示設定です。

また、A8.netのようなASPの広告をサイドバーに表示させる方法はこちらの記事に書きました。

A8.netの広告をWordPressブログに貼ってみよう

「ブログで稼ぎたい！」と考えている方にとって、収益を得る方法は主に2つあります。 クリック型広告 アフィリエイト広告「クリック型広告」は、広告をクリックされただけで収入が発生します。一番有名なのは、1クリック平均30円前後といわれている「G

ikuzoblog.com

サイドバースクロール追従「目次」の設定方法

私がサイドバースクロール追従に入れているのは「目次」だけです。

といっても「目次」のウィジェットは使用していません。

なぜかというと「目次」のウィジェットを使った場合、スマホで記事を見ると

記事の下にサイドバーの項目があり、目次も記事の下に表示されるからです。

記事の下に目次があっても、あまり意味がないですよね。

なので私は「テキスト（PC用）」を使って [toc] と入力しています。

「テキスト（PC用）」のウィジェットを使うことによってPCでは目次が表示され、

スマホでは記事下の目次が非表示になります。

スマホでサイドバーを表示させない方法

「目次」のウィジェットを使っても、

目次を含めてサイドバーで表示されている全ての項目をスマホのみ表示させない方法もあります。

スマホでサイドバーの項目をすべて非表示にする設定は「Cocoon設定」の「モバイル」タブで行います。

モバイルメニューのいずれかのモバイルボタンを選択した上で「モバイルボタン時コンテンツ下のサイドバーを表示」のチェックを外します。

これで「変更をまとめて保存」を押せば、スマホでサイドバーの項目はすべて非表示になります。

ヘッダーモバイルボタンの設定方法については、こちらの記事をご覧になってください。

【Cocoon】ヘッダーモバイルボタン（スマホメニュー）をカスタマイズ

Cocoonのいいところ。それは無料テーマなのに有料テーマに負けないくらい機能があるところ。Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。たとえばこれです。スマホのメニューが出たり、隠れたりするやつ。ブログを始めた

ikuzoblog.com

サイドバーにボックスメニューを表示させるには

サイドバーにボックスメニューを表示させる方法もあります。

出典：ボックスメニューウィジェットの使い方

サイドバーにボックスメニューを設置する方法は公式サイトで紹介されています。

 Cocoonサイドバーのカスタマイズ

ここからは、私がやっているサイドバーのカスタマイズをいくつか紹介します。

「カスタマイズはやったことがない」という方もいらっしゃると思うので、カスタマイズのやり方をかんたんに説明しておきます。

WordPressメニューの「外観」→「テーマファイルエディター」をクリックします。

するとスタイルシートというものが出てくるので、そこへこれから出てくる CSS を貼り付けます。

Cocoonの場合、「編集するテーマ」は“ Cocoon Child ”を選択します。

ここが“ Cocoon Child: Stylesheet ”になっていればOKです。

CSSを貼り付けたら下にある「ファイルを更新」を押します。

以上がカスタマイズのやり方です。

スタイルシートは編集する前にバックアップをとっておくと、エラーが起きてもすぐに元に戻せます。

CSSに慣れるまでは念のためバックアップをとるようにしてください。

サイドバー「見出し」のカスタマイズ

たとえば「カテゴリー」の部分ですが、当サイトは見出しを含めてこのようにカスタマイズしています。

見出しの変え方は、こちらの記事で紹介しているやり方です。

【Cocoon】初心者でも簡単！見出しデザインのカスタマイズ

こんにちは、ikuzo（いくぞう）です。今回は、Cocoonの見出し（h2～h6）のカスタマイズについて説明します。カスタマイズといっても、とても簡単なやり方です。いつも通り、初心者の方でも分かりやすいように図を交えて解説していきます。Co

ikuzoblog.com

 

当サイトのサイドバーの見出しは、サルワカさんの記事のこちらの見出しを参考に作りました。

Cocoonのサイドバーの見出しのセレクタは［.sidebar h3］です。

サルワカさんのCSSを下のように変更しました。

/* サイドバー見出し変更 */
.sidebar h3{
background: none!important;/*背景を消す*/
color: #333333;/*文字色*/
font-size: 16px;/*文字の大きさ*/
border-bottom: solid 1px skyblue;/*右側の線の種類・太さ・色*/
position: relative;
padding: 0.5em;/*余白*/
margin: 1.5em 0;/*余白*/
}

.sidebar h3:after{
position: absolute;
content: " ";
display: block;
border-bottom: solid 1px #1e7cd1;/*左側の線の種類・太さ・色*/
bottom: -1px;/*左側の線の位置*/
left: 0;/*左側の線の位置*/
width: 40%;/*左側の線の幅*/
}

ついでにカテゴリーの文字の大きさやアンダーラインのCSSはこちらです。

/* サイドバーカテゴリー */
.widget_categories ul li a{
font-size: 15px;/*文字の大きさ*/
padding: 0.85em 0.5em 0.75em!important;/*余白*/
border-bottom: solid 1px skyblue;/*下の線の種類・太さ・色*/
}

サイドバー「目次」のカスタマイズ

サイドバーに目次を表示したところ、なぜか枠線が消えていました。

なのでサイドバーの目次を枠線で囲むCSSを追加しました。

/* サイドバー目次 */
#sidebar .toc{
margin-top: 4em;/*枠の上の余白*/
margin-bottom: 2em;/*枠の下の余白*/
padding: 1em 1.5em;/*枠の中の余白*/
border: 1px solid #0693cd;/*枠線の太さ・種類・色*/
border-radius: 2px;/*枠線の角の丸み*/
}

目次の設定方法とカスタマイズは、こちらの記事を参考にしてください。

【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ

WordPressのテーマ「Cocoon」は、記事に見出しを入れると自動的に目次が作成されます。目次を作るためのプラグインは必要ありません。記事に見出しを入れるには、見出しにしたい行にカーソルを合わせて（もしくは文をドラッグ）、「段落▼」か

ikuzoblog.com

ウィジェット下の余白を調整

ウィジェット下の余白を広げたい場合は、以下のCSSを使います。

（“35px”の部分はお好みで変えてください。）

すべてのウィジェットの下に余白を設けるCSS

/* サイドバーウィジェット下の余白 */
.widget-sidebar{
margin-bottom: 35px;
}

テキストウィジェットの下だけ余白を広げるCSS

/* テキストウィジェット下の余白 */
.widget_text{
margin-bottom: 35px;
}

広告（PC用）ウィジェットの下だけ広げるCSS

/* 広告（PC用）ウィジェット下の余白 */
.widget_pc_ad{
margin-bottom: 35px;
}

カテゴリーウィジェットの下だけ広げるCSS

/* カテゴリーウィジェット下の余白 */
.widget_categories{
margin-bottom: 35px;
}

最後に

お疲れさまでした！

是非この記事を参考に、自分だけのサイドバーを作ってみてください。

今回も最後まで読んでいただき、ありがとうございました(^_^)