カスタマイズとか、そう言った類のことは、パソコンに弱いこともあり、なかなかやらないのですが、1日1歩！
というわけで、今回はグローバルメニューにフォトアイコンをつける方法を解説していきます。
アイコンとは
言うまでもない方もいらっしゃるかもしれませんが、念のために解説しておきます。
文字ではなくて、いわゆるマークを見たことがあると思います。
パソコンには標準で入ってはいないものも、自分のサーバーやCDNを通して表示されるのがアイコンのようです。
こんなんや
こんなん
アイコンをつけるメリット
アイコンをつけるメリットは字ではなくて、直感で読まれる面にあります。
例えばですが、
僕がオススメする漫画100冊
僕がオススメする漫画100冊
だとしたら直感でどちらが「本や漫画」のことについて書いてあるか分かるでしょうか。
僕ちゃん
という僕の個人的な感想は置いておいて。笑
エビデンスがないからなんとも言えませんが、現代のデザインはシンプルによりグラフィックで伝えるように変わってきている気がします。
なので、アイコンを使ったほうがよりわかりやすく、タッチしてもらいやすくなる気がしています。
僕ちゃん
街中のお店は、ガラス張りで広いフロアに商品はシンプルに間隔をあけて置かれている。値段は小さくおく、できる限り文字を少なくしている。
というのがふら〜っと歩いていても分かります。
時代のトレンド！それがアイコンであったり、グラフィックであるわけです。（多分）
僕ちゃん
インターネットの情報はまだまだ文字を読み取り、文字を読む使い方なので、SEOを考えても文字数が増えてますが、いつかはグラフィックのデータを読み込む時代が来るのかもしれませんなあ。
アイコンを使うには
アイコンの表示方法は簡単に使える方法として
FontAwesomeがあります。
FontAwesomeを使う方法は、
- 自分のサーバーへダウンロード
- CDNを使う（ダウンロードなし）
です。
というわけで、面倒臭くなさそうな、CDN一択ですね。
僕はそうですけども、お好きな方を選べば良いかと思います。
サイトへ飛んでアイコンをクリック、下にあるソースをコピーしてテキストへ貼り付けるだけで使えます。
参考：【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう/サルワカ
↑サルワカさんの記事で分からなければサル以下に認定されるので、僕は必死に人間になりました。
FontAwesome5という新しいのが出ているようですが、無料と有料があり、考えることなく僕は4を使っています。
アイコンをグローバルメニューへ追加、設置する
手順としては、
- ソースをコピー
- メニューへ行く
- ナビゲーションメニューに記載する
- メニューを保存する
確認をする
手順1.ソースをコピー
載せたいアイコンをクリックすると、↑のような画像が出てきます。画面下にあるソースをフルでコピーします。
手順2.メニューへ行く
手順3.ナビゲーションメニューに記載する
メニューで、トップメニューのグローバルメニュー編集へ行き、ナビゲーションラベルへ記載をします。
手順4.メニューを保存する
以上です！
もし万が一写っていなかった場合は、キャッシュクリアをして、再度確認をすると映ると思います。
アイコンを読み込むデメリット
アイコンを読み込むということは、それだけデータ容量は増えるために、表示速度は遅くなるかもしれないのが唯一のデメリットとして考えられます。
犠牲にしてまでも自分が好きなデザインにしたい！という方はそれはそれでよし。別に気になるほど遅くはならないのであれば、少しくらい増やしても問題なさそうと思って僕はつけています。
僕ちゃん
まとめ
アイコンをグローバルメニューへ設置する方法でした。
情報量が多い現代なので、綺麗にまとまっていたり、デザイン性が高いものが求められる可能性があります。
ユーザーエクスペリエンスはどんどん求められてきているので、シンプルに感覚で押したくなるデザインを目指すのもブログの形としてアリなんだろうな、と思います。
読んでいただきありがとうございます〜！
