STORK(ストーク)のカテゴリーリストをおしゃれにカスタマイズ！

こんにちは！これでカテゴリーリストのカスタマイズはバッチリなネイネイ(@NEYNEYx2)です。

今回は、WordPressテーマのSTORK(ストーク)のカテゴリーリストをおしゃれにカスタマイズしてみましたので、まとめをご紹介いたします。

STORK(ストーク)でオリジナルのカテゴリーリストをお探しでしたら、ご覧になってください。

完成のイメージは、コチラ（↓）のようになります。カスタマイズは全部で3種類用意してあります。

おすすめASP

A8.net：定番の最大手
もしもアフィリエイト：独自の報酬制度が魅力的
バリューコマース：定番・独自案件が豊富
afb（アフィビー）：美容系の案件に強い
アクセストレード：通信系・転職系に強い

目次（タップできます）

STORK(ストーク)のカテゴリーリストについて

STORK(ストーク)でカテゴリーリストを作成するには、下記の2種類があります。

「カテゴリー」ウィジェットを使用する方法
「ナビゲーションメニュー」ウィジェットを使用する方法

本記事のカテゴリーリストのカスタマイズは、「カテゴリー」と「ナビゲーションメニュー」ウィジェット両方に対応してますので、まずはお好みのウィジェットでカテゴリーリストを作成してください。

それぞれのカテゴリーリスト作成方法を簡単に説明していきます。

「カテゴリー」ウィジェットを使用法

「カテゴリー」ウィジェットは、設定が非常に簡単です。ただ、表示するカテゴリーを選択したり、並び替えするなどの細かい設定はできません。

WordPressの管理画面から「外観/ウィジェット」を選択します。
利用できるウィジェット項目の中から「カテゴリー」をドラッグ＆ドロップで、PC：メインサイドバーの中に入れます。
「投稿数を表示」と「階層を表示」にチェックを入れます。（必要ない場合は、チェックしなくてもOK。ただし、ドロップダウンはチェックしないでください。）
「保存」を選択して設定をSAVEします。

以上で、「カテゴリー」ウィジェットの設定は終了です。

「ナビゲーションメニュー」ウィジェットを使用法

「ナビゲーションメニュー」ウィジェットは設定が少々たいへんですが、そのかわりに表示するカテゴリーを選んだり、並び替えを自由におこなうことができます。

WordPressの管理画面から「外観/メニュー」を選択します。
「新規メニュー」を押します。
「メニュー名」を入力します。（名前は何でもOKです。）
「メニューを作成」ボタンを選択して、新規メニューを作成します。

「編集するメニューを選択」が先ほど作成したメニュー名になっているのを確認します。
カテゴリー内の「すべて表示」を選択して、カテゴリーリストに追加したい項目にチェックをします。
「メニューに追加」ボタンを選択して、右隣のメニュー構造に追加し、必要があればカテゴリーの並び替えをおこないます。
表示したいカテゴリーリストが選択できたら、「メニューを保存」ボタンを押して、設定をSAVEします。

WordPressの管理画面から「外観/ウィジェット」を選択します。
利用できるウィジェット項目の中から「ナビゲーションメニュー」をドラッグ＆ドロップで、PC：メインサイドバーの中に入れます。
タイトル名を入力し、「メニューを選択」から先ほど作成したメニュー名を選択します。
「保存」ボタンを押して、内容をSAVEします。

以上で、「ナビゲーションメニュー」ウィジェットの設定は終了です。

次は、いよいよカテゴリーリストのカスタマイズになります。これから説明するCSSコードをコピペすればカスタマイズが完了するようになっています。

カスタマイズは、３種類ありますのでお好みのモノを１つ選んでCSSコードをコピーしてください。

STORK(ストーク)のカテゴリーをカスタマイズ

シンプル

カテゴリー名の前にアイコンを追加した、シンプルなデザインです。

　　　　コードを表示

CSS

/* --------- シンプル カテゴリ --------- */
.widget.widget_categories ul,
.widget.widget_nav_menu ul{
    padding-left: 1.3em;
}

.widget.widget_categories li:first-child,
.widget.widget_nav_menu li:first-child{
    border-top: 1px dotted rgba(125, 125, 125, 0.2);
}

.widget.widget_categories li ul ul a:first-child,
.widget.widget_nav_menu li ul ul a:first-child{
    border-top: 1px dotted rgba(125, 125, 125, 0.2);
}

/* --------- 親+子カテゴリ --------- */
.widget.widget_categories li a,
.widget.widget_nav_menu li a{
    padding: .7em 1.2em .7em 0.3em;
    color: #666; /* フォント色 */
    /*font-weight: bold;*/ /* フォント太字 */
}

.widget.widget_categories li a:before,
.widget.widget_nav_menu li a:before{
    font-family: FontAwesome;
    content:'\f138'; /* アイコン指定  */
    color: #61e066; /* アイコン色 */
    padding-right: .3em;
    font-size: 1.3em;
    vertical-align:middle
}

.widget.widget_categories li a:after,
.widget.widget_nav_menu li a:after{
    color: #1bb4d3; /* li右端＞の色 */
}

/* --------- 子カテゴリのみ --------- */
.widget.widget_categories li ul li a,
.widget.widget_nav_menu li ul li a{
    color: #666; /* フォント色 */
    font-weight: normal; /* フォント通常 */
}

.widget.widget_categories  li ul li a:before,
.widget.widget_nav_menu li ul li a:before{
    font-family: FontAwesome;
    content:'\f0da'; /* アイコン指定 */
    color: #666; /* アイコン色 */
    font-size: 1.3em;
}

.widget.widget_nav_menu li ul li a{ /* 子カテゴリ 1層目 */
    padding-left: 2.0em;
}

