【Simplicity】カテゴリーをカスタマイズする方法【まとめ】

Simplicityは、WordPressの無料テーマの1つです。

Simplicity専用の着せ替えスキンまで他サイトで製作されるようになってきました。

今回は、そんな、皆さんから愛されている日本のテーマ「Simplicity」のお話です。

Simplicityでのカテゴリーはリストで表記されているため、要素1つ1つに「フェードイン」や「フェードアウト」などの動作を取り入れると少々複雑なソースコードとなります。

今回は、CSS（スタイルシート）だけを用いた初心者向けのカスタマイズ方法で、Simplicityのカテゴリーをカスタマイズしていくことにします。

そこで、レポ部は・・・

【Simplicity】カテゴリーのスタイルをカスタマイズする方法【まとめ】

をレポートしたいと思います。

1 カテゴリー（外観）の最終的な目標
2 カテゴリーの変数をチェックすると…
3 1つ1つの項目全体をリンクにするには…
4 マウスオーバー時に特殊効果を付ける
5 全体のソースコード（完成）
- 5.1 カテゴリータイトル：サンプル
6 まとめ

カテゴリー（外観）の最終的な目標

デフォルト（元々）のカテゴリーの表示では少し寂しい気がします。

今回は、このシンプルベース型のカテゴリーを変化させて…

CSS（スタイルシート）だけを用いて、上の画像のようなグラフィックに仕上げることにします。

そして、カテゴリーのそれぞれの項目に対し、「フェードイン」や「フェードアウト」といった動作をCSS（スタイルシート）だけで実装し、訪問者からのカテゴリーの操作を動的にしたいと思います。

Wanted!!

今回のカスタマイズ（カテゴリー）は、「投稿数」「階層」を表示しない場合のカスタマイズ方法です。「投稿数」「階層」を表示をしてしまうとスタイルが崩れてしまうのでおすすめできません。1層のカテゴリーのみを表示する方は参考にしてください。

カテゴリーの変数をチェックすると…

Simplicityのカテゴリーは、大まかに分けると以下の4つの要素で構成されているようです。

.widget_categories .widget_title{
}

.widget_categories ul{
}

.widget_categories li{
}

.widget_categories li a{
}

要素の役割

カテゴリータイトル（widget_title）
リスト全体（ul）
リスト内の1つ1つの要素（li）
リスト内の1つ1つの要素のリンク文字（a）

上記の各要素にソースコードを追加し、カスタマイズに向けた外観に整えることにします。

.widget_categories .widget_title{
/*今回のカスタマイズでは必要なし*/
}

.widget_categories ul{
/*今回のカスタマイズでは必要なし*/
}

.widget_categories li{
margin-bottom:0px !important;
border-top:0px dashed #DCDCDC;
border-left:0px dashed #DCDCDC;
border-right:0px dashed #DCDCDC;
border-bottom:1px dashed #DCDCDC; /*下の点線を引く*/
font-size:14px; /*リンクのフォントサイズ*/
}

.widget_categories li a{
line-height:40px; /*1つ1つの要素の縦のサイズ*/
text-decoration: none; /*アンダーラインを削除*/
color:#313131; /*文字色の変更*/
}

次は、カテゴリー項目の横幅いっぱいをリンクにし、訪問者からの使いやすさを重視したインターフェイスに仕上げる作業を行います。

1つ1つの項目全体をリンクにするには…

1つ1つのリスト項目、すなわち、カテゴリーの項目の要素全体を「リンク」にする作業を行います。

追加したソースコードは1つです。

display:block;

このソースコードを追加し、<a>の要素をブロック要素にすることで、<li>全体に<a>の要素（リンク）が覆うようになります。 1つ1つのカテゴリーをクリックする範囲が縦と横に広くなるということですね。 <li>の<a>の要素に追加すると…

.widget_categories li a{
line-height:40px; /*1つ1つの要素の縦のサイズ*/
text-decoration: none; /*アンダーラインを削除*/
color:#313131; /*文字色の変更*/
display:block; /*1つ1つの要素全体をリンクにする*/
}

