サイドバーメニューの装飾を整える

Simplicity2テーマを使用中。名前通りの超シンプルな見た目のテーマなので、徐々にカスタマイズを加えていく。

今日はサイドバーメニューの装飾を整えた。デザインがお気に召したなら、どうぞコピペでお使いください。

もともとはこのような、超シンプルな骨組みだけと言ってもよいデザイン。（「最近のコメント」などの見出しの前についているアイコンは、FontAwsomeを使ったもの。詳しくは「Font Awesome でメニューにアイコン表示を入れる」を参照）

今回は、元の見出しとメニューの文字サイズが大きいので、フォントを少し小さいサイズに変更と、見出しに背景色を追加、メニューのリンク色の変更、行間に点線で区切りを入れた。

/* サイドバーメニューの装飾 */
/* 「最近の投稿」など見出し部分 */
#sidebar h2{　　　　　　　　　　　　　
	font-size: 0.95em; 
	color: #ffffff; 
	background-color: #29abe2; 
	border-radius: 3px; 
	padding: 4px 10px; 
	margin: 2px 0px 6px 0px; 
}
/* 記事のタイトルやカテゴリー名を表示する部分 */
#sidebar li {
	font-size: 0.85em; 
	border-bottom: dotted 1px #aaaaaa; 
	margin: 0;
}
#sidebar li a {
	text-decoration: none;
	color: #000000; 
	display: block; 
	padding: 5px 10px;
}
#sidebar li a:hover {
	text-decoration: none;
	color: #ffffff; 
	background-color: #29abe2; 
}
/* サイドバーメニューの装飾ここまで */

上記のコードを　ダッシュボード 外観 カスタマイズ 追加CSS　で開いた追加CSS入力欄にコピペをして上の公開をクリックすれば、サイドバーメニューが下記のようなデザインに変わる。

※ 追加CSSを記述する場所について詳しくは「追加CSSってどこに入力すればいいの？」参照。

見出しの前のアイコンは Font Awesome で入れたものなので、CSSで要素の設定を入れるだけで、自動的にフォントサイズや文字色も変わる。これは便利。

さて、コードについて、一行一行詳しく解説も入れておく。