WPテーマ「STORK」カスタマイズ!カテゴリー一覧をボタン風に!

WPテーマ「STORK」カスタマイズ!カテゴリー一覧をボタン風に!

ここあです。

 

サイドバーのカテゴリー一覧がダラっと長くなって

見た目が嫌だという方はいませんか?

 

わたしもカテゴリーが少ない時は

あまり気にならなかったのですが…

 

カテゴリーが増えてくると

どうもまとまりがなくてパッとしない。

何とかならないのか?」と思いました。

 

しかし、やっぱり…

同じことを考える人がいるもんですね(笑)

 

ということで、今回は…

カテゴリー一覧をボタン風にカスタマイズする方法

ご紹介します。

 

カテゴリーを整理してリストを作ろう

それでは順番に説明しますね。

 

まず始めにやるべきことは

どんなカテゴリー一覧にするかということ。

 

わたしの場合もカテゴリーはたくさん作りましたが

できるだけ分かりやすくするために

コンパクトに整理してまとめました。

 

もし整理していなければ、こんな感じに…^^;

カテゴリー一覧

↑ 未整理のカテゴリー一覧。な、長い^^;

カテゴリー一覧

 

私の場合は、左のカテゴリーを整理して上記6つのコンテンツとしてまとめました。

カテゴリーの数はあなたの好みでまとめてくださいね。

 

カテゴリーはすでにあなたの方でも作成済みだと思います。

 

しかし、今回は予め設定したカテゴリーを作り変えるのではなく

既存のカテゴリーを整理して利用します。

 

カテゴリー一覧を整理して再設定する方法

カテゴリーを整理して表示したいメニューが決まったら

新たなカテゴリー一覧を準備します。

 

ダッシュボードメニューから「外観」→「メニュー」をクリック。

ダッシュボードメニュー

 

メニュー作成画面で

新規メニューを作成をクリック。

新規メニュー作成画面

 

新規メニューを作成」画面でメニュー名を入力し

メニューを作成」ボタンをクリックします。
※「メニュー名」を入力しなければ「メニューを作成」ボタンはクリックできません。

メニュー名はあなたが分かりやすい名前にしてください。

新規メニュー作成画面

 

新規メニュー」が作成できたら

続いて、メニューに追加したいカテゴリーを選択します。

メニュー作成カテゴリー選択

 

カテゴリー」を選択したら

すべて表示をクリックして

現状のカテゴリー一覧を全て表示しましょう。

メニュー作成カテゴリー選択

 

カテゴリー一覧」が表示できたら

新たに表示させたいカテゴリーを選択し

 

メニューに追加のボタンをクリックすれば

メニュー構造」の部分に反映されます。

カテゴリーの追加

 

ちなみに、選択したカテゴリーを

やっぱり消したい!」という時は…

 

追加したカテゴリーの右側にある「▼マーク」をクリックし

カテゴリーの詳細を表示してから

左下にある「削除」の文字をクリックします。

カテゴリー消去

 

新しいメニューのカテゴリー一覧が全て選択できたら

メニューを保存ボタンをクリックし

保存しましょう。

新規メニュー作成画面

 

ちなみに下にある「メニュー設定」はそのままでOKです。

特に設定はいりません。

 

ひとまず、「新規のカテゴリー一覧」が準備できたら

今度はサイドバーに設置します。

 

整理したカテゴリー一覧をサイドバーウィジェットに設置する

それでは、あらたに整理した「カテゴリー一覧」を

サイドバーウィジェットに反映しましょう。

 

ダッシュボードメニューから「外観」→「ウィジェット」をクリックし

ウィジェット編集画面に移動します。

ダッシュボードメニュー

 

ウィジェット」編集画面に移動したら

ナビゲーションメニューを追加してください。

ナビゲーションメニューを追加

 

ナビゲーションメニュー」を追加したら

メニューを選択」の項目で先ほど設定した

カスタムメニュー(あなたが名前をつけたメニュー)」を選択します。

 

ナビゲージョンメニューのタイトル」はお好みで決めてください。

私の場合は「カテゴリー」としています。

 

サイドバーの位置はPC:メインサイドバーを選択

※位置はお任せします。

最後にウィジェットを保存をクリックします。

ウィジェットナビゲーションメニュー
ウィジェットナビゲーションメニュー

 

カテゴリー一覧をボタン風にするCSSコードを設置する

新たに整理したカテゴリーが

PCメインサイドバーに設置できたら

 

最後にカテゴリー一覧をボタン風にするための

CSSコードを追加します。

 

以下、紹介するコードをコピペするだけなので簡単です。

 

CSSコードをコピーして貼り付ける場所は…

ダッシュボードメニューから「外観」→「CSSの編集

ダッシュボードメニュー

 

追加CSS」にコードを貼り付けてください。

dropshadow

 

追加するコードは以下になります。

 

シンプルなボタン風CSSコード

シンプルなボタン風カテゴリー

まずはシンプルなボタン風です。

左の画像は私の方で色を付けましたがあなたがコピーするコードは背景色や、文字色の設定はされていませんのでご自由に配色してください。

※カラーコードは#で始まる6ケタのコードです。

 

以下、「CSSコード」をコピーして貼り付けてください。

