このサイトで使用しているワードプレステーマ THE THOR の グローバルメニュー に アイコン を追加しました。
THE THOR の詳しい情報は公式サイトをご覧ください。
グローバルメニューはページ上部（ヘッダー部分）に表示されるメニューです。標準状態は文字だけの表示なのでアイコンを追加してさりげなく飾り付け。
機能的な変化は何もありませんので見た目のカスタマイズになります。出来上がりは以下のようになります。
※カスタマイズは自己責任でお願いします。
THE THOR グローバルメニューにアイコンを追加する方法
アイコンの追加は簡単です。コードを一文追加するだけ。
追加するコードは以下の通りです。
<i class="icon-xxxxxxxx"></i>
上記コードを追加する場所は、ワードプレスの機能にあるメニューです。
メニューの設定場所は以下の通り。
操作手順（2パターン）
・外観 → メニュー
・外観 → カスタマイズ → メニュー
・外観 → メニュー
・外観 → カスタマイズ → メニュー
追加するコードについて
さきほどのコードはアイコンを表示するだけの最低限のコードです。
色やサイズ、文字間などを変更したい場合はさらにコードを追加します。
<i class="icon-xxxxxxxx" style="color:#xxxxxx; font-size:xx; margin-right:xxx;"></i>
カラー、サイズ、文字間の順で設定が並んでいます。xxxxの部分はサイトに合わせ調整してください。
アイコンのクラスは記事を書くときと同様にアイコンオプションで確認。
グローバルメニューにアイコンを追加したサンプル
サンプル画像
サンプル画像で使用したコードは以下の通りです。一番後ろについている文字がメニュー項目のタイトルになります。
<i class=”icon-pacman” style=”color:#ffdc00; font-size:130%; margin-right:0.3rem;”></i>新着記事
<i class=”icon-hammer” style=”color:#00a1e9; font-size:130%; margin-right:0.3rem;”></i>The Thor
<i class=”icon-key2″ style=”color:#bbdbf3; font-size:130%; margin-right:0.3rem;”></i>LittleCub
<i class=”icon-glass2″ style=”color:#ee7800; font-size:130%; margin-right:0.3rem;”></i>Design
<i class=”icon-spinner2″ style=”color:#88bfbf; font-size:130%; margin-right:0.3rem;”></i>Echo
<i class=”icon-display” style=”color:#f8f4e6; font-size:130%; margin-right:0.3rem;”></i>Mac
<i class=”icon-tag” style=”color:#fff3b8; font-size:130%; margin-right:0.3rem;”></i>Fashion
<i class=”icon-book” style=”color:#fad09e; font-size:130%; margin-right:0.3rem;”></i>Diary
実際に設定したサンプル
以上でグローバルメニューにアイコンが設置できました。ぱっと見の第一印象が上がりましたね。
おつかれさまでした。
ヘッダー関連では検索窓のカスタマイズも個人的にはお気に入りでオススメです。
おすすめ検索窓のカスタマイズ
※カスタマイズは自己責任でお願いします。
