【自分的】Cocoonでやりたい最低限カスタマイズ【サイドバー編】

Cocoon

様々な機能が搭載されており、設定をするのも簡単な無料テーマCocoonですが、やはり細かい部分については自分でカスタマイズしなければいけません。
今回は自分がちょっと気になった箇所についてカスタマイズしていきたいと思います。

スポンサーリンク

子テーマを使用しましょう!

Style.cssを編集しますので、必ず子テーマを使用しましょう。
子テーマを使用していない場合は、子テーマの準備をしてください!

サイドバーのカテゴリ

このように、カテゴリをサイドバーに表示させている方が多いかと思います。

おそらくカテゴリを「親」と「子」に分けていなければ、ちょうどいい感じがしますが、親と子で分けている当サイトの場合は、たくさんのカテゴリが表示されており、1行が大きく表示されているため、若干見にくいと感じました。
これをコンパクトにしていきたいと思います。

単純にカテゴリをコンパクトにする場合は、以下のコードをstyle.cssに入力します。
因みにこちらのコードを入力すると、カテゴリー以外にアーカイブ等もコンパクトになります。
もしカテゴリの部分だけをコンパクトにしたい場合は、classの指定を【.widget_categories ul li a】のみにし、他のclassは削除してください。

.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a{
	padding:0 10px 0;
	margin:10px;
	line-height:1.3;
}

だいぶコンパクトになり画面に表示されるカテゴリが増えましたね!

ただ親と子のカテゴリの区別がつきにくい気がします。
その場合は次でわかりやすくします。

カテゴリをちょっと装飾する

コンパクトにするだけでなく親と子カテゴリをわかりやすくしたい場合は以下のコードをstyle.cssに追加します。

.widget_categories ul li a{/*親カテゴリ*/
	background-color:#20664f; /*背景色*/
	border-radius:5px;
	color:#fff;/*文字色*/
 	margin:4px;
	padding-top:5px;
	padding-bottom:5px;	
	line-height:1;
}
.widget_categories ul li ul a{/*子カテゴリ*/
	padding:0 20px 0;
	background-color:transparent;
	color:#333435;/*文字色*/
}

このようになります!

カテゴリの親カテゴリに色を付けました。
ちなみにマウスカーソルを親カテゴリに乗せると色が消えます。

サイドバーの見出しを編集する!

Cocoonの場合、サイドバーの見出しはこのようになっています。

背景色に色がついているだけですね。
これでもいいとは思いますが、一工夫加えてみましょう!

以下のコードをStyle.cssに入力します。

.sidebar h3{/*サイドバー見出し*/
	display:inline-block;
	color:#20664f;/*文字色*/
	background:#fff;/*背景色*/
	border-bottom:2px solid #38b48b;/*下線*/
	padding:0;
	line-height:1;
}
.sidebar h3:first-letter{/*サイドバー見出し最初の文字*/
	color:#38b48b;/*文字色*/
	font-size:1.6em;/*文字の大きさ*/
}

こんな感じに表示されます。

最初の文字を大きくし、色を変えています。

なお上記のコードは当サイトの色に合わせて設定していますが、設定するサイトのイメージによって相性があると思いますので、色コードを変更して色々と試してみてください。

まとめ

細かい設定を考えるとまだまだ変更したいところはありますが、今日のところはここまでです!
皆様も色々と試してみてください~

コメント