訪問ありがとうございます!ゆっくりご覧ください!

【THE THOR】標準アイコンをグローバルメニューに表示する方法【コード不要】

 

 

グローバルメニューにカテゴリーなどを表示する際、文字だけだと物足りないと感じる方は多いと思います。

アイコンを表示するとサイトのイメージが大きく変わります。

Before



After



※フォントサイズも変えていますがこれも簡単にできます。

 

初心者の私がThe Thorの標準搭載のアイコンを表示させた方法について説明していきます。

 

 

 

Webで調べてもFont Awesomeを使う方法しか出てこない

いろいろとアイコンの表示方法を調べましたが、Font Awesomeのwebサービスを使う方法しか見つかりませんでした。

これにより次のような問題が考えられます。

 

  1. アカウント登録がめんどくさい
  2. 初心者はheadへのコード追記がよくわからない
  3. 手順通りやってもうまく表示できない場合がある
  4. Font Awesomeのバージョンアップでうまくアイコンを参照できなくなる(表示されなくなる)可能性がある

 

私は調べた通りやっても表示できませんでした。
すでにGoogleAdSense用のコードをheadに入力?してしまっていたのが原因なのかなと思っています

 

手順通りやっても無理ならお手上げですし、出来たとしても定期的に手直しが必要なのはめんどくさいです。

そこで、CSSもHTMLもさっぱりな私は考えました。

 

Font Awesomeからアイコンを読み込めるなら、The Thorの標準搭載のアイコンも読み込むんじゃないか?

と。

やってみたら実際出来たので方法を書いていきます。

標準搭載のアイコンをメニューに表示させる設定方法

The Thorには最初から498個のアイコンが搭載されています。

今回の方法は標準搭載のアイコンを使うのでコードの追記が不要です。

 

Font Awesomeのアイコンに比べると少ないですが、498個もあるのでほとんどの用途には対応できるかと思います。

 

設定方法は下記の通りです。

 

①記事作成画面でアイコンオプションを選択



※下書きでも何でもいいです

 

②好きなアイコンのコードを探してコピー



※私のスマホ環境からだと左のアイコンカテゴリーが表示されませんでした。すべてのアイコンを確認する場合はタブレットやPCからがオススメです。

 

③アイコンを挿入する



 

④アイコンの後ろに表示したい文字を入力し、テキスト表示にする



【補足】ここでフォントサイズや太字設定をした場合もそのまま反映させることができます!

④コードをコピー



 

⑤メニュー編集画面で貼り付ける

外観→カスタマイズ→メニューとすすみ、アイコンを表示したい項目に先ほどのコードを入力



これでOKです!

 

アイコンのリンク名が分かっている方はこちらのコードの赤字部分を変更して貼り付けるだけでも対応可能です。

<p class=”アイコン名“>表示名</p>

 

まとめ

今回のアイコン設定方法は、手間がかからず初心者の方には非常に良い方法です。

サイトのデザインが物足りないとお悩みの方はぜひ試してみてください!

 

 

以上、The Thorの標準搭載アイコンをメニューに表示させる方法でした!

それではまたのご愛読、よろしくお願いいたします!