ふと気がつくと縦長になってしまうアーカイブやカテゴリをすっきりとまとめるカスタマイズ、やってみました。

今回はCSSのみの変更で、カテゴリをタイル状にしてみます。

Overview

完成イメージ

カスタマイズ前

数が増えると縦に長くなってしまうカテゴリのイメージ
数が増えると縦に長くなってしまうカテゴリのイメージ

気がつくとどんどん下に長くなってしまう、通常のカテゴリメニューですね。

カスタマイズ後

タイル状にしコンパクトにしたカテゴリのイメージ
タイル状にしコンパクトにしたカテゴリのイメージ

タイル状にして回り込みを設定して縦のサイズを縮めます。
省スペースです!

環境

  • PHP 5.6
  • Wordpress 4.7
  • Simplicity2

Simplicity 以外のテーマでも使えそうですが、未検証です。

カスタマイズ方法

カテゴリウィジェットの設置

WordPressの管理ツールにログインし、[ 外観 > ウィジェット ]を開きます。

今回はフッターにカテゴリのウィジェットを設置しました。

WordPress カテゴリウィジェット
WordPress カテゴリウィジェット

[ ドロップダウン表示 ]や[ 階層を表示 ]には対応しておらず、レイアウトが崩れてしまうためチェックを外してください。
[ 投稿数を表示 ]はお好みで設定してください。

CSS

次に[ 外観 > テーマの編集 ]に遷移し style.css を開きます。

WordPress style.cssの編集画面
WordPress style.cssの編集画面

style.cssに次のコードを追記してください。

 1.widget_categories ul {
 2  margin-left: -16px;
 3}
 4.widget_categories li {
 5  display: inline-block;
 6  margin: 0 1px 4px 0;
 7  padding: 3px 6px 3px 9px;
 8  font-size: 10px !important;
 9  background-color: #efefed;
10  border: dashed 1px #999;
11  color: #777;
12}
13.widget_categories li.cat-item a {
14  text-decoration: none;
15  font-size: 10pt !important;
16  color:#292929 !important;
17}
18.widget_categories li.cat-item a:hover,
19.widget_categories li.cat-item a:active {
20  text-decoration: underline;
21}

ファイルを更新 ボタンを押下で完成です。

デザインがすぐ変わらない場合は_スーパーリロード_なり、ブラウザのキャッシュクリアをお試しください。

残念なところ

フォントによっては全角文字の有無でボックスの高さが異なってしまうようです。
また、ところどころで important を使ってしまったのが悔しいです。

Darkバージョン

このブログでは色を変更したDarkカラーを設定しております。

 1.widget_categories ul {
 2  margin-left: -16px;
 3}
 4.widget_categories li {
 5  display: inline-block;
 6  margin:0 1px 4px 0;
 7  padding: 3px 6px 3px 9px;
 8  background-color: #777;
 9  border: dashed 1px #000;
10  font-size: 10px !important;
11  color: #9F9F9F;
12}
13.widget_categories li.cat-item a {
14  text-decoration: none;
15  font-size: 10pt !important;
16  color:#ccc !important;
17}
18.widget_categories li.cat-item a:hover,
19.widget_categories li.cat-item a:active {
20  text-decoration: underline;
21}

おわりに

ちょっとしたカスタマイズで見栄えが変わってきます。
この程度のカスタマイズであれば、ちょっとPHPやCSSをかじればすぐにできますよ!

WEBは楽しいです!


いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

伊藤 庄平,益子 貴寛,久保 知己,宮田 優希,伊藤 由暁
出版社:SBクリエイティブ  発売日:2017-02-25

Amazonで詳細を見る