【Simplicity】カテゴリーのカスタマイズサンプル【まとめ】

2016/4/2      その他

カスタマイズサンプル

Simplicityのデフォルト（元々）用意されているカテゴリーの外観はシンプルです。

「この項目はリンクだよ」と言わんばかりのクリックを誘いやすい外観。

カテゴリーの内訳を見やすい配置、まさにシンプルベース型のカテゴリーデザインです。

今回は、SimplicityのカテゴリーをCSS（スタイルシート）だけを使用し、私自身がカスタマイズしたソースサンプルを公開したいと思います。

そこで、レポ部は・・・
【Simplicity】カテゴリーのカスタマイズサンプル【まとめ】
をレポートしたいと思います。

元々のカテゴリーデザイン

以下のデザインがWordPress（Simplicity）のカテゴリーのスタイルとなります。

従来のカテゴリー

シンプルですが、訪問者から分かりやすいデザインです。

今回は、管理人が作成した「カスタマイズサンプル」を幾つか用意しました。

宜しければ、各ソースコードを「コピー＆ペースト」し、ご自身のWebサイトにお役立てください。

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

スタンダード

スタンダードでは、カテゴリーの項目をマウスオーバー時にはゆっくりと背景色がフェードし、マウスアウト時には元々のスタイルに戻るといった動作をスタイルシートのみを用いて実装しています。

カテゴリータイトルのカスタマイズは行なっていません。

元々のカテゴリーデザインにアクション性を加えたカテゴリーモデルと解釈していただいて結構です。

変化・追加させたソースコード（要素）は以下の3つです。

.widget_categories li{
カテゴリーリスト1つ1つの設定
}
.widget_categories li a{
カテゴリーリンクの設定
}
.widget_categories li a:hover {
カテゴリーリストをマウスオーバーしたときの設定
}
スタンダード
未来のカテゴリー

ソースコード（スタンダード）

.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;
}

オーガニック

スタンダードと同じアクション性を持ったカテゴリーモデルです。

カテゴリータイトルを装飾し、Webフォントをカテゴリーの外観に組み込んでみました。

オーガニックでは、ネイバーセレクタ（隣接セレクタ）を使用し、カテゴリーリストの下線が点線とダブらないように設定しています。

Before/Afterメソッドを用い、タイトル、リスト名の前/後にWebフォント、または、縦線を実装することで、カテゴリーとリスト名を訪問者にハッキリと伝わるようにしたつもりです（笑）

変化・追加させたソースコード（要素）は以下の8つです。

.widget_categories ul{
カテゴリーリスト（全体）の設定
}
.widget_categories li{
カテゴリーリスト1つ1つの設定
}
.widget_categories li+li{
カテゴリーリストの点線をダブらないように設定
}
.widget_categories li a:before{
カテゴリーリスト（文字）の前に表示するアイコンの設定
}
.widget_categories li a{
カテゴリーリスト（文字）の設定
}
.widget_categories li a:hover {
カテゴリーリスト1つ1つをマウスオーバーしたときの設定
}
.widget_categories .widget_title:before{
カテゴリータイトルの前の設定
}
.widget_categories .widget_title{
カテゴリータイトルの設定
}
オーガニック
スタンダード（改）

▶ カスタマイズサンプル（オーガニック）が使用されているWebサイト【ゼロ画】

ソースコード（オーガニック）

.widget_categories ul{
margin-left: 0em;
margin-top:0px;
border-top:0px solid #DCDCDC;
border-left:1px solid #DCDCDC;
border-right:1px solid #DCDCDC;
border-bottom:1px solid #DCDCDC;
padding-left:0em !important;
list-style:none;
}
.widget_categories li{
width:100%;
margin-bottom:0px !important;
font-size:14px;
}
.widget_categories li+li{
 border-top:1px dashed #DCDCDC;
}
.widget_categories li a:before{
font-family: FontAwesome;
content:"\f152";
margin-right:10px;
margin-left:15px;
color:#313131;
}
.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: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 !important;
}

ミリオンバス

オーガニックの1つ1つのリストをマウスオーバーしたときの動作では背景色を変化させただけでした。

ミリオンバスでは、マウスオーバーしたときの特殊効果をそのままに、背景色の変更と、訪問者の視野をマウスオーバーしたカテゴリーに注目させるために違う種類のWebフォント（矢印）へと切り替えると共にカテゴリーの強調性を伝わるようにフォント（文字）を太くしています。

カテゴリーのタイトル（右端）にはWebフォントを取り付け、自分の気に入ったウェブフォントをカテゴリーのタイトルに入れることで、他カテゴリーとの独立化/区別化を目的としています。

変化・追加させたソースコード（要素）は以下の10つです。

.widget_categories ul{
カテゴリーリスト（全体）の設定
}
.widget_categories li{
カテゴリーリスト1つ1つの設定
}
.widget_categories li+li{
カテゴリーリストの点線をダブらないように設定
}
.widget_categories li a:before{
カテゴリーリスト（文字）の前に表示するアイコンの設定
}
.widget_categories li a{
カテゴリーリスト（文字）の設定
}
.widget_categories li a:hover:before{
マウスオーバーしたときのWebフォント（アイコン）の設定
}
.widget_categories li a:hover {
カテゴリーリスト1つ1つをマウスオーバーしたときの設定
}
.widget_categories .widget_title:before{
カテゴリータイトルの前の設定
}
.widget_categories .widget_title:after{
カテゴリータイトルの右のWebフォント（アイコン）の設定
}
.widget_categories .widget_title{
カテゴリータイトルの設定
}
ミリオンバス
ミリオンバス

ソースコード（ミリオンバス）

.widget_categories ul{
margin-left: 0em;
margin-top:0px;
border-top:0px solid #DCDCDC;
border-left:1px solid #DCDCDC;
border-right:1px solid #DCDCDC;
border-bottom:1px solid #DCDCDC;
padding-left:0em !important;
list-style:none;
}
.widget_categories li{
width:100%;
margin-bottom:0px !important;
font-size:14px;
}
.widget_categories li+li{
 border-top:1px dashed #DCDCDC;
}
.widget_categories li a:before{
font-family: FontAwesome;
content:"\f152";
margin-right:10px;
margin-left:15px;
color:#313131;
}
.widget_categories li a:hover:before{
font-family: FontAwesome;
content:"\f105";
margin-right:10px;
margin-left:15px;
color:#ffffff;
}
.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:#CD853F;
color:#ffffff;
margin-bottom:0px;
font-weight: bold;
} 
.widget_categories .widget_title:before{
content:" ";
border-left:5px solid #DCDCDC;
border-top:0px;
border-bottom:0px;
margin-right:5px;
}
.widget_categories .widget_title:after{
position: absolute;
right: 10px;
font-size:20px;
font-family: FontAwesome;
content:"\f03e";
}
.widget_categories .widget_title{
position: relative;
padding:10px;
color:white;
background:#3CB371;
font-size:16px !important;
margin-bottom:0px !important;
}

まとめ

いかがでしょうか。

今回は、Simplicityで使える「3つのカテゴリーデザイン」をレポートしました。

私が運営している他サイト（ゼロ画）でカスタマイズサンプル（動作）のチェック済みです。

ただ、お使いのバージョンによっては動かない可能性もあります。

参考程度にソースコードを「コピー＆ペースト」をして使用してください。

一歩先にいくWordPressのカスタマイズがわかる本

posted with カエレバ
Amazon
楽天市場
スポンサーリンク

      レポート部長