IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

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

2024/06/13Luxeritas

【Luxeritas】グローバルナビのメニューにアイコンを付ける サムネイル 03
ナツメグチャンネル

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

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

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

メニューにアイコンを付ける 02
ナツメグチャンネル

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

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

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

作業の手順
  • アイコンを探す
  • ナビゲーションラベルにHTMLを書き込む

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

アイコンを探す

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

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

アイコンフォント
ナツメグチャンネル

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

アイコン一覧
ナツメグチャンネル

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

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

  • home
  • blog customize
  • links
  • privacy policy

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

アイコン検索
ナツメグチャンネル

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

homeを選択
ナツメグチャンネル

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

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

アイコンの挿入 02
ナツメグチャンネル

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は表示が高速なので
SEOは強いはずですが
デザインが気に入らなくて
他のテーマを使っている貴方。

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

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

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

回遊率を上げるカスタマイズ

もうダサくしないカスタマイズ

【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一
【Luxeritas】メタ情報のカテゴリーのカスタマイズ
【Luxeritas】記事一覧カスタマイズ【カード型】
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】ブログカードのカスタマイズ
【Luxeritas】デベロッパーツールの使い方【Google Chrome】
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー(グローバルナビ)とフッターの色を揃える
【Luxeritas】ページネーションのカスタマイズ
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】新着記事のカスタマイズ

Luxeritas