さて、次は、マウスオーバー時に「フェードイン」や「フェード」を行うような、他サイトでよく見られる動的なデザインに変更していくことにします。

マウスオーバー時に特殊効果を付ける

今回は、カテゴリー項目にカーソルが合わさったとき、ゆっくりと背景を表示し、マウスアウトすると、背景を元に戻すといった他サイトでよく見かける特殊効果をSimplicityのカテゴリーにスタイルシートを用いて実装していくことにします。

.widget_categories li a{
line-height:40px; /*1つ1つの要素の縦のサイズ*/
text-decoration: none; /*アンダーラインを削除*/
color:#313131; /*文字色の変更*/
display:block; /*1つ1つの要素全体をリンクにする*/
-webkit-transition: all 0.6s ease; 
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease; 
}

Transitionメソッドは要素に時間的変化を適用するCSS（スタイルシート）のプロパティです。

数値を増やすことで、フェードに掛かる時間を遅めたり、早くすることが可能となります。

transition: all 0.6s ease;は複数のプロパティを1つにしたもので正式には、

transition-property: background;
transition-duration: 0.6s;
transition-timing-function: ease;

上記の3つのプロパティを合わせもったソースコードです。

さて、続いて、新しい要素（hover）を追加し、マウスオーバー時の背景と位置を調整することにします。

新しく追加する要素は、

.widget_categories li a:hover {
}

これは、<a>をホバーしたとき、すなわち、<li>の各要素をホバーしたときに起きる内容です。

この要素にホバー時のソースコードを追加して…

.widget_categories li a:hover {
background:#DCDCDC;
margin-bottom:0px;
}

背景色には、#DCDCDC（灰色）を指定し、リンク文字の位置を少しだけ調整することにしました。

全体のソースコード（完成）

今回行った、カスタマイズ（カテゴリー）の完成版は以下のソースコードとなります。

.widget_categories li{
margin-bottom:0px !important;
border-top:0px dashed #DCDCDC;
border-left:0px dashed #DCDCDC;
border-right:0px dashed #DCDCDC;
border-bottom:1px dashed #DCDCDC;
font-size:14px;
}
.widget_categories li a{
text-decoration: none;
color:#313131;
display:block;
line-height:40px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all  0.6s ease;
}
.widget_categories li a:hover {
background:#DCDCDC;
margin-bottom:0px;
}

カテゴリーリストのみのカスタマイズを行いましたが、カテゴリータイトルをカスタマイズしたい方は、以下の要素を上記のソースコード内に入れ、独自にカスタマイズしてください。

.widget_categories .widget_title{
/*カテゴリータイトルのカスタマイズ内容*/
}

カテゴリータイトル：サンプル

カテゴリータイトルのカスタマイズサンプルを作成してみました。

宜しければ「コピー＆ペースト」をしてお使いください。

.widget_categories .widget_title:before{
content:" "; /*空の空間を挿入*/
border-left:5px solid #DCDCDC; /*左の縦バーのサイズ・線の種類・色の指定*/
border-top:0px; /*要素の上の間隔*/
border-bottom:0px; /*要素の下の間隔*/
margin-right:5px; /*縦線と文字との間隔*/
}
.widget_categories .widget_title{
padding:10px; /*間隔を調整*/
color:white; /*文字色の変更*/
background:#1E90FF; /*背景色の変更*/
font-size:16px !important; /*フォントサイズの変更*/
margin-bottom:0px;
-webkit-border-top-right-radius: 20px; /*右上に丸みを付ける*/
-webkit-border-bottom-right-radius: 20px; /*下右に丸みを付ける*/
-moz-border-radius-topright: 20px; /*各ブラウザに対応*/
-moz-border-radius-bottomright: 20px; /*各ブラウザに対応*/
}

上記のソースコードを入力すると以下の画像のようにカテゴリータイトルが出力されるはずです。

即席で作成したソースコードなので上手く表示されるかは不明です。