サイドバーのカテゴリ一覧って、ただのリスト表示で面白みがないですよね。特にカテゴリ名が短ければ、だらだらと縦に長く見えてしまいます。
そんなわけで、今回は有料のWordPressテーマ「STORK（ストーク）」
のカテゴリ一覧をボタン風にカスタマイズする方法をご紹介します。
まずはストークのメニューでカテゴリを整理しよう
そのままのカテゴリだと、そもそも整理しきれていなかったり、プラグイン等で設定していないと好きな順番に並び替えることができませんよね。
私のカテゴリも、そのまま表示させるととんでもない量になります。
未完成のカテゴリは非表示にして、整理しました。
表示するカテゴリを設定する方法
まずは「外観」→「メニュー」にいき、「新規メニューを作成」を選択します。
次に「メニュー名」を入力し、左の「カテゴリ」から表示させたいカテゴリをチェックし「メニューに追加」します。左のエリアで順番の並び替えも可能です。決まったら左上の「メニューを保存」を選択してください。
そしたら「外観」→「ウィジェット」にいき、「カスタムメニュー」の中から表示したい場所（ひとまず「PC；メインサイドバー」）を選択します。そのあとは「ウィジェットを追加」してください。※「カスタムメニュー」がない方は「ナビゲーションメニュー」を選択してください。
右側の「PC：メインサイドバー」内に先ほど追加したものがあると思います。「メニューの選択」から作成したメニューの名前を選び、保存してください。このときに「タイトル」も設定します（無難に「カテゴリ」とつけましたが、お好きな名前でどうぞ）。
これでカテゴリの取捨は完了です！
ストークのカテゴリ一覧をカスタマイズするコード
さっそくデザインを反映させるために、CSSにコードを追加していきます。
これから紹介するコードをコピペするだけでOKです。
コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪
子テーマについては「STORK（ストーク）で子テーマを導入する方法」で詳しく説明してあります。
WordPressでCSSを追加する3つの方法と各メリット・デメリット
CSS
/* ボタン風カテゴリ一覧 */
.widget_nav_menu ul {
list-style: none;
}
.widget_nav_menu li {
display: inline-block;
width: 48%;
padding: 3px!important;
border-bottom: none!important;
text-align: center;
}
.widget_nav_menu ul a{
padding: 10px 5px!important;
border-radius: 3px;
background: お好きなカラーコード（ボタンの色）;
color: お好きなカラーコード（文字色）;
font-size: 14px;
text-decoration: none;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,.13);
transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.widget_nav_menu ul a:hover{
background: お好きなカラーコード（マウスを乗せたときのボタンの色）;
color: お好きなカラーコード（マウスを乗せたときの文字色）;
transform: translate3d(0px, 2px, 0px);
box-shadow: none;
}
.widget_nav_menu li a:after{
display: none;
}
色だけ設定すれば完了です◎
おわりに：簡単にカテゴリ一覧をカスタマイズできる！
通常のリスト表示だと縦にだらだらと長くなってしまいますが、２列で表示させるとスッキリしましたね。
さらにボタン風にすることで「リンクである」ということもわかりやすくなっています。
もし通常のリスト表示に飽きたときは、このカスタマイズをしてみてください♪