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列表示することでレイアウトがスッキリするし

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

 

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

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

 

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

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

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

 

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

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

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

 

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

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?