こんにちは、ikuzo(いくぞう)です。
私はほんの成り行きで、CocoonやWordPressの設定方法、およびカスタマイズの記事をメインで書いてます。
なぜなら私のブログにはカテゴリーがいくつかあるものの、
一番読んでもらえてるのが、CocoonやWordPressの記事で、
Googleも割と上位の方に表示してくれているからです。
そのため、川の流れに身を任せるかのように、いつしかこのようなブログになりました。
なので、ほとんど素人が書いていると思って下さい。
そのおかげで「初心者目線」では書けていると思います（たぶん、それだけがいいところ）。
さて、今回はサイドバーの設定とカスタマイズの方法を書こうと思います。
サイドバーって使い方によってはブログの強力な武器になると思うんですよね。
人気のある記事や広告をサイドバーにのせることにより、
工夫次第によってはアクセスや収益の増加に繋がる可能性があります。
と言いつつ、当ブログのサイドバーはこれといって大きな特徴はないものの、
今回は私がどんなふうにサイドバーを作っているかを丸裸にして、みなさんにお見せします。
そのうち1つでも2つでも、この記事を読んでいるあなたのサイドバー作りのお役に立てれば…
という主旨で今回は書いていきます。
サイドバーの設定方法
一口にサイドバーと言っても、サイドバーは2種類あります。
ひとつは記事のスクロールに連動するサイドバー。
もうひとつは記事をスクロールしても、画面に張り付いて動かなくなる
スクロール追従型のサイドバーです。
記事（コンテンツ）よりもサイドバーが短いと「スクロール追従」エリアが記事に追従します。
どちらのサイドバーも「ウィジェット」で作ります。
ウィジェットのデフォルト（初期の状態）はこんな感じです。
ここに必要なウィジェットを追加したり、いらないものは削除したり、
あとはウィジェットの順番の入れ替えてサイドバーを作ります。
ウィジェットの追加
サイドバーにウィジェットを追加するには、使いたいウィジェットを左からドラッグするか
ウィジェットを追加する場所を選んで「ウィジェットを追加」を押しましょう。
ウィジェットを一通り見てみて、
自分が入れたいものをどんどん追加するといいよ。
ウィジェットの削除
不要なウィジェットは、▼マークを押して「削除」を押します。
ウィジェットの順番の入れ替え
ドラッグでウィジェットの順番の入れ替えができます。
サイドバー 各ウィジェットの設定とカスタマイズ
2021年1月現在、ikuzoblogのサイドバーのウィジェットはこんなふうに並べています。
“注”の部分は、表示中の記事と同じカテゴリーの「よく読まれている記事」がサイドバーに表示されるように設定してあります。
詳細は後述します。
プロフィール
プロフィールの作り方は別記事で紹介してますので、これから作る人は参考にして下さい。
Twitterフォローボタンの設置方法も書いてあります。
記事のリンク
プロフィールの下には多くの人に読んでいただきたい記事を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>
作り方は、テキストウィジェットを使用して、まず画像を挿入します。
各デバイスでサムネイルが真ん中に来るように、画像をセンタリング（中央揃え）しておきます。
そして画像に記事へのリンクを貼ります。
あとはテキストエディタで、先ほどのコードを参考に入力して下さい。
画像のコード（リンク含む）に付け足したのが赤線の部分です。
<p style=”margin-botoom: 0.5em;”>で画像の下に0.5文字分の余白を設け、
font-weight: boldは説明文の文字を太字に、font-size: 14pxは文字を14ピクセル、
magin: 0 0 2emは文字の下に2文字分の余白というふうに設定しました。
“margin-bottom: 2em” と “margin: 0 0 2em” はどちらも2文字分の余白を下に作るコードで、意味は同じです。
設定が完了したらウィジェットの「保存」→「完了」を押します。
アドセンス広告
アドセンス広告は、PC用の広告ウィジェットを使用しています。
PC用ウィジェットは横834px以上のデバイスで表示されます。
広告ウィジェットは3種類あります。
アドセンス広告の貼り方は別記事にしてありますので、こちらも参考にして下さい。
アドンセンスの広告ユニットコードが設定済みでしたら、
広告ウィジェットをサイドバーに追加して「広告フォーマット」を選ぶだけで設定は完了です。
ウィジェットを使って「ラージスカイクレイパー」のような大きい広告を貼ると
「CLSに関する問題」というエラーがいずれ出る可能性があります（当ブログで出ました涙）。
対処法を書きましたので、もしエラーが出たときはこちらの記事をご覧下さい。
広告
お次はASPの広告です。
テキストウィジェットか、広告ウィジェットにASPの広告コードを貼り付けるだけです。
ASP広告のセンタリングのやり方は、こちらの記事に書いてあります。
上の記事はA8の広告の貼り方ですが、どこのASPでもやり方は同じです。
A8.netは審査がないので、会員登録をしていない人はこの機会に登録しておきましょう。
カテゴリー
カテゴリーの部分は、見出しを含めてこのように変更しました。
見出しの変え方は、こちらの記事で紹介しているやり方です。
サイドバーの見出しは、サルワカさんのこちらの見出しを参考にしました。
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」というプラグインを使うと、順番の変更が可能です。
プラグインをインストールして「有効化」を押したら「Taxonomy Order」をクリックします。
ドラッグでカテゴリーの順番を入れ替えて「更新」を押すだけです。
よく読まれている記事（人気記事）
ここはカテゴリー（Cocoon、ブログ、その他の3パターン）によって表示される人気記事が変わるようにしてあります。
「人気記事」のウィジェットを使うという手もありますが、
その方法だと記事の順番が制御できないため、あえてテキストウィジェットを使用してます。
あとは公式サイトで紹介されている
「ナビカード」を使うという方法もあるよ。
カテゴリーごとに人気記事を変えるには、それぞれのウィジェットを作ります。
記事の画像や説明文は、さきほどの記事のリンクと同じやり方で入力して下さい。
記事のアイキャッチ画像をそのまま使用してもいいですし、サムネイル用に別の画像を用意してもいいと思います。
私はサムネイルが小さくなっても文字が見やすいように、専用の画像を用意しました。
記事のアイキャッチ画像
サイドバーのサムネイル画像
カテゴリーごとの人気記事を表示させる方法は以下の通りです。
「表示設定」を押し「チェック・入力したページで表示」を選択します。
そして「Cocoon」で表示させるウィジェットなら、
カテゴリーの「Cocoon」に チェックを入れます。
これでカテゴリー「Cocoon」の記事だけに、このウィジェットがサイドバーに表示されます。
他のカテゴリーの記事では表示されません。
他の2つのウィジェットも同じように設定してね。
サイドバースクロール追従の「目次」
サイドバー追従に入れているのは「目次」だけです。
目次のウィジェットもありますが、そちらを使用すると見出しが表示されます。
私は目次に見出しは入れたくなかったので、目次にもテキストウィジェットを使用しました。
テキストウィジェットに半角で［toc］と入力して「保存」を押します。
（上のは［］が全角なので、コピペする場合はお手数ですが半角に変えて下さい。）
これで記事の中と同じ目次がサイドバー追従に表示されます。
ただし、目次の枠がなくなっていたので、スタイルシートに次のCSSを追加しました。
/* サイドバー目次 */
#sidebar .toc{
margin-top: 4em;/*枠の上の余白*/
margin-bottom: 2em;/*枠の下の余白*/
padding: 1em 1.5em;/*枠の中の余白*/
border: 1px solid #0693cd;/*枠線の太さ・種類・色*/
border-radius: 2px;/*枠線の角の丸み*/
}
これで枠のある目次が表示されます。
目次の設定とカスタマイズは、こちらを参考にして下さい。
ウィジェット下の余白を調整
以上でサイドバーは完成しましたが、最後にウィジェット下の余白を調整する方法です。
ウィジェット下の余白を広げたい方は、以下の方法で調整して下さい。
（“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;
}
最後に
お疲れさまでした！
ウィジェットに少し手を加えることによりサイドバーに個性が生まれます。
是非これを参考にオリジナルのサイドバーを作ってみて下さい。
今回も最後まで読んでいただき、ありがとうございました(^_^)
またねー
コメント