<>

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

Webサイトでは ホーム画面を表す家の形のアイコンだったり フォルダのアイコンや矢印など、
いろいろな場所でアイコンフォントが使われています。

Shopサイトなどでは「 買い物かご」のカートなども このアイコンフォントを使って表示されています。
見た目にも分かりやすく、サイトではなくてはならないものですよね。

ルクセリタスではWebサイト画面で使用するアイコンフォントの設定というのがあり
2種類のアイコンフォント、Google icon と FontAwesome icon から選択できます。

この違いは微妙なものかもしれませんが ちょっと比較してみます。

また、メタタグなど一部のアイコンはデフォルトの状態は黒色ですので このままでは少し寂しいです。

今回は この2種類のアイコンの比較と FontAwesomeのアイコンを使って
サイトのイメージに合うような色にカスタマイズするCSSをご紹介していきます。

アイコンフォントの設定

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

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

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

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

Google icon と FontAwesome icon を見比べてみましたが
フォルダやタグのアイコンに微妙な差で 好みで選ぶ、といった感じだと思います。

Google  Font と Font Awesome それぞれのアイコンは アイコン一覧のリンクから
アイコンフォントのページへ移動できますので一度見比べてみるのもいいのではないでしょうか?

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

このアイコンの色をサイトのイメージに合うようにカスタマイズしていきますが
外観カスタマイズから変更できる部分もありますので それ以外のカスタマイズをCSS追加指定していきます。

CSSコードは最後にまとめて表示していますが ジャンプする場合はこちら→カスタマイズCSSコード

1. パンくずリンク

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

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

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

2. メタ情報

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

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

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

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

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

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

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

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

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

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

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

カスタマイズCSSコード

必要なコードだけコピーしてお使いください。

外観カスタマイズについてはこちらでまとめていますので参考にしてみてください。
サイト画面の各名称と ルクセリタスの外観カスタマイズの設定|WordPress

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