グローバルメニューにアイコンを追加、入れる方法と手順を解説

3 min 302 views
佐藤

佐藤

ライティングをしながらブログで生活をして、田舎に逃げて、北上中です。

カスタマイズとか、そう言った類のことは、パソコンに弱いこともあり、なかなかやらないのですが、1日1歩!

というわけで、今回はグローバルメニューにフォトアイコンをつける方法を解説していきます。

[memo title=”MEMO”]僕はWordPressテーマは2018年2月現在時点では、SANGOというテーマを使っています。[/memo]

アイコンとは

言うまでもない方もいらっしゃるかもしれませんが、念のために解説しておきます。

文字ではなくて、いわゆるマークを見たことがあると思います。

パソコンには標準で入ってはいないものも、自分のサーバーやCDNを通して表示されるのがアイコンのようです。

こんなんや

アイコン

こんなん

こんなん

出典:https://fontawesome.com

アイコンをつけるメリット

アイコンをつけるメリットは字ではなくて、直感で読まれる面にあります。

例えばですが、

 

僕がオススメする漫画100冊

 

僕がオススメする漫画100冊

 

だとしたら直感でどちらが「本や漫画」のことについて書いてあるか分かるでしょうか。

[say img=”https://kazumune.net/wp-content/uploads/2018/02/avater_3.jpg” name=”僕ちゃん” from=”right”]別にどっちも同じだと思う[/say]

という僕の個人的な感想は置いておいて。笑

エビデンスがないからなんとも言えませんが、現代のデザインはシンプルによりグラフィックで伝えるように変わってきている気がします。

なので、アイコンを使ったほうがよりわかりやすく、タッチしてもらいやすくなる気がしています。

[say img=”https://kazumune.net/wp-content/uploads/2018/02/avater_3.jpg” name=”僕ちゃん” from=”right”]気がしているばかりですが…エビデンスがないから…[/say]

街中のお店は、ガラス張りで広いフロアに商品はシンプルに間隔をあけて置かれている。値段は小さくおく、できる限り文字を少なくしている。

というのがふら〜っと歩いていても分かります。

時代のトレンド!それがアイコンであったり、グラフィックであるわけです。(多分)

[say img=”https://kazumune.net/wp-content/uploads/2018/02/avater_3.jpg” name=”僕ちゃん” from=”right”]なるほどね〜。んじゃあアイコンやグラフィックは時代のトレンドとも言えるんですな。つまりメリットは、「なんか流行りっぽい!という集客効果と見やすさってわけね。[/say]

インターネットの情報はまだまだ文字を読み取り、文字を読む使い方なので、SEOを考えても文字数が増えてますが、いつかはグラフィックのデータを読み込む時代が来るのかもしれませんなあ。

アイコンを使うには

アイコンの表示方法は簡単に使える方法として

FontAwesomeがあります。

FontAwesomeを使う方法は、

  1. 自分のサーバーへダウンロード
  2. CDNを使う(ダウンロードなし)

です。

というわけで、面倒臭くなさそうな、CDN一択ですね。

僕はそうですけども、お好きな方を選べば良いかと思います。

サイトへ飛んでアイコンをクリック、下にあるソースをコピーしてテキストへ貼り付けるだけで使えます。

参考:【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう/サルワカ

↑サルワカさんの記事で分からなければサル以下に認定されるので、僕は必死に人間になりました。

[alert title=”注意”]

FontAwesome5という新しいのが出ているようですが、無料と有料があり、考えることなく僕は4を使っています。

[/alert]

アイコンをグローバルメニューへ追加、設置する

手順としては、

  1. ソースをコピー
  2. メニューへ行く
  3. ナビゲーションメニューに記載する
  4. メニューを保存する

確認をする

手順1.ソースをコピー

コピーします

載せたいアイコンをクリックすると、↑のような画像が出てきます。画面下にあるソースをフルでコピーします。

手順2.メニューへ行く

手順3.ナビゲーションメニューに記載する

ナビゲーションメニュー

メニューで、トップメニューのグローバルメニュー編集へ行き、ナビゲーションラベルへ記載をします。

手順4.メニューを保存する

以上です!

[memo title=”MEMO”]

もし万が一写っていなかった場合は、キャッシュクリアをして、再度確認をすると映ると思います。

[/memo]

アイコンを読み込むデメリット

アイコンを読み込むということは、それだけデータ容量は増えるために、表示速度は遅くなるかもしれないのが唯一のデメリットとして考えられます。

犠牲にしてまでも自分が好きなデザインにしたい!という方はそれはそれでよし。別に気になるほど遅くはならないのであれば、少しくらい増やしても問題なさそうと思って僕はつけています。

[say img=”https://kazumune.net/wp-content/uploads/2018/02/avater_3.jpg” name=”僕ちゃん” from=”right”]最悪好きなデザインでやるんだったら遅くなってもいい!的な気持ちが大事かもな〜。好きな服着るなら寒くてもいい!みたいなね?[/say]

まとめ

アイコンをグローバルメニューへ設置する方法でした。

情報量が多い現代なので、綺麗にまとまっていたり、デザイン性が高いものが求められる可能性があります。

ユーザーエクスペリエンスはどんどん求められてきているので、シンプルに感覚で押したくなるデザインを目指すのもブログの形としてアリなんだろうな、と思います。

読んでいただきありがとうございます〜!

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です