wordpress

【3分で超簡単!】WordPressのグローバルメニューにアイコンを表示する方法!

ブログやサイトを見ていると、メニューにアイコンがあるのを皆さんは見たことはありますか?
アイコンがブログやサイトにあるだけでかなり見やすくなります。

自分のこのブログにも、グローバルメニューにアイコンが導入されております。
こんな感じ!

では、早速WordPressをお使いのユーザーの皆さんにグローバルメニューにアイコンを表示する方法を今日は紹介していきたいと思います。
WordPressを触り始めて間もない方でもコピペで簡単にできるので安心して下さい!

こんな人にオススメの記事
・Webサイトをもっと見やすくしたい人!
・メニューにアイコンをちょうど入れたいと思っていた人!

WordPressサイトのグローバルメニューにアイコン表示する方法!【超簡単3ステップ!】

WordPressを触り出した方からしたら、Headタグとか難しい用語が出てくるかもしれませんが気にしないで下さい!

全部ここらへんは画像を見ながら、コピペをするだけで簡単にグローバルメニューにアイコンを表示させることができますので以下の手順を辿ってください。

グローバルメニューにアイコン表示方法

1. Headタグにコードをコピペして入れよう!(下準備)

2. Font Awesomeから使用したいアイコンを選ぶ

3. 選んだアイコンを自分のサイトにコピペするだけ!

Font Awesomeという無料サービスを使用するよ

今回使用する外部サイトは、「Font Awesome」というサービスを使用します。Font Awesomeとは、Webフォント機能を使ってテキスト文字のアイコンになります。
つまりWeb上で表示する「絵文字」みたいなものです!
色も変えられるし、大きさも変えられる無料のスグレモノツールなのです。



これら全部、FontAwesomeから持ってきたものです。

1. (下準備)Headタグにコードをコピペして入れよう!

Font Awesomeの「Start a New Project」のページへ行きます。
そこから下記のコードをコピーしましょう。

上記のコードは「Ver.5.8.2」のコードです。Ver.が古くなると、新しく追加されたフォント(アイコン)が使えません。

WordPressのテーマ「header.php」に上記のタグを貼り付けよう!
そして、自分のWordpressサイトの管理画面を開きましょう。

1. WordPressのダッシュボードより「外観」>「テーマの編集」を選択

2. テーマファイルの中の「header.php」を選択

3. テーマヘッダー(header.php)の~内に先程のコード貼り付け

これにて下準備は終了です。あなたのWebサイトやブログでFont Awesomeを使用できる準備は整いました。

2. Font Awesomeというサイトから使用したいアイコンを選ぶ

次に、実際にFontAwesomeのサイトへ行って、あなたが使用したいアイコンを選んでいきましょう。

1. Font Awesomeにアクセスする

2. 使用したいアイコンを検索(英語サイトなので英語で)

3. 使用したいアイコンを選択

4. アイコンのコード<i…>~</i>をコピーする

これでコピーが完了しました。あとは、WordPressの画面の方に移って、このコードを貼り付ければ表示されます。

3. 選んだアイコンを自分のサイトにコピペするだけ!

あと、もう一息です!ここからは、自分のサイトへ行って貼り付けるだけです。

1. WordPressのダッシュボードより「外観」>「メニュー」を選択

2. 「ナビゲーションラベル」のメニュー名前の前に、アイコンのコード貼り付ける

これにて、グローバルメニューにアイコンが追加されたか確認してみましょう。

これでグローバルメニューにアイコンが追加されているかと思います。

他の名前にもアイコンを付けたい場合は、2と3の作業を繰り返せば大丈夫です!

WordPressのグローバルメニューにアイコンを追加するプラグイン使用は避けよう

WordPressのグローバルメニューや至るところに簡単にアイコンを挿入することができるプラグインも出回っていますが、あまり使用をオススメすることができません。

理由は以下です

・Webサイトの動作を重くする可能性がある

・プラグイン同士の相性が悪い場合、サイトが落ちてしまう

今回紹介したこのFont Awesomeはプラグインではありません。

なぜなら、CDNというものを使用しているので、効率的に素早くアイコンを表示してくれるのです。

CDNとは「Content Delivery Network」の略です。同一のコンテンツを、 多くの配布先、例えば多くのユーザーの端末に効率的に配布するために使われる仕組みです。

https://www.nic.ad.jp/ja/basics/terms/cdn.html

アイコンを使うプラグインはWebサイトを重くする可能性がございます。

今回、紹介した手順でのFont Awesomeの導入をオススメ致します。

まとめ:Font Awesomeで簡単にWebサイトが見栄えよくなる

Font Awesomeを使用することで、視覚的にあなたのWebサイトを訴えてあげることができます。

特にグローバルメニューなんかは、ユーザーがあなたのWebサイトに訪れた時に真っ先に見るものなので「アイコン」を付けるなどの工夫が第一印象に繋がります。

WordPressで作ったサイトやブログのメニューにアイコンを付け足す方法をおさらいします。

グローバルメニューにアイコン表示方法

1. Headタグにコードをコピペして入れよう!(下準備)

2. Font Awesomeから使用したいアイコンを選ぶ

3. 選んだアイコンを自分のサイトにコピペするだけ!

ぜひ、これを機にあなたのWordPressで作ったサイトやブログのメニューにアイコンを付けてみて下さい!

ABOUT ME
山田 裕太(やまちゃん)
現在、東京とセブを行き来する大学4年生のwebデザイナー。高校時代に情報科に所属していたことから、困っている人をwebの力で助けたいと思いながら、大学2年次セブ島へ留学したり、大学4年時ではスタディツアーを大学生向けに運営したり、かき氷店の出店を見据えたかき氷販売などをセブ島にてする。20代の若者達に新しい生き方に挑戦できるロールモデルとして「Yamalog.online」を運営。
関連してよく読まれている記事
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus