【Luxeritas】マテリアルアイコンを使うための設定
![](https://kirari-yums.net/wp-content/uploads/2021/08/6BD148E0-DFD9-47D8-BAE7-8DA3EF8D22B0-e1628307382820.jpeg)
WordPressテーマ Luxeritas(ルクセリタス) バージョン3.18.0よりマテリアルアイコンが標準搭載されました!
マテリアルアイコンはGoogleが提供しているWebアイコンフォントです。
Luxeritasにマテリアルアイコンが搭載されたので今回はマテリアルアイコンを使うための設定方法を紹介します。
アイコンフォントの設定
ここに文章WordPress管理画面から[Luxeritas]→[カスタマイズ]と進み、上のアイコンフォントタブをクリックします。
アイコンフォントの設定画面が開いたらアイコンフォントの設定をします。
マテリアルアイコンの設定
マテリアルアイコンには5つのタイプのアイコンがあります。Luxeritasのマテリアルアイコンの設定で使いたいタイプにチェックを入れると使えるようになります。
- Outline(アウトライン)
- Filled(反転)
- Round(丸め)
- Sharp(シャープ)
- Two tone(ツートーン)
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
結耶。設定には4つしかないよ(^^;
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
ちゃんと見ないとだめでしょ!
1番上の選択肢にはMaterial Icons ( Outlined + Filled ) 」と書いてあるんだよ。
つまり、1番上にチェックを入れれば「Outline」と「Filled」の2つが使えるんだよ。
マテリアルアイコンの設定はこれで終わりです。設定したら変更を保存をクリックして保存してください。
アイコンの使い方
マテリアルアイコンのタイプや使い方は以下の記事をご覧下さい。
マテリアルアイコンとFont Awesome
アイコンフォントの設定画面を見るとFont Awesomeの設定もあります。
Luxeritasにマテリアルアイコンが標準搭載された理由は「サイトをより高速化させるため」です。
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
Font Awesomeが有料化の方向に進んでるからじゃないの?
![](https://kirari-yums.net/wp-content/uploads/2021/07/418D8806-C4AC-4FF0-9C41-305B726CCBD7.jpeg)
あはは。私も最初はそう思ったけど、開発者さんのサイトを見ると「高速化」のためだって!w
マテリアルアイコンはFont Awesomeより軽量なのでFont Awesomeからマテリアルアイコンに乗り換えればサイトの表示が早くなります。(速くするためには設定でFont Awesomeのチェックを外してください。)
ですが、マテリアルアイコンに乗り換えをすると表示されなくなるアイコンがあります。
![](https://kirari-yums.net/wp-content/uploads/2020/08/C3450E9D-E06C-4F8A-8C26-19DD7C1CF5CB-e1596231579836.png)
あっ!そっか~。¥ボクも結耶も今まで記事の中とかでFont Awesomeのアイコン使ってるもん笑どれが表示されなくなるってことだよね!
![](https://kirari-yums.net/wp-content/uploads/2021/07/418D8806-C4AC-4FF0-9C41-305B726CCBD7.jpeg)
その通り!マテリアルアイコンに乗り換えるにはFont Awesomeのアイコンを変更しなきゃいけない。
それは大変な作業だから私はしばらく併用だよ(^^;
マテリアルアイコンはサイトの高速化のためにバージョン3.18.0から実装されました。しかし、今まで記事などにHTMLやCSSでFont Awesomeを使っている人は多いと思います。
マテリアルアイコンのみ使うか、今まで通りFont Awesomeのみ使うか、両方使うかは「アイコンフォントの設定」で選択できるのでそれぞれのサイトの事情に合わせて設定してください。
![](https://kirari-yums.net/wp-content/uploads/2021/07/CFEBF1C6-B460-4DF8-96CA-4191DFC1165C.jpeg)
テーマで使われているアイコンはマテリアルアイコンのみにシても表示されるようになっているので、Font Awesomeは使って居ない方はマテリアルアイコンのみにしても問題ないと思います。
以上です。
ディスカッション
コメント一覧
まだ、コメントがありません