【さとぴデザイン】です。このサイトの絵や画像は全部パワポで作っています!

THE THORのメニューにアイコンを付けてみませんか?

メニューにアイコンを付ける

 

Masayoshi6THE THORのメニューにアイコンを付ける方法を紹介します。

アイコンは、有名な【Font Awesome】ではなく、Wordpressに入っている【Dashicons】を使います。

その理由もお知らせします。

◆この記事でわかること
THE THORのメニューにアイコンを付ける方法

 

なぜ【Dashicons】なのか

Masayoshiポイント2
Masayoshi
ここでは、Wordpressに入っているDashiconsを使います。
新人ちゃん2
新人ちゃん
なぜ有名なFont Awesomeを使わないのですか?
Masayoshiポイント2
Masayoshi
Pagespeed Insightsで読込みが遅い原因として指摘されてしまうからです。
Font Awesomeは登録が必要なので、その後何度もメールがくるのも鬱陶しいですね。
詳しくは、以下の記事を参考にして下さい。
関連記事

  THE THORの番号なしリストは、なぜか【中抜きの丸】です。 普通に塗りつぶした丸にしてもらえれば、何の不満も無いのですが・・・ この【中抜き丸】を別のアイコンに変える方法が、ググると出てきます。 […]

Dashiconsでカスタマイズ

 

アイコンを付けられる部分はココ

THE THORでアイコンを付けられるメニューは、外観⇒メニューで編集される部分になります。

具体的には、

  • ページ一番上のメニュー(このサイトは折りたたみ式)
  • ページ一番下のメニュー(フッター部)

右上のメニューボタンを押すと、

トップメニュー1

メニューが右から出てきます。

そこにアイコンです。

トップメニュー2

ページ一番下のフッターメニューは、こんな感じです。

フッターメニュー

アイコンの付け方

Masayoshiポイント2
Masayoshi
では、アイコンの付け方です。

下記リンクから、Dashiconsのページに行きます。

WordPress Developer Resources

Dashicons is the official icon font of the WordPress admin a…

好みのアイコンを選びます。

ここでは、手紙マークを例にします。

マーク横の【HTMLをコピーする】をクリックします。

dashicons画面

すると、ポップアップが出ます。

表示されているコードを全て選択して、右クリックコピー。

HTMLをコピー

WordPressの編集画面に戻り、外観⇒メニューでアイコンを入れたいメニューを選択。

メニューの文字、ここでは【お問い合わせ】の前に貼り付けます。

WPのメニューに貼り付け

コードと文字の間は、半角スペースを入れた方が見た目が良いです。

半角スペース空ける

これで、保存ボタンを押すと、反映されます。

スマホ表示では、こんな感じになります。

スマホ表示

新人ちゃん3
新人ちゃん
意外と簡単なんですね~

まとめ

Masayoshi6THE THORのメニューにアイコンを付ける方法を紹介しました。

要点をまとめます。

①DashiconsのHPで好みのアイコンを選ぶ
②HTMLをクリックして、コピー
③メニュー文字の前に貼り付け(半角空ける)
とても簡単ですね。
あまり付けすぎると、うるさい感じになるので、バランスを見てほどほどにしましょう。
細かい部分ですが、アイコンが付くと、ページの完成度が上がる感じがしますね。
ぜひ、試して見てください。
最後まで御覧いただき、ありがとうございました。