【COCOON】Font Awesomeでボックスメニューにアイコンを表示

コクーンボックスメニューアイコン設定 副業ブログ

こんばんは、ブルです。

ブログが文字ばっかりで寂しいなという時に重宝するのがFont Awesomeのアイコンですね。

今回はFont Awesomeの使い方と、ワードプレスのテーマCocoonを使っている方向けに上記写真のようなボックスメニューを作成する方法についてお伝えします。

スポンサーリンク

Font Awesomeの使い方

Font Awesomeトップページ
トップページにいったら「Icons」をクリック

まずFont Awesomeにアクセスします。
※この時Google Chromeで日本語に翻訳するとサイト表示が崩れることがあるため気をつけましょう。

使いたいアイコンをクリック

Font Awesomeの使い方1

トップページから探すのでもいいですが、ページ上部にある検索機能を利用したほうが使いやすいです。
日本語検索には対応していないため、英語で検索する必要があります。
※グレーアウトしているものは有料版でしか利用ができません。

「Start Using This Icon」をクリック

Font Awesome画面クリック時

アイコン画像のページに切り替わったら赤紫色の「Start Using This Icon」と書いたボタンをクリックします。(このアイコンの使用を開始しますという意味)

Font Awesomeのコード表示画面

htmlコードが表示されたら、こちらをコピーして表示させたい部分に貼り付けます。

例えば、下記はさきほどの猫のアイコンをワードプレスで作成した記事内にhtmlコードにて設置した場合です。

←猫のシルエットのアイコン(テスト)

ワードプレスのボックスメニューにアイコン設置する方法(コクーン)

Font Awesomeで使いたいアイコンを選んでコードをコピーしたら、次にワードプレス側の設定を行います。

Font AwesomeのCocoon設定方法

本来Font Awesomeのアイコンを利用するにはCDNと呼ばれるコードをヘッダー内に挿入する必要があるのですが、親テーマのコクーンのheader.phpを見たらわかる通り、あらかじめ入れてくれてるんですよね。

ですからあとは使用するツールがFont Awesome4か5どっちか選択するのみです。
デフォルトだと4が選択されていて、5のアイコンを使った時に表示の崩れが起こります。

そのため、Coccon設定⇒全体⇒サイトアイコンフォントというところを下記の図にあるように4に入っているチェックを5のほうに入れなおしましょう。

使用するバージョンにあわせて選択する

アイコン付きのカテゴリボックスメニュー作成方法

グローバルカテゴリなどに使用したい場合について説明します。

まず、ワードプレス管理画面⇒外観⇒メニューの順にクリックします。
すると右上に「表示オプション▼」と出るため、▼をクリックすると下記のような項目が出現します。

ワードプレスメニュー管理画面

こちらの、「タイトル属性」「cssクラス」「説明」にチェックを入れます。

メニューを新規作成する

下のメニュー設定は触る必要なし

まず、表示させたいカテゴリだけを集めるため、メニューを作成する必要があります。

メニュー作成手順
  1. 「新しいメニューを作成しましょう。」をクリック
  2. メニュー名が空欄になっているため、わかりやすい名前をつける(上図の場合カテゴリーボックス)
  3. メニュー名の右端にある保存をクリック(上図では途切れて見えてません。)
カテゴリ追加方法
  • 上図の左側にあるカテゴリーの▼をクリックし、必要なものにチェックを入れ「メニューを追加」をクリック(右側のメニュー構造にチェックしたカテゴリが移れば成功)

カテゴリーにFont Awesomeのアイコンを設定する

ワードプレスメニュー画面
上記例でいうと「fas fa-cat」の部分

メニュー構造に追加されたカテゴリーの右横にある▼をクリックして展開すると、上図のようになります。

この中にある、CSS classオプションというところにFont Awesomeからコピーしたhtmlコードを貼り付けます。
この時、コード全てを貼り付ける必要はありません。
htmlのダブルコーテーション内だけの貼り付けで大丈夫です。

必ず保存ボタンを押すのを忘れないようにしましょう。

なお、「説明」欄に文章を入れると、上から順にアイコン⇒ナビゲーションラベル⇒説明が表示されるようになります。(すっきり見せたいので私は入れてません)
※ちなみにタイトル属性というところは画像URLを入れることでその画像を表示させることができます。(タイトル属性かCSS classはどちらかひとつだけ入力する)

スポンサーリンク

ウィジェットでボックスメニューの設定をする

次いでワードプレス管理画面⇒外観⇒ウィジェットをクリックします。

すると、上図のようにボックスメニューと書かれた箇所を探しましょう。
見つかったら枠内をマウスでドラッグしてさきほど作成したカテゴリボックスを表示させたい位置のところに移動させましょう。
※▼をクリックして任意の場所を選択でも可能です。

スマホのヘッダー部分に表示させたい場合

上図のようにスマホで開いた時にタイトル下に表示させたい場合は、ウィジェットで下記のように設定を行います。

サイトタイトル下にカテゴリボックスを表示させる方法
  1. ウィジェットの中にある「ボックスメニュー」をドラッグして「コンテンツ上部」の中でドロップする(もしくはボックスメニュー右にある▼を選択して「コンテンツ上部を選ぶ」)
  2. メニュー名の部分はプルダウンして上記で新規作成したメニューを選択する(今回私がやって見せているものだとカテゴリーボックス)
  3. 表示設定をクリック
  4. ウィジェットの表示のプルダウンで「チェック・入力したページで表示」を選択
  5. 「ページ」をクリックし、表示させたい場所にチェックを入れて保存する

私はトップページのみに設定して、投稿(記事)ページの上部は逆にすっきりさせるようにしています。

スマホのフッター部分に表示させる場合

私は投稿ページには記事本文下にある関連記事の更に下にカテゴリーボックスを表示させるようにしています。

なぜなら、一番重要性の高い記事内容⇒次に重要度が高い関連記事⇒他カテゴリの存在示唆と、下に行くに連れて重要度が薄くなるようにしたかったからです。

スマホの投稿ページ本文下にカテゴリボックスを表示させる方法
  1. ウィジェットの中にある「ボックスメニュー」をドラッグして「フッター(モバイル用)」の中でドロップする(もしくはボックスメニュー右にある▼を選択して「フッター(モバイル用)を選ぶ」)
  2. メニュー名の部分はプルダウンして上記で新規作成したメニューを選択する(今回私がやって見せているものだとカテゴリーボックス)
  3. 表示設定をクリック
  4. ウィジェットの表示のプルダウンで「チェック・入力したページで表示」を選択
  5. 「ページ」をクリックし、「投稿」にチェックを入れ保存する

まとめ

デフォルトだとボックスメニューは横2列で表示されるため、表示するカテゴリ数は偶数にしたほうがきれいにできます。

また、ボックスの高さや幅、アイコン色の調整についてはCSSの調整が必要になってきます。
別の記事ができ次第こちらの記事にリンクを貼っていきたいと思います。

コメント

タイトルとURLをコピーしました