こんにちは、テンテンです。
今回は、有料テーマであるTHE THOR（ザ・トール）のグローバルメニューにアイコンを入れる方法について解説します。
【グローバルメニューにアイコンを入れる完成イメージ】
ブログ初心者の方でもとても簡単にできる設定なので、是非やってみましょう！
では早速、解説に進みます。
グローバルメニューにアイコンを入れる〜ステップ① headにコードを入力〜
グローバルメニューにアイコンを入れるステップとして、まずheadタグに下記のコードを入力しましょう。
こちらのプログラミングコードをコピー＆ペーストしますが、一点だけ先にバージョンの確認しておきましょう！
プログラミング未経験者の方でもわかりやすいように、確認するべきコードを赤線で引いております。
【バージョン確認コード】
・v5.11.1
今回、Font Awesomeから無料のアイコンを使います。古いバージョンのコードのままだと、アイコンが反映されない可能性がありますので、予めご確認ください！
では、まずFont Awesomeのバージョンを確認しましょう！
①Font Awesomeに飛びましょう！
赤枠で囲ったバージョンを確認しましょう！
今、現在はVersion 5.11.1なので、V5.11.1にしております。どうやら、頻繁にバージョンが更新されるようなので、しっかり、この点は確認しておきましょう！
もし、バージョンが更新されているようでしたら、先ほどの入力コードの赤線を引いた部分だけ書き換えをしてください。
では、早速、こちらのコードをペーストしていきます。
②「外観」→「カスタマイズ」に進みます。
③「基本設定[THE]」に進みます。
④「高度な設定」に進みます。
⑤先ほどのプログラミングコードをコピー＆ペーストします。
＜/head＞直上の自由入力エリアに先ほどのプロフラミングコードをペーストしましょう。
最後に忘れず保存（「公開」）してくださいね。
Font Awesomeから好きなアイコンを選びコピー＆ペースト〜ステップ②〜
次にFont Awesomeから好きなアイコンを選びましょう！今回は、無料のアイコンだけ使っていきますので、その方法で解説していきます。
すべて英語表記となっていますが、使い方自体はとてもシンプルです。
①「lcons」に進みます。
②「free」にチェックを入れましょう。
「free」にチェックを入れることで無料アイコンだけが検索表示がされます。
③検索窓にキーワードを入力します。
キーワードを入力する際、日本語では検索表示がされないので、必ず英語検索するようにしましょう。
④赤枠で囲ったプログラミングコードをコピーします。
今回は、ホームの無料アイコンのプログラミングコードをコピーしてますが、お好きなアイコンのプログラミングコードをコピーしてください。
プログラミングコードを貼り付けるする場所について
では、早速、コピーしたプログラミングコードをペーストしていきます。
①「外観」→「メニュー」に進みます。
②「編集するメニューを選択」で〜ヘッダーエリアを指定しましょう。
まず、先に編集するメニューを選択しましょう！
今回はグローバルメニューにアイコンを入れていきますので、ヘッダーエリアを選択しています。
次に「ナビゲーションラベル」に先ほどコピーしたプログラミングをペーストします。
<i class=”fas fa-home”></i>ホーム
このように、プラグラミングコードの後に文字を入れるとアイコンの横に文字が入ります。
最後に忘れずに、メニュー保存をしましょう。
これで、グローバルメニューにアイコンが入りました。念の為、しっかり確認しておきましょう。
さいごに
今回は、細かいサイトデザインについての解説となりましたが、サイトのデザインや見やすさをこだわりたい人はアイコンの設定がオススメです。
その他、THE THORでサイトデザインにこだわりたい人は以下も設定しておくと良いでしょう。
こんにちは、テンテンです。 今回は、THE THOR(ザ・トール)で見やすいメニューパネルを作る方法を解説します。 【THE THORメニューパネルの完成イメージ】 &nbs[…]
こんにちは、テンテンです。 今回はTHE THOR（ザ・トール）でピックアップ記事を設定する方法を解説していきます。 ピックアップ記事の完成例はこちらです。 […]
最後まで読んでいただき、ありがとうございました。