スポンサーリンク

【Luxeritas】メタ情報のカテゴリーやタグのデザインをカスタマイズ

2020年3月7日Luxeritas

記事の投稿日の横や記事一覧にカテゴリーやタグが表示されます。カテゴリーやタグは設定で表示/非表示の切り替えができます。

WordPressテーマLuxeritas(ルクセリタス)のデフォルトのデザインは非常にシンプルです。

結耶
結耶

今回はこのカテゴリーとタグのデザインをカスタマイズしてみよう!

きらり
きらり

デフォルトはちょっと寂しいよね。ボクも変えたいから教えて~![カスタマイズ(外観)]

スポンサーリンク

カテゴリーやタグの表示設定

場所[Luxeritas][メタ情報の表示位置]

「投稿・固定ページ」「一覧」での表示設定ができます。表示させたい場合はチェックを入れてください。

デザインをカスタマイズ

ではカテゴリーやタグのデザインをCSSを使ってカスタマイズしてみます。

カテゴリー

セレクタspan.category
CSS
/*--------------------
 メタ情報カテゴリー
--------------------*/
span.category a {
    padding:2px 10px;        /*内側の余白*/
    border-radius:30px;    /*角の丸み*/
    background:#ff6893;    /*背景色*/
    color:#fff;            /*文字の色*/
    text-decoration:none;  /*下線を消す*/
}

ホバー時(マウスが乗ったとき)背景色や文字の色を変わるようにしたい場合はspan.category a:hoverで指定してください。

/*ホバー時の設定*/
span.category a:hover {
    background: 色 ;  /*背景色*/
    color: 色 ;       /*文字の色*/
}

上記のCSSを設定するとこのようになります。

きらり
きらり

あらら、アイコンが外に出ちゃってるね。

結耶
結耶

そうだね~だからアイコンは消しちゃおう!

アイコンを消す

カテゴリーのアイコンのセレクタは以下になります。

セレクタ.meta > .fa-folder:before
/*アイコンを非表示*/
.meta > .fa-folder:before {
    display;none;
}
結耶
結耶

これでカテゴリーのアイコンが非表示になります。

「 , 」を消す

カテゴリーを複数指定しているとカテゴリーの間に「 , 」(カンマ)が表示されます。カンマを消す(見えなくする)には以下のように指定します。

/*カンマを非表示*/
span.category {
    color:#fff;
}

span.category内の文字色を背景色と同じにすれば「,」(カンマ)が見えなくなります。

タグ

タグもカテゴリーと同じようにスタイルを指定してください。タグのセレクタは以下のようにしてください。

タグspan.tag
アイコン .meta > .fa-tags:before
結耶
結耶

これでカテゴリーやタグのデザインを変えることができます。…きらりはデザインカスタマイズできた?

きらり
きらり

カテゴリーはできたー!タグをどうしようか考え中~!

結耶
結耶

そかそか。ユーザーにわかりやすくしてねw

その他のメタ情報

メタ情報の投稿日と更新日のセレクタも書いておきます。

投稿日span.date(.published)
アイコン .meta > .fa-clock-o:before
更新日span.date
アイコン .meta > .fa-repeat:before

最後に

今回は記事や一覧で表示されるカテゴリーとタグのデザインの変え方について書いてみました。

デザインを変えると目を引きますよね?ユーザーにもわかりやすくなると思います。

カスタマイズする際の参考にしてください(^-^)

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。