/* ボタン風カテゴリ一覧 */
.widget_nav_menu ul {
padding-top:12px;
margin: 0 auto;
list-style: none;
}
.widget_nav_menu li {
display: inline-block;
width: 49%;
padding-top: 5px!important;
border-bottom: none!important;
text-align: center;
}
.widget_nav_menu ul a{
padding: 15px 5px!important;
border-radius: 3px;
background: お好きなカラーコード(ボタンの色);
color: お好きなカラーコード(文字色);
font-size: 14px;
text-decoration: none;
text-align: center;
box-shadow: 0 2px 2px rgba(0,0,0,.5);
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.widget_nav_menu ul a:hover{
background: お好きなカラーコード(マウスを乗せたときのボタンの色);
color: お好きなカラーコード(マウスを乗せたときの文字色);
box-shadow: 0 2px 2px rgba(0,0,0,.8);
transform: translate3d(0px, 2px, 0px);
}
.widget_nav_menu li a:after{
display: none;
}

 

上記コードはSTORK使いのイラストレーター「ぱるくら」さんの

コードを改良したものとなります。

 

ボタンや文字の色は

あなたの好きなカラーコード(#000000)を入れてください。

 

Webアイコンフォントを使用したボタン風CSSコード

ボタン風カテゴリー

私が使っているコードがこちらです。

ボタンの前にWebアイコンフォントを表示させています。

Webアイコンフォントを表示させるサービス
Font Awesome 5」(最新版)の使い方はこちらの記事にまとめています。

 

Webアイコンフォント「Font Awesome」の使い方をやさしく解説

 

Font Awesome 5」が設置できている方は

以下のコードを試してみてください。私と同じボタンになります。

/* ボタン風カテゴリ一覧 */
.widget_nav_menu ul {
padding-top: 5px;
list-style: none;
}

.widget_nav_menu li {
display: inline-block;
width: 49%;
padding-top: 5px!important;
border-bottom: none;
text-align: center;
}

.widget_nav_menu ul :before{
font-family: fontawesome;
content:"\f02d";
color: #1BB4D3;

padding-right: 5px;
padding-left:7px;
}

.widget_nav_menu ul a{
padding: 10px 5px;
border-radius: 3px;
background:#fff;
color: #1BB4D3;
border:solid 1px #1BB4D3;
font-size: 14px;
text-decoration: none;
text-align: left;
box-shadow: 0 2px 2px rgba(0,0,0,.3);
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.widget_nav_menu ul a:hover{
background: #1BB4D3;
color:#fff;
transform: translate3d(0px, 2px, 0px);
box-shadow: none;
}

.widget_nav_menu li a:after{
display: none;
}

 

ボタン風カテゴリー一覧のカスタマイズ方法

簡単に調整方法だけ記載しておきますね。

 

見出し(タイトル)からの距離を調整する

見出しからの距離を調整したい場合

以下コード部分のpadding-top: 5px;の数字を変更してください。

CSSコード

/* ボタン風カテゴリ一覧 */
.widget_nav_menu ul {
padding-top: 5px;
list-style: none;
}

 

ボタンの幅を調整する

ボタンの幅は見出しとほぼ揃うように49%で設定しています。

width: 49%;の数字を変更することで

左右幅が調整できます。

CSSコード

.widget_nav_menu li {
display: inline-block;
width: 49%;
padding-top: 5px!important;
border-bottom: none;
text-align: center;
}

 

ボタンとボタンの距離を調整する

ボタンとボタンの距離を調整する場合は

以下コードのpadding-top: 5px!important;の数字を変更してください。

CSSコード

.widget_nav_menu li {
display: inline-block;
width: 49%;
padding-top: 5px!important;
border-bottom: none;
text-align: center;
}

 

文字のサイズを調整したい

フォントサイズはfont-size: 14px;の部分で調整できます。

文字数でバランスをみながら調整してみてください。

CSSコード

.widget_nav_menu ul a{
font-size: 14px;
}

 

影を消したい

ボタンの影が邪魔だという場合は

以下のコード(ピンク色の文字の部分全て)を削除してください。

CSSコード

.widget_nav_menu ul a{
box-shadow: 0 2px 2px rgba(0,0,0,.3);
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

 

Webアイコンフォントの色を変更したい

Webアイコンフォントの色は

color: #1BB4D3;のカラーコードを変更してください。

CSSコード

.widget_nav_menu ul :before{
font-family: fontawesome;
content:"\f02d";
color: #1BB4D3;

padding-right: 5px;
padding-left:7px;
}

 

Webアイコンフォントを変更したい

Webアイコンフォントを変更する場合は

content:"\f02d";のコードを

Font Awesomeのページより書き換えてください。

CSSコード

.widget_nav_menu ul :before{
font-family: fontawesome;
content:"\f02d";
padding-right: 5px;
padding-left:7px;
}

以上、ざっくりですが

簡単に微調整できる部分だけご紹介しました。

 

カテゴリー一覧をボタン風にカスタマイズまとめ

ブログ立ち上げの頃はカテゴリーリストも少なく

あまり気になりませんが

 

カテゴリーが増えてくると

どうしても見栄えが悪くなるのがよろしくありません。

 

ボタンは縦一列でも表示できますが

2列表示することでレイアウトがスッキリするし

カテゴリーが増えても気になりません。

 

ボタンにすることでリンクであるということがよく分かり

訪問者のユーザビリティもアップします。

 

ストークならではのダラっとした縦に長い

カテゴリーに不満がある場合は

コピーだけで簡単にできるのでカスタマイズしてみてくださいね。

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

最後までお読みいただきありがとうございました!

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!カテゴリー一覧をボタン風に!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。