【Cocoon】サイドバーのカッコいいアレンジ集 ３選！

Cocoonのサイドバー、ちょっとシンプルすぎるなぁ…と思ったことはありませんか？
サイドバーはPCで閲覧される場合がほとんどですが、サイト・ブログでは非常に重要な要素です。

本文より目立たず、しかし注目はされる…というサイドバーを作るのは難しいものです。

ここでは、Cocoonのサイドバーをちょっとだけカッコよくアレンジするテクニックをご紹介します！

前提条件

この記事は、Cocoon用のカスタマイズ方法です。
他のワードプレステーマでは不可能（または動作未確認）です。
また、Cocoonでもバージョンにより動作や設定が異なる場合があります。

【WordPress】6.7.2
【テーマ：Cocoon】2.8.4.1

なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「株は人生の縮図ですか？」はCocoonで作っています。完成例としてご覧ください。

株は人生の縮図ですか？

株は人生の縮図ですか？ 大儲けも大損もない 平凡サラリーマンのリアル株取引

サイドバーのアレンジ集

カテゴリーの先頭にアイコンを付ける

デフォルト機能でサイドバーにカテゴリーを表示すると、非常にシンプルです。
カテゴリーの先頭にアイコンを表示するだけでも、ちょっと目を引くデザインにできますよ！

変更前

変更後

やり方は簡単で、以下のコードをCocoon Childのスタイルシート（style.css）に追記するだけ！

.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f192"; /*アイコン*/
  color:red; /*アイコンの色*/
  padding-right:5px;
  font-weight: 900;
  font-size:18px;
}

アイコンは Search for Font Awesome で調べて、お好みのものを選んでください。
上記cssの”\f192″を変更することで、好みのアイコンに替えることができます！

また、アイコンの色も変更することができます。
ここでは”red（つまり赤）”としていますが、カラーコード（#0a1b2c のような形式）でも指定可能です。

アイコンが表示されない時は…

CocoonにはFont Awesome 5が標準搭載されていますが、有効化されていない可能性があります。

1. ダッシュボードの「Cocoon設定」にアクセス
2. 「全体」タブを開く
3. サイトアイコンフォントで「Font Awesome 5」にチェックを入れる

カテゴリーの見出しをカッコよくする

そもそも見出しの「カテゴリー」や「タグ」といった文字ではなく、カテゴリーやタグの内容を見てクリックして欲しいはず。実は「カテゴリー」や「タグ」といった見出し文字が目立つ必要はないんですよね。

そこで、見出しは小さめにしつつカッコよくして、カテゴリーやタグの内容を目立たせましょう！

変更前

変更後

やり方は簡単で、以下のSTEP3のコードをCocoon Childのスタイルシート（style.css）に追記するだけ！

.sidebar h3 {
    background: none;
	color:#333333;
    padding: 0;
    font-size: 16px;
    letter-spacing: 2px; 
}

.sidebar h3:after {
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

.sidebar h3 {
    background: none;
	color:#333333;
    padding: 0;
    font-size: 16px;
    letter-spacing: 2px; 
}
.sidebar h3:after {
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

カテゴリーの見出しをよりシンプルにする

先述の通り「カテゴリー」や「タグ」といった見出し文字は目立つ必要がありません。
見出しは小さめ且つシンプルなアンダーラインにして、カテゴリーやタグの内容を目立たせましょう！

変更前

変更後

やり方は簡単で、以下のSTEP3のコードをCocoon Childのスタイルシート（style.css）に追記するだけ！

.sidebar h3 {
    background: none;
	color:#333333;
    padding: 0;
    font-size: 16px;
    letter-spacing: 2px; 
}

.sidebar h3:after {
    content:"";
    display:block;
    height:1px;
    width:100%;
	background: green; /*アンダーラインの色*/
    text-decoration: underline;
}

.sidebar h3 {
    background: none;
	color:#333333;
    padding: 0;
    font-size: 16px;
    letter-spacing: 2px; 
}
.sidebar h3:after {
    content:"";
    display:block;
    height:1px;
    width:100%;
	background: green;
    text-decoration: underline;
}

まとめ

そもそもサイドバーの「カテゴリー」や「タグ」といった見出し文字は目立つ必要はないんです。
あくまでカテゴリーやタグの内容を見てクリックしてほしいはず！

しかしシンプルすぎるサイドバーは目に留まらない可能性も大いにあります。
そこで、シンプルすぎず適度に目立つサイドバーを作らねばなりません。

そこまで難しいカスタマイズではないので、ご自身で少し調べるだけで更なるカスタマイズも十分可能かと思います。
より分かりやすいサイドバーを作りましょう！