ここあです。
STORKのサイドバーに表示される
カテゴリー一覧がダラっと長くなって
「見た目が嫌だ」という方はいませんか？
私はカテゴリーが少ない時は
あまり気にならなかったのですが…
カテゴリーが増えてくると
どうもまとまりがなくてパッとしない。
「何とかならないのか？」と思いました。
しかし、やっぱり
同じことを考える人がいるようで…（笑）
ということで、今回は…
「カテゴリー一覧をボタン風にカスタマイズする方法」を
ご紹介します。
カテゴリーを整理してリストを作ろう
それでは順番に説明していきますね。
まず始めにやるべきことは
どんなカテゴリー一覧にするかということ。
わたしの場合もカテゴリーはたくさん作りましたが
できるだけ分かりやすくするために
コンパクトに整理してまとめました。
もし整理していなければ、こんな感じに…＾＾；
↑ 未整理のカテゴリー一覧。な、長い＾＾；
私の場合は、左のカテゴリーを整理して
上記6つのコンテンツとしてまとめました。
※現在はさらに減らしています。カテゴリーの数はあなたの好みでまとめてくださいね。
カテゴリーはすでにあなたも作成済みだと思います。
しかし、今回はあらかじめ設定したカテゴリーを作り変えるのではなく
既存のカテゴリーを整理して利用します。
カテゴリー一覧を整理して再設定する方法
カテゴリーを整理して表示したいメニューが決まったら
新たなカテゴリー一覧を準備します。
ダッシュボードメニューから
外観 → メニューをクリック。
メニュー作成画面で
新規メニューを作成をクリック。
新規メニューを作成画面でメニュー名を入力し
メニューを作成ボタンをクリックします。
※メニュー名を入力しなければメニューを作成ボタンはクリックできません。
メニュー名はあなたが分かりやすい名前にしてください。
新規メニューが作成できたら
続いて、メニューに追加したいカテゴリーを選択します。
カテゴリーを選択したら
すべて表示をクリックして
現状のカテゴリー一覧を全て表示しましょう。
カテゴリー一覧が表示できたら
新たに表示させたいカテゴリーを選択し
メニューに追加のボタンをクリックすると
メニュー構造の部分に反映されます。
ちなみに、選択したカテゴリーを
「やっぱり消したい！」という時は…
追加したカテゴリーの右側にある▼マークをクリックし
カテゴリーの詳細を表示してから
左下にある削除の文字をクリックします。
新しいメニューのカテゴリー一覧が全て選択できたら
メニューを保存ボタンをクリックし
設定を保存しましょう。
ちなみに下にあるメニュー設定はそのままでOKです。
特に設定はいりません。
ひとまず、新規のカテゴリー一覧が準備できたら
今度はサイドバーに設置します。
整理したカテゴリー一覧をサイドバーウィジェットに設置する
それでは、新たに整理したカテゴリー一覧を
サイドバーウィジェットに反映しましょう。
ダッシュボードメニューから
外観 → ウィジェットをクリックし
ウィジェット編集画面に移動します。
ウィジェット編集画面に移動したら
ナビゲーションメニューを追加してください。
ナビゲーションメニューを追加したら
メニューを選択の項目で先ほど設定した
カスタムメニュー（あなたが名前をつけたメニュー）」を選択します。
ナビゲージョンメニューのタイトルはお好みで決めてください。
私の場合は、カテゴリーとしています。
サイドバーの位置はPC：メインサイドバーを選択
※位置はお任せします。
最後にウィジェットを保存をクリックします。
カテゴリー一覧をボタン風にするCSSコードを設置する
新たに整理したカテゴリーが
PCメインサイドバーに設置できたら
最後にカテゴリー一覧をボタン風にするための
CSSコードを追加します。
以下、紹介するコードをコピペするだけなので簡単です。
CSSコードをコピーして貼り付ける場所は…
ダッシュボードメニューから
外観 → CSSの編集をクリック。
追加CSSにコードを貼り付けてください。
追加するコードは以下になります。
シンプルなボタン風CSSコード
まずは、シンプルなボタン風です。
左の画像は私の方で色を付けましたがあなたがコピーするコードは背景色や、文字色の設定はされていませんのでご自由に配色してください。
※カラーコードは#で始まる6ケタのコードです。
以下、CSSコードをコピーして貼り付けてください。
- クリックで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が設置できている方は
以下のコードを試してみてください。私と同じボタンになります。
- クリックでCSSコードを表示
.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列表示することでレイアウトがスッキリするし
カテゴリーが増えても気になりません。
ボタンにすることでリンクであるということがよく分かり
訪問者のユーザビリティもアップします。
ストークならではのダラっとした縦に長い
カテゴリーに不満がある場合は
コピーだけで簡単にできるのでカスタマイズしてみてくださいね。
最後までお読みいただきありがとうございました！
