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

2020-07-192023-02-23

当ページのリンクには広告が含まれています。

このサイトで使用しているワードプレステーマ 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

LittleCub

Design

Echo

Mac

Fashion

Diary

実際に設定したサンプル

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

おつかれさまでした。

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

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

この記事が気に入ったら
フォローしてね！

Follow @karaagebow1214

よかったらシェアしてね！

ブログテーマ選びについて

この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。

THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る
THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る
自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト