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

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

完成イメージ

カスタマイズ前


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

カスタマイズ後


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

環境

  • PHP 5.6
  • WordPress 4.7
  • Simplicity2

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

カスタマイズ方法

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

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

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

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

CSS

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

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

.widget_categories ul {
  margin-left: -16px;
}
.widget_categories li {
  display: inline-block;
  margin: 0 1px 4px 0;
  padding: 3px 6px 3px 9px;
  font-size: 10px !important;
  background-color: #efefed;
  border: dashed 1px #999;
  color: #777;
}
.widget_categories li.cat-item a {
  text-decoration: none;
  font-size: 10pt !important;
  color:#292929 !important;
}
.widget_categories li.cat-item a:hover,
.widget_categories li.cat-item a:active {
  text-decoration: underline;
}

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

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

残念なところ

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

Darkバージョン

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

.widget_categories ul {
  margin-left: -16px;
}
.widget_categories li {
  display: inline-block;
  margin:0 1px 4px 0;
  padding: 3px 6px 3px 9px;
  background-color: #777;
  border: dashed 1px #000;
  font-size: 10px !important;
  color: #9F9F9F;
}
.widget_categories li.cat-item a {
  text-decoration: none;
  font-size: 10pt !important;
  color:#ccc !important;
}
.widget_categories li.cat-item a:hover,
.widget_categories li.cat-item a:active {
  text-decoration: underline;
}

おわりに

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

WEBは楽しいです!

この記事はtomita@atuwebがお届けしました。



2017年01月06日:アイキャッチ画像を変更
2017年01月05日:「完成イメージ」の画像、文章を変更

スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
コメントの入力は終了しました。