デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

カテゴリーの表示を個性的にしてみた。 [WordPress]

投稿日:2018年8月20日 更新日:


カテゴリー表示はテーマそのままだとちょっと寂しいので、少し手を加えてみました。

今回手を加えたのは、style.cssとfunctions.php

カテゴリーの親子関係の表示を調整。

style.cssで表示の調整

親カテゴリー、子カテゴリーそれぞれ設定。

  • 文字サイズ
  • 位置調整
  • フォントカラー
  • リンク設定
  • アイコンの追加
  • ホバーの設定

[crayon-5cb9db2b3dbce843451132/]

functions.phpで投稿数の位置の調整

ここまでだと「display: block;」で投稿数が改行されてしまうので、functions.phpに以下を追記。

[crayon-5cb9db2b3dbdd701908935/]

style.cssで投稿数の表示を調整

[crayon-5cb9db2b3dbe1103776347/]

ついでにタイトルを修正。

  • 背景設定
  • ボーダー調整
  • フォント調整

[crayon-5cb9db2b3dbe6606295063/]

まとめ

投稿数は数字なので、尻揃えにしたほうが見やすいかなと。カテゴリー名と距離があるけど、そこはhoverで補完

親子関係は、文字サイズとアイコンで差別化

だいぶ見やすくなったのではないかと思っております。

テーマをいじる場合は、必ずバックアップをとり、自己責任で作業してください。
また、子テーマで作業するのが望ましいです。
特に「functions.php」はミスると表示しなくなるのでご注意を

スポンサーリンク

-WordPress
-, , , ,

関連記事

no image

STINGER8の幅を広げてみた。 [WordPress]

記事下広告のAdsenceをダブルレクタングルにしたかったので気持ち幅を広げてみました。 ただ単に広げればいいってもんでもないので、世間一般的なモニター解像度から目標となる幅を決めてみました。 国内に …

no image

STINGER8の執筆者とコメントを非表示にしてみた。 [WordPress]

スパムが多いので、コメント欄を非表示にしてみた。 STINGER5は、CSSで非表示にできたんですけど、STINGER8はPHPをいじります。 single.php にある [crayon-5cb9d …

AmazonJSの画像が表示されないときの回復方法 [WordPress]

AmazonJSはAmazonアソシエイトのリンクを張るときに投稿画面から商品検索ができ、しかもショートコードで貼り付けてくれて、さらに格好良く表示してくれるプラグインなので、ちょーおススメなプラグイ …

Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。 デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています。 今回はいつも …

Stinger8サムネイル画像を大きくして、スマホのレイアウト調整してみた。 [WordPress]

Stinger8のサムネイル画像のサイズは、100×100pxと小さくアイキャッチとしてはちょっと弱いので少し大きくしてみました。 そのままだとスマホのレイアウトが崩れてしまうのでそちらも調整。 今回 …