THE THOR グローバルメニュー に アイコン を追加

このサイトで使用しているワードプレステーマ 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の部分はサイトに合わせ調整してください。

 

アイコンのクラスは記事を書くときと同様にアイコンオプションで確認。

THE THOR に使用されているアイコンのUnicodeを含むコード一覧を掲載しているサイトがあるのでありがたく利用させてもらうのも◎(当サイトも作成中)

参考外部サイトTHE THOR アイコン ユニコード一覧

 

グローバルメニューにアイコンを追加したサンプル

グローバルメニューにアイコンを追加した出来上がりイメージサンプル画像

 

サンプル画像で使用したコードは以下の通りです。一番後ろについている文字がメニュー項目のタイトルになります。

<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

メニュー アイコン 挿入実際に設定したサンプル

 

 

以上でグローバルメニューにアイコンが設置できました。ぱっと見の第一印象が上がりましたね。

おつかれさまでした。

ヘッダー関連では検索窓のカスタマイズも個人的にはお気に入りでオススメです。

おすすめ検索窓のカスタマイズ

※カスタマイズは自己責任でお願いします。

>