前回の記事『賢威7でサイドバーの「最近の投稿」をスタイル調整した事例』に引き続き、賢威7でサイドバー(サブコンテンツ)にある「カテゴリー」のスタイルを調整した事例をご紹介します。

どのような点をスタイル調整したのか?

こちらも前回の記事同様、賢威7のデフォルトのスタイルは全体的に要素が大きめ、余白も大きめとなっているため、サイト全体のデザインに合わせて「スリム化」したのと、賢威7のアイコンは画像ファイルなので、Webアイコンフォントに変更しました。

  • 文字を小さくし、記事数はカテゴリー名よりも更に小さく変更
  • カテゴリーのリンク色と記事数の色を変更
  • アイコン画像をWebアイコンフォントに変更
  • カテゴリーの2階層目のアイコンを1階層目と違うものに変更

CSSの修正

当サイトの場合は賢威の子テーマで運用しているので、子テーマディレクトリの「base.css」を修正しています。

「base.css」の修正

/*--------------------------------------
  カテゴリー
--------------------------------------*/
.widget_categories ul li{
	font-size:0.7em;
	color:#666;
	background-image: none !important;
}
.widget_categories ul li:before{
	content: "\f0da";
	font-family: FontAwesome;
	padding-right: 4px;
}
.widget_categories ul li ul li{
	margin-left:-11px;
}
.widget_categories ul li ul li:before{
	content: "\f105";
	font-family: FontAwesome;
	padding-right: 4px;
}
.widget_categories ul li ul *{
	font-size:1em;
}
.widget_categories ul li a{
	text-decoration:none;
	font-size:1.28em;
	color:#0033CC;
}

Webアイコンフォント「Font Awesome」を利用しています。

Font Awesomeについては以下の記事をご参考下さい。

関連記事賢威7でWebアイコンフォント「Font Awesome」を実装する方法

「アーカイブ」も同じスタイルにしたい場合

カテゴリーのスタイルを「アーカイブ」にも適用したい場合は以下のように記述します。

/*--------------------------------------
  カテゴリー
--------------------------------------*/
.widget_categories ul li,
.widget_archive ul li{
	font-size:0.7em;
	color:#666;
	background-image: none !important;
}
.widget_categories ul li:before,
.widget_archive ul li:before{
	content: "\f0da";
	font-family: FontAwesome;
	padding-right: 4px;
}
.widget_categories ul li ul li,
.widget_archive ul li ul li{
	margin-left:-11px;
}
.widget_categories ul li ul li:before,
.widget_archive ul li ul li:before{
	content: "\f105";
	font-family: FontAwesome;
	padding-right: 4px;
}
.widget_categories ul li ul *,
.widget_archive ul li ul *{
	font-size:1em;
}
.widget_categories ul li a,
.widget_archive ul li a{
	text-decoration:none;
	font-size:1.28em;
	color:#0033CC;
}

当サイトでは、この記事を執筆している段階では「カテゴリー」と「アーカイブ」のスタイルを同じになるように設定しています。