<>

【ルクセリタス】アイコンフォント設定と色のカスタマイズ|WordPress

ルクセリタスではWebサイト画面で使用するアイコンフォントの設定というのがあります。

Webサイトのいろいろな場所で使用されているアイコンフォント。見た目にも分かりやすく、サイトではなくてはならないものですよね。

ルクセリタスのアイコンは デフォルトでは黒に設定されていていますのでこのままでは少し寂しいです。

アイコンフォントは2種類、Google iconとFontAwesome icon で好みで設定できますが
今回は FontAwesomeでのアイコンの色をサイトのイメージに合うようにカスタマイズするCSSをご紹介していきます。

アイコンフォントの設定

Luxeritasメニューにあります カスタマイズ の中にアイコンフォントの設定があります。

Luxeritasカスタマイズ項目 - アイコンフォントの設定画面

アイコンフォントは パンくずリンク・メタ情報などで文字に合わせて表示されることで
ユーザーに分かりやすく、サイトを見やすくする効果があるのではないでしょうか?

アイコンフォントのイメージ比較- Google  Font

アイコンフォントのイメージ比較 - FontAwesome

Google iconとFontAwesome icon、フォルダやタグのアイコンに微妙な差がありますね。

あとは好みで選ぶ、といった感じだと思いますが、いかがでしょうか?

詳しくはアイコン一覧で見比べてみてください。
Google Font アイコン一覧
FontAwesome5 アイコン一覧

アイコンの色をカスタマイズ

このアイコンの色をサイトのイメージに合うようにカスタマイズしたいところですよね?

外観カスタマイズで変更したい部分だけ CSS追加で記述していきます。

パンくずリンク

パンくずリンクは 今、どのカテゴリの記事が表示されているのかを
分かりやすく表示するための記事の上部にあるリストになります。

サイト内で使用するアイコンイメージ - パンくずリンクとメタ情報

パンくずリンクは外観カスタマイズのパンくずリンク項目に 文字色の設定がありますが
アイコンと文字の一括の色設定になりますので分けて色を設定したい場合、追加のCSSが必要になります。

メタ情報

メタ情報は記事の上下、あるいは 表示 / 非表示を自由に設定できる項目で
これらは 外観カスタマイズから設定できる項目です。

パンくずリンクとメタ情報を CSSで一括指定

この2つの項目を同じ色の設定にする場合、ひとつにまとめて表示することができます。

prev & next の ナビ色・ホバー色

こちらも外観カスタマイズで表示/非表示の設定ができる項目ですが
記事の下に 前の記事 ( prev ) → 次の記事 ( next ) に移動してもらいやすくするためのリンクになります。

サイト内で使用するアイコンイメージ - ページ移動(prev)のアイコン

矢印をリンクに合わせた時に 色が変わる設定を ホバー といいます。

関連記事のアイコンと文字のカスタマイズ

関連記事は同じカテゴリやタグから自動的に設定されるもので 記事やナビの下に設置されています。

サイト内で使用するアイコンイメージ - 関連記事

ここでは アイコンと文字 、リンク色と トータルで見る方がバランスがいいので 合わせてカスタマイズしていきます。

まとめ

サイトのデザインを左右するアイコンの色をカスタマイズする CSSについてのまとめ記事でした。

パンくずリンクの文字色の指定は 外観カスタマイズの パンくずリンク設定から
そのほか、外観カスタマイズと合わせてカスタマイズしてみてください!

サイト画面の各名称と ルクセリタスの外観カスタマイズの設定|WordPress

色見本はこちら → WEB色見本 原色大辞典 – HTMLカラーコード