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

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

 

ここあです。

 

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