【Cocoon】初心者向け サイドバーの設定方法とカスタマイズ

Cocoon サイドバーの設定方法とカスタマイズ Cocoon

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

私はほんの成り行きで、CocoonやWordPressの設定方法、およびカスタマイズの記事をメインで書いてます。

なぜなら私のブログにはカテゴリーがいくつかあるものの、

一番読んでもらえてるのが、CocoonやWordPressの記事で、

Googleも割と上位の方に表示してくれているからです。

そのため、川の流れに身を任せるかのように、いつしかこのようなブログになりました。

なので、ほとんど素人が書いていると思って下さい。

そのおかげで「初心者目線」では書けていると思います(たぶん、それだけがいいところ)。

 

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

サイドバーって使い方によってはブログの強力な武器になると思うんですよね。

人気のある記事や広告をサイドバーにのせることにより、

工夫次第によってはアクセスや収益の増加に繋がる可能性があります。

 

と言いつつ、当ブログのサイドバーはこれといって大きな特徴はないものの、

今回は私がどんなふうにサイドバーを作っているかを丸裸にして、みなさんにお見せします。

そのうち1つでも2つでも、この記事を読んでいるあなたのサイドバー作りのお役に立てれば…

という主旨で今回は書いていきます。

スポンサーリンク

サイドバーの設定方法

一口にサイドバーと言っても、サイドバーは2種類あります。

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

スクロール連動型のサイドバー

もうひとつは記事をスクロールしても、画面に張り付いて動かなくなる

スクロール追従型のサイドバーです。

スクロール追従型のサイドバー

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

 

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

WordPressダッシュボードの「外観」→「ウィジェット」を選択

ウィジェットの「サイドバー」と「サイドバースクロール追従」

ウィジェットのデフォルト(初期の状態)はこんな感じです。

「サイドバー」と「サイドバースクロール追従」のデフォルト

プー太郎
プー太郎

ここに必要なウィジェットを追加したり、いらないものは削除したり、

あとはウィジェットの順番の入れ替えてサイドバーを作ります。

ウィジェットの追加

サイドバーにウィジェットを追加するには、使いたいウィジェットを左からドラッグするか

ウィジェットをドラッグしてサイドバーに追加

ウィジェットを追加する場所を選んで「ウィジェットを追加」を押しましょう。

追加する場所を選択して「ウィジェットを追加」を押す

プー太郎
プー太郎

ウィジェットを一通り見てみて、

自分が入れたいものをどんどん追加するといいよ。

ウィジェットの削除

不要なウィジェットは、▼マークを押して「削除」を押します。

ウィジェットの削除

ウィジェットの順番の入れ替え

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

ドラッグでウィジェットの順番を入れ替える

ウィジェットの順番を入れ替えたサイドバー

スポンサーリンク

サイドバー 各ウィジェットの設定とカスタマイズ

2021年1月現在、ikuzoblogのサイドバーのウィジェットはこんなふうに並べています。

ikuzoblog サイドバーのウィジェットの並べ方

“注”の部分は、表示中の記事と同じカテゴリーの「よく読まれている記事」がサイドバーに表示されるように設定してあります。

詳細は後述します。

プロフィール

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

Twitterフォローボタンの設置方法も書いてあります。

初心者向け【WordPress】サイドバーにプロフィールを設置する

記事のリンク

プロフィールの下には多くの人に読んでいただきたい記事を2つほど並べました。

特にブログ以外の記事を見にきてくれている人に見てほしいという願いをこめて、

プロフィールのすぐ下に配置しました。

サイドバーにのせた記事へのリンク

プー太郎
プー太郎

ところがぎっちょん、ほとんど読まれてませんww

上の記事2つのコードはこちらです。

