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

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

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

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

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

 

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

リストのカスタマイズ前後
左側:カスタマイズ前  右側:カスタマイズ後

 

おすすめASP

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

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

 

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

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

 

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

カスタマイズは、3種類ありますのでお好みのモノを1つ選んで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;
}

 

CSSコピペの場所

CSSにコピペする場合には、下記のどちらかお好みな方で編集ください。

  1. 子テーマの「style.css」を編集する。(外観/テーマ編集から変更できます)
  2. 追加CSSを編集する。(外観/CSS編集から変更できます)

子テーマの導入については、コチラ( ↓ )の記事にありますのでそちらをご覧ください。

関連記事

こんにちは! HTML&CSSの勉強中のネイネイ(@NEYNEYx2)です。 WordPressテーマのSTORK(ストーク)をインストールしたら、初めにしておいた方がいいのが「子テーマ」の導入です。 今回は、「子テーマ」を導入する仕方[…]

STORK(ストーク)をインストールしたら「子テーマ」を入れよう!

 

補足

色を変更する方法

これまで紹介してきた見出しデザインの色を変更する場合の方法を説明していきます。

色の変更は、「 /* 背景色 */ 」「 /* 文字色 */ 」などの〇〇〇とコメントがある行の「 #78b4ff 」の #〇〇〇〇〇〇をお好きな色コードに変更してください。

色コードの参考には、コチラ(↓)のサイトがおすすめです。

色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色…

 

アイコンを変更する方法

アイコンを変更する場合は、下記のサイトからアイコンのコードを取得してください。

アイコンの変更は、「 /* アイコンを指定 */ 」とコメントがある行の「content:”\f06c”;」のf06cを下記画像の赤枠部分を参考に変更してみてください。

 

まとめ

どうですか、うまく設定できましたか?

これであなたのサイトが、よりおしゃれに見やすくなること間違いなしですね!

それでは、まったです。 (‘◇’)ゞ

 

コチラで紹介している「【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ」の記事もよかったらどうぞ。

関連記事

こんにちは! カスタマイズにハマってしまっているネイネイ(@NEYNEYx2)です。 今回は、WordPressテーマのSTORK(ストーク)でこれまで紹介してきたカスタマイズをまとめましたので、ご紹介いたします。 STORK(ストーク[…]

【コピペで簡単】STORK(ストーク)のカスタマイズのまとめ

 

おすすめASP

 

ポチして頂くことで、ランキングの順位が上がります

人気ブログランキングへ
にほんブログ村 本ブログ 書評・レビューへ
Amazonでお得にお買い物
amazonギフト券

Amazonでお買い物するなら、Amazonギフト券の利用がおすすめ!

チャージするたびに、プライム会員なら最大2.5%分通常会員なら最大2.0%分のAmazonポイントが貯まる。

\ TRY NOW!! /

\ こちらも読まれています! /