ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

Luxeritas(ルクセリタス)でマテリアルアイコンが標準化!Font Awesomeアイコンが表示されない?

ワードプレスの無料人気テーマLuxeritas(ルクセリタス)の3.18.0リリースに伴い、標準アイコンがGoogleマテリアルアイコンに変更となりました。

従来はFont Awesomeが標準でしたので、手動でカスタマイズしている部分はアイコンが表示されない、といった不具合が発生します

そこで本記事では次の内容を紹介します。

本記事でわかること

引き続きFont Awesomeを使用継続したい場合の設定方法
Font AwesomeからGoogleマテリアルアイコンへ変更する方法
(マテリアルアイコンのCSS設定方法)

Googleマテリアルアイコンとは

Googleが無料で提供するアイコンサービスです。

Google Fontsの一種として提供されていますので、CSSで色やフォントサイズ・フォント太さなどを調整することができます。

アイコンというとFont Awesomeが定番ですが、
 ・version4→5と進化と同時に少しだけ重くなった
 ・使用開始には登録が必要
 ・version6ではサブスクに移行する

といった事情から、今後はGoogleマテリアルアイコンを使うことが増えそうですね。

Luxeritasのversion3.18.0からマテリアルアイコンが標準採用

作者のるなさんによると、高速表示をモットーとするLuxeritasでは、Font Awesomeを無効化しGoogleマテリアルアイコンを標準アイコンに変更することで、より高速化を実現したとのこと。

この変更により、テーマLuxeritasで自動的に表示されるアイコンは、Googleマテリアルアイコンで表示されることとなりました。

Font Awesome無効化により表示されないアイコンに注意!

しかし、カスタムCSSなどを使って手動でFont Awesomeアイコンを表示していた場合は、表示されなくなるので注意が必要です。

例えば、このウェブチルサイトでも見出しの頭にはFont Awesomeでアイコン表示させていましたが、バージョン3.18.0にアップデートすると表示されなくなりました。

見出しのアイコンが非表示となる例(見出し2)

アイコンが消えた場合の対処方法

対処方法としては大きく2つあります。

  1. Font Awesomeを有効化して引き続きFont Awsomeアイコンを表示させる
  2. Font Awesomeの表示設定をやめてマテリアルアイコン設定とする

①の場合は、若干ですが表示速度が遅くなります。といっても、従来この方法でWeb表示させてきたわけですから、気にならないと思いますが。

②はCSSを書き換えるということなので手間が発生します
多くのアイコン表示を自分でしていた場合は、それだけの手間が必要となります。

どちらを選ぶかは好みの問題です。

私はせっかくなので②の方法を取りましたが、以下①②の両方の設定方法を紹介します。

方法①:引き続きFont Awesomeで表示

ダッシュボードメニュー Luxeritas>カスタマイズ の”アイコンフォント”タブを開きます。
(バージョン3.18.0以前では“Font Awesome"タブだったページです。)

アイコンフォントの設定画面

上記のように、デフォルトではMaterial iconsにはチェックが入っていますが、Font Awesomeのチェックが外れています。

このFont Awesomeにチェックを入れれば、消えていたアイコンが再び表示されるようになります。
(Font Awesome4か5かは使用状況に応じて自分で選んでください。)

Font Awesomeにチェックを入れて再表示

マテリアルアイコンとFont Awesomeの併用をするかどうか

Font Awesomeにチェックをいれる場合、さらに選択肢は2つの分かれます。

  1. Material iconsとFont Awesomeの両方にチェックを入れる
    →テーマで自動表示アイコンはMaterial icons、Font Awesome手動設定したアイコンはFont Awesomeで表示される。
  2. Material iconsのチェックは外してFont Awesomeのみにチェックを入れる
    →すべてのアイコンが従来通りFont Awesomeで表示される

①は潤沢に両方のアイコンを使用するので、一番表示が遅くなります。

したがって、Font Awesomeの使用を継続する場合は②のようにMaterial iconsのチェックは外すのがよいでしょう。

方法②:Font Awesomeをやめてマテリアルアイコンへ変更する

この場合は、Font Awesomeアイコン表示をさせていたCSSをマテリアルアイコン表示のCSSに書き換えることとなります。

具体例として先にあげたウェブチルサイトの投稿用見出し2の場合を紹介していきましょう。

1.もともとFont Awsesome表示していたアイコン

元々、見出し2はFont AwesomeのCSS用コード”f044”のアイコンを使用していました。

元々のh2アイコン表示

CSSで”f044”を指定して部分を、後ほどマテリアルアイコンの新しいCSSに置き替えます

2.マテリアルアイコンのコードをCSS取得

マテリアルアイコンの一覧表から、新しいアイコンを選びます。

今回は次のアイコンを選んでクリックします。

マテリアルアイコンを選定してクリックする

次の画面で、Code pointからCSS用コード”e3c9”をコピーします(赤字表示の部分)。

アイコン用CSSをコピー

緑字は今回関係ないので使いませんが、一応参考情報として記載しておきました。
CSSでなくHTMLとして表示させる場合や、ダウンロードしてサーバーにアップロードする方法も使えるということです。

3.取得したコードを使ってCSSを書き換え

CSSを以下のように書き換えました。

Font Awesome設定のCSS

.single .post h2 {
	color :#2B2C42;
	position: relative;
	background: #EEF9FF;
	padding: 0.25em 0.5em;
	border-bottom: double 0.3em #91C4C7;
	border-top: double 0.3em #91C4C7;
	border-left: solid 2em #91C4C7;
}

.single .post h2:before {
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	content: "\f044";
	position: absolute;
	padding: 0em;
	color: #2B2C42;
	font-weight: 900;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

マテリアルアイコン設定のCSS

.single .post h2 {
	color :#2B2C42;
	position: relative;
	background: #EEF9FF;
	padding: 0.25em 0.5em;
	border-bottom: double 0.3em #91C4C7;
	border-top: double 0.3em #91C4C7;
	border-left: solid 2em #91C4C7;
}

.single .post h2:before {
	display: inline-block;
	font-family: "Material Icons";
	content: "\e3c9";
	position: absolute;
	padding: 0em;
	color: #2B2C42;
	left: -1.35em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

変更した要点を赤字で表記してみました。
アイコン変更は疑似要素:beforeへ適用したCSSを書き換えることとなります。

書き換えたCSSの要点
変更ポイント

・font-familyをMaterial Iconsに変更
・contentを取得したe3c9に変更
・font-weightはFont Awesomeでは必須でしたがGoogle Iconでは必須でないので削除。

以上で、見出しは次のように変更となりました。

変更前後の見出し比較

同様の要領で、Font Awesomeで設定していたアイコンを全てマテリアルアイコンに変更します。

最後には必ずLuxeritasのFont Awesomeのチェックは外して無効化しておきましょう

まとめ

Luxeritasのバージョン3.18.0から標準アイコンがGoogleマテリアルアイコンとなりました。

引き続きFont Awesomeを使う方法、マテリアルアイコンへの変更方法の2つを紹介しましたが、現在のところはどちらでも構いません。

私はGoogleマテリアルアイコンへ切り換えましたが、有料で多くの種類を使えるのはFont Awesomeなので、ご自分のサイトの目的に応じて選定すればよいでしょう。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる