PR

【Cocoon】Font Awesomeを使ったメニューの装飾方法

※本サイトはアフィリエイト広告を利用しています。
ブログ
記事内に広告が含まれています。
スポンサーリンク

WordPressのメニューに、アイコンとか画像ってどうやって付けるの?

私が最初見たときは、こんな風に思っていました。

この内容を実現する方法に言い換えると、つまりはこういうことになるのです。

WordPressのグローバルメニューに、Font Awesomeを使って装飾する方法が知りたい

昨日私は、こんなツイートをしていました。

はい、そうなんです。

つまりこの赤枠の部分のことをグローバルメニューと呼ぶのです。

当サイトけろつづりのグローバルメニューの画面の画像

元はカテゴリ名だけの並びだったのですが、アイコンを付けて装飾しました。

このアイコンは、Font Awesomeと呼ばれるものを使用しています。

当サイトはWordpressのテーマにCocoonを利用させていただいているのですが、CocoonはFont Awesomeにデフォルトで対応しており、難しい知識は不要で、簡単に使うことができるのです。

では、さっそくその方法をご紹介しましょう。

スポンサーリンク

Font Awesomeとは

Font Awesomeの公式サイトのトップページ画像

Font Awesomeとは、無料で利用できる(一部有料)のWebアイコンサービスです。

無料のアイコンだけでも1,500以上あります。

Font Awesomeの無料のアイコン一例画像

AppleやAmazonなど、利用するケースの多い有名どころのアイコンも豊富に取り揃えられています。

Font Awesomeアイコンを、日本語で検索できるサイトもあります。

Search for Font Awesome(日本語)

CocoonでFont Awesomeを使ったグローバルメニューの作り方

では、ここからが実践です。

グローバルメニューを設定する

グローバルメニューを設定していない人は、まずこちらのCocoonの公式マニュアルを参考に設定してください。

  • PCサイト用のグローバルメニュー
  • モバイル用のブローバルメニュー

Cocoon設定でFont Awesomeのバージョンを確認する

上でも述べたとおり、Cocoonをインストールした時点で、すでにFont Awesomeのアイコン画像のデータも一緒に保存されているため、あとはそのデータを呼び出す操作をするだけです。

私がツイートしていたような、ヘッダーのソースをいじるなどといった難しい操作は必要ありません。

まずは、Cocoon側の設定を確認しましょう。

Cocoonでは、Font Awesomeのver.4とver.5が使えます。

WordPressのダッシュボードを開き、[Cocoon設定]を開いてください。

Cocoon設定でFont Awesomeのバージョンを確認する手順画像1

次に[全体]タブを開きます。

Cocoon設定でFont Awesomeのバージョンを確認する手順画像2

下の方にスクロールすると、「サイトアイコンフォント」という設定箇所があります。

Cocoon設定でFont Awesomeのバージョンを確認する手順画像3

デフォルトでは、[Font Awesome 4]が選択されています。

4と5のどちらのバージョンを使用すれば良いかは、使用したいアイコンによります。

私的にバージョン5の方が、素敵なアイコンがいっぱいあると思います。

アイコンのバージョンを確認する方法は、次で説明します。

Font Awesomeから使用したいアイコンのスクリプトをコピーする

では、早速使用したいアイコンを探しましょう。

先ほど紹介した Search fot Font Awesome(日本語) や、Font Awesomeの本家サイトから、アイコンを検索します。

例として、Font Awesomeの本家サイトでハートのアイコンを検索してみました。

Font Awesomeからheartと検索した結果の画像

グレーアウトしているアイコンは、有料のFont Awesome Proのアイコンです。(PCだと、マウスカーソルを合わせると下記のようにProと表示されます)

有料アイコンFont Awesome Proを選択した時の画像

無料だけに絞り込みたいときは、左側メニューの[Free]をクリックすればOKです。

無料のアイコンだけに絞った検索結果の画像

今回は、右上にある黒いハートを使用します。

黒いハートを選択すると、次のような画面に遷移します。

Font Awesomeから使用したいアイコンのスクリプトをコピーする手順画像

画面左上で、このアイコンがver.5で利用できると確認できます。

そして赤枠で囲んだ <i class>〇〇</i> と書かれたものが、このアイコンを呼び出すためのスクリプトです。

これをコピーして、設定したグローバルメニューの画面に貼り付けます。

グローバルメニューにFont Awesomeのスクリプトをペーストする

[外観]→[メニュー]を開いて、設定したメニューの「ナビゲーションラベル」に、スクリプトを貼り付けて[メニューを保存]します。

グローバルメニューにFont Awesomeのスクリプトをペーストする手順画像1

自サイトのトップ画面にもどり、ちゃんとアイコンができているか確認してください。

グローバルメニューにFont Awesomeのスクリプトをペーストする手順画像2

ちょっと例では意味不明なメニューが出来あがりましたけど、うまくいきましたでしょうか。

まとめ

最近、HTML/CSSの勉強していて、初めてFont Awesomeの存在を知りました。

自分で画像を作って装飾するのもいいですけど、手間も時間もかかるので、こういった無料サービスは積極的に利用していきたいですね。

もしこれに関して、操作に不明点などありましたら、ツイッターでリプしてもらえれば確認します。

メッセージは怪しい勧誘が多いので見ていません。

私のどのメッセージに対してでも良いので、リプライ(返信)でご連絡をお願いしますね。