<p style="margin-bottom: 0.5em;">
<a href="https://ikuzoblog.com/selfback" target="_blank" rel="noopener"><img class="size-full wp-image-13284 aligncenter" src="画像のURL" alt="画像の説明" width="320" height="180" /></a></p>
<p style="font-weight: bold; font-size: 14px; margin: 0 0 2em;">誰でもすぐに稼げる!自己アフィリエイト「セルフバック」のやり方</p>
<p style="margin-bottom: 0.5em;">
<a href="https://ikuzoblog.com/wordpress-cocoon"><img class="size-full wp-image-12774 aligncenter" src="画像のURL" alt="画像の説明" width="320" height="180" /></a></p>
<p style="font-weight: bold; font-size: 14px; margin: 0 0 2em;">【お金儲けの第一歩】WordPressでブログを始めよう</p>

作り方は、テキストウィジェットを使用して、まず画像を挿入します。

テキストウィジェットに画像を挿入

各デバイスでサムネイルが真ん中に来るように、画像をセンタリング(中央揃え)しておきます。

画像をセンタリング

そして画像に記事へのリンクを貼ります。

画像に記事へのリンクを貼る

リンク先のURLを入力するか、リンク先の記事を選択する設定画面

あとはテキストエディタで、先ほどのコードを参考に入力して下さい。

テキストエディタでカスタマイズする画面

画像のコード(リンク含む)に付け足したのが赤線の部分です。

画像のコードに付け足ししたコード

<p style=”margin-botoom: 0.5em;”>画像の下に0.5文字分の余白を設け、

font-weight: boldは説明文の文字を太字にfont-size: 14px文字を14ピクセル

magin: 0 0 2em文字の下に2文字分の余白というふうに設定しました。

画像の下に0.5文字分の余白と、文字の下に2文字分の余白を設けた画像

margin-bottom: 2em” と “margin: 0 0 2em” はどちらも2文字分の余白を下に作るコードで、意味は同じです。

設定が完了したらウィジェットの「保存」→「完了」を押します。

スポンサーリンク

アドセンス広告

アドセンス広告は、PC用の広告ウィジェットを使用しています。

PC用ウィジェットは横834px以上のデバイスで表示されます。

プー太郎
プー太郎

広告ウィジェットは3種類あります。

3種類の広告ウィジェット

アドセンス広告の貼り方は別記事にしてありますので、こちらも参考にして下さい。

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

 

アドンセンスの広告ユニットコードが設定済みでしたら、

広告ウィジェットをサイドバーに追加して「広告フォーマット」を選ぶだけで設定は完了です。

広告フォーマットを選択して「保存」→「完了」を押す

ウィジェットを使って「ラージスカイクレイパー」のような大きい広告を貼ると

「CLSに関する問題」というエラーがいずれ出る可能性があります(当ブログで出ました涙)。

対処法を書きましたので、もしエラーが出たときはこちらの記事をご覧下さい。

「CLSに関する問題:0.25超(パソコン)」を一発で解決!

広告

お次はASPの広告です。

テキストウィジェットか、広告ウィジェットにASPの広告コードを貼り付けるだけです。

ASP広告のセンタリングのやり方は、こちらの記事に書いてあります。

【アフィリエイト】A8.netの広告をブログに貼ってみよう
プー太郎
プー太郎

上の記事はA8の広告の貼り方ですが、どこのASPでもやり方は同じです。

A8.net審査がないので、会員登録をしていない人はこの機会に登録しておきましょう。

カテゴリー

カテゴリーの部分は、見出しを含めてこのように変更しました。

サイドバーのカテゴリー一覧 変更前と変更後

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

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

 

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

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;/*下の線の種類・太さ・色*/
}

カテゴリーの順番を変えるプラグイン

サイドバーのカテゴリーは、そのままではカテゴリーの順番を変えることができません。

Category Order and Taxonomy Terms Order」というプラグインを使うと、順番の変更が可能です。

プラグイン「Category Order and Taxonomy Terms Order」

プラグインをインストールして「有効化」を押したら「Taxonomy Order」をクリックします。

「Taxonomy Order」をクリック

ドラッグでカテゴリーの順番を入れ替えて「更新」を押すだけです。

ドラッグでカテゴリーの順番を入れ替えて「更新」を押す

よく読まれている記事(人気記事)

ここはカテゴリー(Cocoon、ブログ、その他の3パターン)によって表示される人気記事が変わるようにしてあります。

