WordPressのメニューに、フォントアイコンを使うと、見た目も華やかになり、さらにサイトの回遊性向上も期待できます。
『Font Awesome5』は、無料で使えますので、WordPress中級者はぜひチェックして挑戦してみてください。
クリックできる目次
WordPressのメニューに『Font Awesome5』を使うメリット
見た目が華やかになる
店舗のホームページでは、お店の情報ページや、お問い合わせページに誘導するため、メニューを設置します。
参考までに、このような花屋さんのサイトがあるとします。
これでも十分カッコイイサイトですが、メニューをもう少し華やかにすると、以下のようにできます。
拡大すると、メニューにアイコンがついています。
このように見た目が良くなります。
また見た目が良くなるだけでなく、メニューをクリックしてもらえる可能性が高くなるといわれています。
メニューをクリックしてもらえるということは、サイト全体の回遊性向上に繋がるので、メニューの見た目をリッチにしたいと思ったら『Font Awesome5』はおすすめです。
無料でも使える
Font Awesomeは無料でも使うことができます。
有料版と無料版があり、無料版は1,264種類のアイコンがあります。
有料のPRO版は、さらに使えるアイコンが増え、3,000種類以上のアイコンがあります。
PRO版は60ドルなので、日本円で6,500円くらいなので、予算に合わせて検討してみてください。
今回は無料版の使い方を解説します。
Font Awesome5を無料で使う方法
『Font Awesome 5』は、これまでの『Font Awesome 4』から、かなり変わっています。
これからFont Awesomeを使用するなら、新しいバージョンで使うのが良いです。
今回は、2018年8月17日時点で最新の『Font Awesome 5』のバージョン5.2.0を、CDNで簡単に設置する方法を紹介します。
公式サイトからheader.phpに貼り付けるコードを入手する
『Font Awesome』公式サイトにアクセスします。
トップページから、Font Awesome Freeを使うために赤枠部分の『Start Using』（使う）をクリックします。
画面の赤枠部分が、WordPressのheader.phpに貼り付けるHTMLコードです。
2018年8月時点で最新バージョンは5.2.0ですから、下記に5.2.0のHTMLコードを参考までに貼っておきます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
header.phpにHTMLコードを貼り付ける
WordPressのテーマファイル内のheader.phpを開きます。
<head> <!-- いろいろ記載されているこの下 --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <!-- いろいろ記載されているこの上 --> </head>
このように、<head>と</head>の間に、先ほどコピーしたHTMLコードを貼り付けます。
使用したいアイコンを選ぶ
無料で使用できるアイコン一覧が表示されているページ『Font Awesome Free一覧』にアクセスして、使用したいアイコンを選びます。
どれでも構いませんから、選んでみてください。
わたしはMAP関連のアイコンを探していたので、検索窓に『MAP』と入力してみました。
アイコンは無料でも1200種類以上用意されているので、いろいろチェックしてみてください。
アイコンのHTMLコードを入手して貼り付ける
今回は、MAPに良さそうなアイコンを選んでみました。
アイコンを選択すると、左下にHTMLコードが表示されるので、これをコピーします。
メニューを表示させ、ナビゲーションラベルにこのコードを貼り付けます。
このように先ほどコピーしたHTMLコードを貼り付けると、アイコンが表示されます。
メニューにはこだわろう
いかがでしょうか？
WordPressのメニューにフォントアイコンを使うと全然違いますよね。
WordPressの中級者になれば、メニューだけでなく、様々な箇所でフォントアイコンを使うためにカスタマイズするWebデザイナーもいます。
メニューはサイトの回遊性向上にとても重要な要素です。
まずはメニューにこだわりましょう。
Font Awesomeを使うことで、簡単にリッチなサイトになると思うので、ぜひ挑戦してみてください。
藤本さんのFont Awesomeの記事にSEOのタグがあることに、ふと気がつきました。
Font Awesomeを使うことは、見た目だけではなく、SEO的にもメリットがあるのですか？
あるといえばありますが、気にするレベルではないですね。
閲覧者がFont Awesomeによって、サイトの滞在時間や、回遊率があがるなら、SEOに効果があるという感じです。