デジモノ大好き+

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

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

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


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

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

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

style.cssで表示の調整

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

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

[crayon-5daf72cdb3d37105379128/]

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

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

[crayon-5daf72cdb3d40163721884/]

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

[crayon-5daf72cdb3d43912655201/]

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

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

[crayon-5daf72cdb3d48413709137/]

まとめ

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

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

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

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

スポンサーリンク

-WordPress
-, , , ,

関連記事

ソネットブログからWordPressへ引っ越してみた。

ブログのコンテンツ自体は、エクスポート機能を利用すれば問題ないけど、画像の引っ越しは結構やっかい。 忘備録として残しておきます。 ブログ引っ越しの流れを確認しておきましょう。 目次 コンテンツのエクス …

Stinger8ページナビ「PREV」「NEXT」をカスタマイズしてみた。 [WordPress]

関連記事直下にある「PREV」「NEXT」を削除や非表示してるところもあるけど、サイト内リンクを削除してしまうのはもったいない。 せっかくなので、触ってもらえるようにカスタマイズしてみました。 今回手 …

no image

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

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

Stinger8のページトップボタンを目立たせてみた。 [WordPress]

主張が強すぎるのもなんですが、あまりにも目立ってないので手を加えてみました。 ↑右端にあるこれね。 (わかりずらいので、囲ってみました。) style.cssを変更 差分はこんな感じです。 [cray …

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

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