「人気記事」のウィジェットを使うという手もありますが、

その方法だと記事の順番が制御できないため、あえてテキストウィジェットを使用してます。

プー太郎
プー太郎

あとは公式サイトで紹介されている

「ナビカード」を使うという方法もあるよ。

 

カテゴリーごとに人気記事を変えるには、それぞれのウィジェットを作ります。

カテゴリー別の人気記事のウィジェット

記事の画像や説明文は、さきほどの記事のリンクと同じやり方で入力して下さい。

記事のアイキャッチ画像をそのまま使用してもいいですし、サムネイル用に別の画像を用意してもいいと思います。

私はサムネイルが小さくなっても文字が見やすいように、専用の画像を用意しました。

ブログのロゴの作り方
記事のアイキャッチ画像
サイドバーのサムネイル画像
サイドバーのサムネイル画像

カテゴリーごとの人気記事を表示させる方法は以下の通りです。

「表示設定」を押し「チェック・入力したページで表示」を選択します。

「表示設定」を押し「チェック・入力したページで表示」を選択

そして「Cocoon」で表示させるウィジェットなら、

カテゴリーの「Cocoon」に チェックを入れます。

カテゴリー「Cocoon」にチェックを入れた

これでカテゴリー「Cocoon」の記事だけに、このウィジェットがサイドバーに表示されます。

他のカテゴリーの記事では表示されません。

プー太郎
プー太郎

他の2つのウィジェットも同じように設定してね。

スポンサーリンク

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

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

目次のウィジェットもありますが、そちらを使用すると見出しが表示されます。

目次ウィジェットを使用すると見出しが表示される

私は目次に見出しは入れたくなかったので、目次にもテキストウィジェットを使用しました。

テキストウィジェットに半角で[toc]と入力して「保存」を押します。

(上のは[]が全角なので、コピペする場合はお手数ですが半角に変えて下さい。)

テキストウィジェットに
  <div class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-1" checked><label class="toc-title" for="toc-checkbox-1">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">サイドバーの設定方法</a><ol><li><a href="#toc2" tabindex="0">ウィジェットの追加</a></li><li><a href="#toc3" tabindex="0">ウィジェットの削除</a></li><li><a href="#toc4" tabindex="0">ウィジェットの順番の入れ替え</a></li></ol></li><li><a href="#toc5" tabindex="0">サイドバー 各ウィジェットの設定とカスタマイズ</a><ol><li><a href="#toc6" tabindex="0">プロフィール</a></li><li><a href="#toc7" tabindex="0">記事のリンク</a></li><li><a href="#toc8" tabindex="0">アドセンス広告</a></li><li><a href="#toc9" tabindex="0">広告</a></li><li><a href="#toc10" tabindex="0">カテゴリー</a></li><li><a href="#toc11" tabindex="0">カテゴリーの順番を変えるプラグイン</a></li><li><a href="#toc12" tabindex="0">よく読まれている記事(人気記事)</a></li></ol></li><li><a href="#toc13" tabindex="0">サイドバースクロール追従の「目次」</a></li><li><a href="#toc14" tabindex="0">ウィジェット下の余白を調整</a></li><li><a href="#toc15" tabindex="0">最後に</a></li></ol>
    </div>
  </div>と入力して「保存」を押す

これで記事の中と同じ目次がサイドバー追従に表示されます。

記事の中と同じ目次が表示された

ただし、目次の枠がなくなっていたので、スタイルシートに次のCSSを追加しました。

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

これで枠のある目次が表示されます。

枠ありの目次

目次の設定とカスタマイズは、こちらを参考にして下さい。

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

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

以上でサイドバーは完成しましたが、最後にウィジェット下の余白を調整する方法です。

ウィジェット下の余白を広げたい方は、以下の方法で調整して下さい。

(“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;
}

最後に

お疲れさまでした!

ウィジェットに少し手を加えることによりサイドバーに個性が生まれます。

是非これを参考にオリジナルのサイドバーを作ってみて下さい。

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

プー太郎
プー太郎

またねー

コメント