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

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

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

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

詳細はこちら

amazonでたった1コインで手に入れる
  • ブログ型サイト
  • 企業ブランディング・集客ページ
  • 飲食店や医院用サイト
  • 各種LP制作

・・・などなど
ワードプレスを使ったサイト制作や
コーディングのみも承ります。

お気軽にお問い合わせください。

※本サイトで紹介する商品は提携先アフィリエイトリンク付き(PR)の場合がございます。

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なので、ご自分のサイトの目的に応じて選定すればよいでしょう。

また、Luxeritasのおすすめ機能を次の記事でまとめているので参考にしてくださいね。

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

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

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