人気記事ウィジェットのデザインを変えてみよう
ブログのダッシュボード→外観→ウィジェットへ進むと、ブログのサイドバーなどのウィジェットの設定ができます。Cocoonのサイドバーの見出しの色はCocoon設定→全体→サイトキーカラーで変更できます。
なお、ロリポップ！レンタルサーバーでウィジェットの設定をいじって保存しようとしてもいつまでも保存ができないことがあります（主に広告バナーを新しく貼ろうとしたときなど）。
その際はマイページのセキュリティ→WAF設定からそのサイトを一時的にオフにしてください。5分ぐらいオフにして待てば保存できるはずです。作業が終わったらWAF設定をオンに戻しておいてくださいね。
「人気記事」ウィジェットは、あなたのブログの記事の中でたくさん読まれている記事を表示してくれて、訪れたユーザー様に他の記事も読むように促してくれるお役立ちウィジェットです。
この「人気記事」ウィジェットは名前を変更できます。私は「よく読まれている記事」という名前にして10記事を表示する設定にしています。
「デフォルト」は区切り線がありませんが「区切り線」「囲み枠」「大きなサムネイル」「タイトルを重ねた大きなサムネイル」が選択できます。私は「囲み枠」にしました。
せっかくだから他の記事も読んでもらいたいもんね。
そうなのよ。人気記事ウィジェットを活用しましょう！
サイドバーを自分らしく装飾してみる？
さて、人気記事ウィジェットを整えただけではどうも物足りないというか、自分らしさが足りないというか。広告バナーを貼ってもいいんですけど、もう少しオリジナリティを加えてもいいですよね。
↑↑↑横幅300ピクセルでイラストを描いてみました。背景色は白で、お花はイラストACさんのフリー素材を利用しています。
イラスト作成にはCLIP STUDIO PAINT EX
を使っています。できあがったイラストをメディアにアップロードします。
人気記事ウィジェットの真下に「テキスト」ウィジェットを設置して「メディアを追加」で先ほどアップロードしたイラストを選択して「真ん中寄せ」にします。
するとどうでしょう、人気記事の下にイラストがつながって表示されてちょっと可愛いじゃありませんか！自分らしいイラストでサイドバーを装飾してみてくださいね。
また「カテゴリ」の項目と項目のあいだに仕切り線を入れることができます。下のソースコードをコピーしてダッシュボード→外観→テーマエディターへと進んでください。
Cocoon Childのスタイルシート (style.css)が表示されていると思いますので、スクロールして一番下に貼り付けて「ファイルを更新」で保存してください。これでカテゴリに仕切り線が表示されているはずです。
/*---------------------------------
カテゴリーに仕切り線を入れる
--------------------------------*/
.widget_categories ul li a{
border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}
.widget_categories > ul > li > a:first-child{
border-top: none;
}
またスマホからブログを見た場合、サイドバーの存在になかなか気が付かない方もいらっしゃるかもしれません。
Cocoon設定→Cocoon設定→モバイルと進んで「フッターモバイルボタン」「モバイルボタン時コンテンツ下のサイドバーを表示」の両方にチェックを入れておくといいですよ。
サイドバーが広告だけになってしまわないように、自分らしく綺麗にデザインしてみるといいですね。まずは色の設定からやってみましょう♪
サイドバーをきれいにしようニャー！
記事も大事だけど、サイドバーも大事ね♪
