このサイトでは、WordPressの無料テーマcocoonを使用して、ブログをおしゃれにカスタマイズするテクニックを紹介しています。
今回は、『ボックスメニューにFont Awesomeのアイコンを表示する方法』を紹介します。
サイドバーに表示したイメージ
固定ページや投稿の本文中に表示したイメージ
初心者の方にもわかりやすい内容になっていますので、ぜひ最後まで読んでいただき、ブログ作りの参考にしてください。
この記事を書いている人
- メガバンク勤務の30代女性
- 夫と共同でブログを運営中
- ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
【cocoon】ボックスメニューにアイコンを表示するには
ここからは、cocoonのボックスメニューにアイコンを表示する具体的な手順について紹介します。
【cocoonカスタマイズ①】ボックスメニューを作成
Font Awesomeのアイコンを表示するボックスメニューを作成します。
ボックスメニューというのは、下記のようなメニューボタンのことを言います。
ボックスメニューは、サイドバー以外にも固定ページ、投稿ページなどさまざまな場所に設置することができます。
ボックスメニューを表示させたい固定ページや記事を絞ることができるため、ページ内容に合わせた効果的なメニューの配置が可能です。
ボックスメニューを表示できる主な場所
- サイドバー
- 投稿
- 固定ページ
- インデックスリスト
- フッター
ボックスメニューの作成方法については、別記事で詳しく紹介しておりますので、そちらをご覧ください。
【cocoonカスタマイズ②】Font Awesomeの初期設定とアイコン取得
作成したボックスメニューにアイコンを設定します。
Font Awesomeというサイトが提供しているアイコンフォントをボックスメニューに登録します。
Font Awesomeとは
Font Awesome(フォント オーサム)は、WEBサイトで使用できるアイコンフォントを提供しているサイトです。
Font Awesomeを利用すれば、Web上でよく利用される下記のようなアイコンフォントを自身のサイトで使用することができます。
Font Awesomeには無料版と有料版がありますが、個人のブログで利用する程度であれば、無料版で十分です。
無料でも1600種類以上のアイコンを利用することができるため、サイトに利用したいアイコンが必ず見つかると思います。
FontAwesomeは会員登録などを行うことなく
サービスを利用することができます
Font Awesomeを使用するためのcocoon設定
Font Awesomeは、バージョン4と5という2種類が用意されており、バージョンによって使用できるルールが異なります。
特段、理由がない限りは、最新版のFont Awesome5を使用しましょう。
cocoonの初期設定では、Font Awesome4（バージョン4）を使用する設定になっています。
そのため、Font Awesome5を使用するように設定を切り替える必要があります。
Font Awesome5になり
アイコンが簡単に検索できるようになりました
『ダッシュボード→cocoon設定→全体』を選択
全体設定の項目の『サイトアイコンフォント』を『Font Awesome 5』に切り替え
cocoonの設定は完了
Font Awesomeからアイコンを取得
cocoonのFont Awesomeの初期設定が完了したら、いよいよFont Awesomeのサイトでアイコンを取得します。
Font Awesome5の無料版で
アイコンを取得します
Font Awesomeにアクセス
ヘッダーメニューの『icons』を選択し、サイドバーの『Free（無料で使用できるアイコン）』を選択
『検索バー』もしくはサイドバーの『カテゴリー』を利用し、使用したいアイコンを探す
使用したいアイコンをクリックし、HTMLコードをコピーする
Font Awesomeのアイコン取得の手順は以上になります
【cocoonカスタマイズ③】ボックスメニューにFontAwesomeのアイコンを設定
先ほど、Font Awesomeから取得したアイコンのHTMLコードを使用して、ボックスメニューにアイコンを設定します。
『ダッシュボード→外観→メニュー』を選択
（メニューの作り方は別記事を参照）
アイコンを使用したいメニューを選択し、「メニュー項目の詳細」を開く
『CSS class（オプション）』にFontAwesomeのコードを入力
入力する文字列は“fas fa-アイコン名”となります
Font Awesome画面イメージ
ボックスメニューの設定変更を保存したら設定は完了です
上記の設定で実際にできたボックスメニューが以下の通りです。
固定ページにボックスメニューを表示した場合
サイドバーにボックスメニューを表示した場合
ボックスメニューに自分が指定したFont Awesomeのアイコンが表示されました。
ボックスメニューにアイコンを未設定の場合は
★のアイコンが表示されます
まとめ／ボックスメニューにFontAwesomeのアイコンを表示する方法
いかがでしたか。
紹介したカスタマイズ方法通りに行えば、会員登録や複雑な設定を行うことなく、簡単にボックスメニューにアイコンを表示させることができます。
アイコン付きのボックスメニューを設置すれば、手軽にサイトの雰囲気を変えることができますので、ぜひ実践してみてください。
このサイトでは、他にもcocoonのカスタマイズ方法やブログ運営などの記事を投稿しています。
あわせてご覧ください。
最後までご覧いただきありがとうございました。
