デジモノ大好き+

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

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

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


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

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

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

style.cssで表示の調整

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

  • 文字サイズ
  • 位置調整
  • フォントカラー
  • リンク設定
  • アイコンの追加
  • ホバーの設定
/*親カテゴリー*/
.cat-item a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    line-height: 2.2em;
    padding: 0 20px;
    color: #222;
    margin-bottom: 1px;
}

/*子カテゴリー*/
.cat-item li a {
    display: block;
    font-size: 12px;
    padding: 0 20px 0 40px;
}

/*親アイコン*/
.cat-item a:before {
    font-family: FontAwesome;
    content: "\f115";
    color: #222;
    margin-right: 7px;
}

/*子アイコン*/
.cat-item li a:before {
    font-family: FontAwesome;
    content: "\f0da";
    margin-right: 4px;
}

/*ホバー*/
.cat-item a:hover {
    color: #b22222;
    background-color: #f2f2f2;
}
.cat-item a:hover:before {
    color: #b22222;
    background-color: #f2f2f2;
}

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

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

add_filter( 'wp_list_categories', 'my_list_categories', 10, 2 );
function my_list_categories( $output, $args ) {
  $output = preg_replace('/<\/a>\s*\((\d+)\)/',' <span>[$1]</span></a>',$output);
  return $output;
}

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

/*投稿数*/
.cat-item a span {
	float:right;
    font-size: 12px;
}

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

  • 背景設定
  • ボーダー調整
  • フォント調整
/*タイトル*/
.st-aside .menu_underh2 {
    font-weight: normal !important;
    border-bottom: 1px solid #cecece;
    background-image: linear-gradient( -45deg, transparent 25%, #f2f2f2 25%, #f2f2f2 50%, transparent 50%, transparent 75%, #f2f2f2 75%, #f2f2f2 );
	background-size: 8px 8px;
    padding: 5px 10px;
}

まとめ

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

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

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

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

スポンサーリンク

-WordPress
-, , , ,

関連記事

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

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

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

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

ソネブロからワードプレスへ。

So-netで「デジモノ大好き」をやっていましたが、ワードプレスで再出発です。 何かと話題のSTINGER。 アフィリエイター向けの無料テーマとして有名ですが、さらにアフィリエイトに特化したAFFIN …

no image

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

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

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

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