【Luxeritas】グローバルナビのメニューにアイコンを付ける

2023/07/222024/09/04Luxeritas

ナツメグ

ナツメグです

もうダサくしないカスタマイズ第22回。

Luxeritas（ルクセリタス）のカスタマイズは
今回で最後になります。

グローバルナビのメニューはここ。

必ずしもアイコンが必要という訳では
ないのですが
ちょっとしたワンポイントの
お洒落です。

ソックスにワンポイントで
リボンを付けるような物ですね。

Contents

1. 【Luxeritas】グローバルナビのメニューにアイコンを付ける
- 1.1. アイコンを探す
- 1.2. ナビゲーションラベルにHTMLを書き込む

【Luxeritas】グローバルナビのメニューにアイコンを付ける

作業の手順

アイコンを探す
ナビゲーションラベルにHTMLを書き込む

早速やって行きましょう。

アイコンを探す

マテリアルアイコンを使います。

WordPressの管理画面から
Luxeritas＞カスタマイズ＞アイコンフォント。

アイコン一覧をクリックします。

アイコンがズラーっと並んでいます。

欲しいアイコンはこの4つ。

home
blog customize
links
privacy policy

スクロールして
どんなアイコンがあるのか見てみるのも
良いのですが
今回は検索窓で検索します。

検索窓に「home」と打ち込みました。

いっぱい出て来ますが
オーソドックスにHomeを選択。

クリックすると右側に
コードが表示されます。

Inserting the iconの
homeの部分が必要になるので
右側のコピーボタンを押して
クリップボードにコードをコピーします。

メモ帳などにペーストして
残しておいて下さい。

ナビゲーションラベルにHTMLを書き込む

WordPressの管理画面から
外観＞メニュー。

アイコンを挿入したいメニューを選択して
ナビゲーションラベルにHTMLを書き込みます。

<i class="material-icons"> home </i> home

このように書き込みました。

<i class="material-icons">の右側のhomeが
Inserting the iconのコードです。

一番右のhomeは
メニューに表示される文字なので
左側に半角スペースを入れると
アイコンと文字が離れて表示されます。

アイコン一覧のhomeと
実際に表示されるhomeのアイコンの形が
若干違いますが
気にしないで下さい。

同様に他の3つにもアイコンを挿入しました。

完成。

どのアイコンを選ぶのが正解なのか
分からないので適当です。

「blog customize」のアイコンは
「customize」で検索。

「privacy policy」のアイコンは
「policy」で検索すると
同じアイコンが見付かると
思います。

今回はこちらのブログを
参考にさせていただきました。

S字フック的ココロさま

【Luxeritas】ランキング表示をマテリアルアイコンで簡単に作る方法が超絶便利！ | 年

【Luxeritas】ランキング表示をマテリアルアイコンで簡単に作る方法が超絶便利！ | 年金を当てにせず活 ...

https://sji-heart.com/luxeritas-ranking/

ありがとうございました。

Luxeritas
もうダサくしないカスタマイズは終了です。

Luxeritasは表示が高速なので
SEOは強いはずですが
デザインが気に入らなくて
他のテーマを使っている貴方。

「もうダサくしないカスタマイズ」の記事を見て
Luxeritasのカスタマイズをすれば
少なくても当ブログ『ナツメグチャンネル』
ぐらいの見た目にはなります。

表示が遅くSEOに弱いテーマで
PVが少ない事に悩むより
LuxeritasでPVを
稼いでみて下さい。

Luxeritasで回遊率を上げる
お薦めのカスタマイズはこちら。