デジモノ大好き+

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

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

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


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

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

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

style.cssで表示の調整

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

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

[crayon-60058b266ad92041976609/]

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

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

[crayon-60058b266ad9f749435632/]

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

[crayon-60058b266ada4168030726/]

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

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

[crayon-60058b266ada8066399923/]

まとめ

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

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

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

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

スポンサーリンク

-WordPress
-, , , ,

関連記事

Stinger8記事下のアドセンス広告を横並びにしてみた。 [WordPress]

Stinger8デフォルトのままアドセンスの記事下広告を入れると縦に2つ並んでしまうので、横並びにしてみました。 横並びするためには まずは、サイト幅を広げないとです。 というのもデフォルトのサイズは …

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

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

no image

Stinger8の記事タイトルをさりげなく装飾してみた。 [WordPress]

デフォルトもシンプルで文字のサイズも大きく見やすいのでいいんですが、せっかくなんで少し手を入れてみました。 こんな感じにしてみました。 デフォルトはこんな感じですよね。 変更した内容は センタリング …

no image

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

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

no image

Stinger8のタイトルとキャッチフレーズをセンタリングしてみた。 [WordPress]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 [crayon-60058b26776851869 …