【Luxeritas】メタ情報のカテゴリーやタグのデザインをカスタマイズ
記事の投稿日の横や記事一覧にカテゴリーやタグが表示されます。カテゴリーやタグは設定で表示/非表示の切り替えができます。
WordPressテーマLuxeritas(ルクセリタス)のデフォルトのデザインは非常にシンプルです。
今回はこのカテゴリーとタグのデザインをカスタマイズしてみよう!
デフォルトはちょっと寂しいよね。ボクも変えたいから教えて~![カスタマイズ(外観)]
カテゴリーやタグの表示設定
「投稿・固定ページ」「一覧」での表示設定ができます。表示させたい場合はチェックを入れてください。
デザインをカスタマイズ
ではカテゴリーやタグのデザインを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 {
display;none;
}
これでカテゴリーのアイコンが非表示になります。
「 , 」を消す
カテゴリーを複数指定しているとカテゴリーの間に「 , 」(カンマ)が表示されます。カンマを消す(見えなくする)には以下のように指定します。
/*カンマを非表示*/
span.category {
color:#fff;
}
span.category内の文字色を背景色と同じにすれば「,」(カンマ)が見えなくなります。
タグ
タグもカテゴリーと同じようにスタイルを指定してください。タグのセレクタは以下のようにしてください。
アイコン .meta > .fa-tags:before
これでカテゴリーやタグのデザインを変えることができます。…きらりはデザインカスタマイズできた?
カテゴリーはできたー!タグをどうしようか考え中~!
そかそか。ユーザーにわかりやすくしてねw
その他のメタ情報
メタ情報の投稿日と更新日のセレクタも書いておきます。
アイコン .meta > .fa-clock-o:before
アイコン .meta > .fa-repeat:before
最後に
今回は記事や一覧で表示されるカテゴリーとタグのデザインの変え方について書いてみました。
デザインを変えると目を引きますよね?ユーザーにもわかりやすくなると思います。
カスタマイズする際の参考にしてください(^-^)
ディスカッション
コメント一覧
子テーマのスタイルシートでいいのですか?
CSSを記述する場合は、WordPress管理画面の左メニューの[Luxeritas]→[子テーマの編集]と進むと「スタイルシート」があるのでそこに記述してください。