.widget.widget_categories li ul a{ /* 子カテゴリ 1層目 */
    padding-left: 2.0em;
}

.widget.widget_categories li ul ul a,
.widget.widget_nav_menu li ul ul a{ /* 子カテゴリ 2層目 */
    padding-left: 3.5em;
}

親カテゴリー背景色あり

カテゴリー名の前にアイコンを追加し、親カテゴリーのみ背景色を追加したデザインです。

　　　　コードを表示

CSS

/* --------- 親カテゴリー背景色あり --------- */
.widget.widget_categories li:first-child,
.widget.widget_nav_menu li:first-child{
    border-top: 1px solid rgba(125, 125, 125, 0.2);
}

.widget.widget_categories li ul ul a:first-child,
.widget.widget_nav_menu li ul ul a:first-child{
    border-top: 1px dotted rgba(125, 125, 125, 0.2);
}

.widget.widget_nav_menu li{
    border-bottom: 1px solid rgba(125, 125, 125, 0.2);
}

.widget.widget_nav_menu li ul li{
    border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
}

/* --------- 親+子カテゴリ --------- */
.widget.widget_categories li a,
.widget.widget_nav_menu li a{
    padding: .7em 1.2em .7em 0.3em;
    background: #edffe8; /* 背景色 */
    color: #666; /* フォント色 */
    /*font-weight: bold;*/ /* フォント太字 */
}

.widget.widget_categories li a:before,
.widget.widget_nav_menu li a:before{
    font-family: FontAwesome;
    content:'\f138'; /* アイコン指定 */
    color: #61e066; /* アイコン色 */
    padding-left: .7em;
    padding-right: .3em;
    font-size: 1.3em;
    vertical-align:middle
}

.widget.widget_categories li a:after,
.widget.widget_nav_menu li a:after{
    color: #ccc; /* li右端＞の色 */
}

/* --------- 子カテゴリのみ --------- */
.widget.widget_categories li ul li a,
.widget.widget_nav_menu li ul li a{
    background: #fff; /* 背景色 */
    color: #666; /* フォント色 */
    font-weight: normal; /* フォント通常 */
}

.widget.widget_categories  li ul li a:before,
.widget.widget_nav_menu li ul li a:before{
    font-family: FontAwesome;
    content:'\f0da'; /* アイコン指定 */
    color: #666; /* アイコン色 */
}

.widget.widget_nav_menu li ul li a{ /* 子カテゴリ 1層目 */
    padding-left: 2.0em;
}

.widget.widget_categories li ul a{ /* 子カテゴリ 1層目 */
    padding-left: 2.0em;
}

.widget.widget_categories li ul ul a,
.widget.widget_nav_menu li ul ul a{ /* 子カテゴリ 2層目 */
    padding-left: 3.5em;
}

親カテゴリー背景色あり+外枠

カテゴリー名の前にアイコンを追加し、親カテゴリーのみ背景色と外枠を追加したデザインです。

　　　　コードを表示

CSS

/* --------- 親カテゴリー背景色あり+外枠 --------- */
.widget.widget_categories li:first-child,
.widget.widget_nav_menu li:first-child{
    border-top: 1px solid #61e066; /* 外枠の色 */
}

.widget.widget_categories li ul li:first-child,
.widget.widget_nav_menu li ul li:first-child{
    border-top: 1px solid rgba(125, 125, 125, 0.2);
}

.widget.widget_categories li:last-child,
.widget.widget_nav_menu li:last-child{
    border-bottom: 1px solid #61e066; /* 外枠の色 */
}

.widget.widget_categories li,
.widget.widget_nav_menu li{
    border-left: 1px solid #61e066; /* 外枠の色 */
    border-right: 1px solid #61e066; /* 外枠の色 */
}

.widget.widget_categories ul li,
.widget.widget_nav_menu li{
    border-bottom: 1px solid rgba(125, 125, 125, 0.2);
}

.widget.widget_categories li ul li,
.widget.widget_nav_menu li ul li{
    border-left: none;
    border-right: none;
}

/* --------- 親+子カテゴリ --------- */
.widget.widget_categories li a,
.widget.widget_nav_menu li a{
    padding: .7em 1.2em .7em 0.3em;
    background: #edffe8; /* 背景色 */
    color: #666; /* フォント色 */
    /*font-weight: bold;*/ /* フォント太字 */
}

.widget.widget_categories li a:before,
.widget.widget_nav_menu li a:before{
    font-family: FontAwesome;
    content:'\f138'; /* アイコン指定 */
    color: #61e066; /* アイコン色 */
    padding-left: .7em;
    padding-right: .3em;
    font-size: 1.3em;
    vertical-align:middle
}

.widget.widget_categories li a:after,
.widget.widget_nav_menu li a:after{
    color: #ccc; /* li右端＞の色 */
}

/* --------- 子カテゴリのみ --------- */
.widget.widget_categories li ul li a,
.widget.widget_nav_menu li ul li a{
    background: #fff; /* 背景色 */
    color: #666; /* フォント色 */
    font-weight: normal; /* フォント通常 */
}

.widget.widget_categories  li ul li a:before,
.widget.widget_nav_menu li ul li a:before{
    font-family: FontAwesome;
    content:'\f0da'; /* アイコン指定 */
    color: #666; /* アイコン色 */
}

.widget.widget_nav_menu li ul li a{ /* 子カテゴリ 1層目 */
    padding-left: 2.0em;
}

.widget.widget_categories li ul a{ /* 子カテゴリ 1層目 */
    padding-left: 2.0em;
}

.widget.widget_categories li ul ul a,
.widget.widget_nav_menu li ul ul a{ /* 子カテゴリ 2層目 */
    padding-left: 3.5em;
}