こんばんは、ブルです。
ブログが文字ばっかりで寂しいなという時に重宝するのがFont Awesomeのアイコンですね。
今回はFont Awesomeの使い方と、ワードプレスのテーマCocoonを使っている方向けに上記写真のようなボックスメニューを作成する方法についてお伝えします。
Font Awesomeの使い方
まずFont Awesomeにアクセスします。
※この時Google Chromeで日本語に翻訳するとサイト表示が崩れることがあるため気をつけましょう。
使いたいアイコンをクリック
トップページから探すのでもいいですが、ページ上部にある検索機能を利用したほうが使いやすいです。
日本語検索には対応していないため、英語で検索する必要があります。
※グレーアウトしているものは有料版でしか利用ができません。
「Start Using This Icon」をクリック
アイコン画像のページに切り替わったら赤紫色の「Start Using This Icon」と書いたボタンをクリックします。（このアイコンの使用を開始しますという意味）
htmlコードが表示されたら、こちらをコピーして表示させたい部分に貼り付けます。
例えば、下記はさきほどの猫のアイコンをワードプレスで作成した記事内にhtmlコードにて設置した場合です。
←猫のシルエットのアイコン（テスト）ワードプレスのボックスメニューにアイコン設置する方法（コクーン）
Font Awesomeで使いたいアイコンを選んでコードをコピーしたら、次にワードプレス側の設定を行います。
Font AwesomeのCocoon設定方法
本来Font Awesomeのアイコンを利用するにはCDNと呼ばれるコードをヘッダー内に挿入する必要があるのですが、親テーマのコクーンのheader.phpを見たらわかる通り、あらかじめ入れてくれてるんですよね。
ですからあとは使用するツールがFont Awesome4か5どっちか選択するのみです。
デフォルトだと4が選択されていて、5のアイコンを使った時に表示の崩れが起こります。
そのため、Coccon設定⇒全体⇒サイトアイコンフォントというところを下記の図にあるように4に入っているチェックを5のほうに入れなおしましょう。
アイコン付きのカテゴリボックスメニュー作成方法
グローバルカテゴリなどに使用したい場合について説明します。
まず、ワードプレス管理画面⇒外観⇒メニューの順にクリックします。
すると右上に「表示オプション▼」と出るため、▼をクリックすると下記のような項目が出現します。
こちらの、「タイトル属性」「cssクラス」「説明」にチェックを入れます。
メニューを新規作成する
まず、表示させたいカテゴリだけを集めるため、メニューを作成する必要があります。
カテゴリーにFont Awesomeのアイコンを設定する
メニュー構造に追加されたカテゴリーの右横にある▼をクリックして展開すると、上図のようになります。
この中にある、CSS classオプションというところにFont Awesomeからコピーしたhtmlコードを貼り付けます。
この時、コード全てを貼り付ける必要はありません。
htmlのダブルコーテーション内だけの貼り付けで大丈夫です。
必ず保存ボタンを押すのを忘れないようにしましょう。
なお、「説明」欄に文章を入れると、上から順にアイコン⇒ナビゲーションラベル⇒説明が表示されるようになります。（すっきり見せたいので私は入れてません）
※ちなみにタイトル属性というところは画像URLを入れることでその画像を表示させることができます。（タイトル属性かCSS classはどちらかひとつだけ入力する）
ウィジェットでボックスメニューの設定をする
次いでワードプレス管理画面⇒外観⇒ウィジェットをクリックします。
すると、上図のようにボックスメニューと書かれた箇所を探しましょう。
見つかったら枠内をマウスでドラッグしてさきほど作成したカテゴリボックスを表示させたい位置のところに移動させましょう。
※▼をクリックして任意の場所を選択でも可能です。
スマホのヘッダー部分に表示させたい場合
上図のようにスマホで開いた時にタイトル下に表示させたい場合は、ウィジェットで下記のように設定を行います。
私はトップページのみに設定して、投稿（記事）ページの上部は逆にすっきりさせるようにしています。
スマホのフッター部分に表示させる場合
私は投稿ページには記事本文下にある関連記事の更に下にカテゴリーボックスを表示させるようにしています。
なぜなら、一番重要性の高い記事内容⇒次に重要度が高い関連記事⇒他カテゴリの存在示唆と、下に行くに連れて重要度が薄くなるようにしたかったからです。
まとめ
デフォルトだとボックスメニューは横2列で表示されるため、表示するカテゴリ数は偶数にしたほうがきれいにできます。
また、ボックスの高さや幅、アイコン色の調整についてはCSSの調整が必要になってきます。
別の記事ができ次第こちらの記事にリンクを貼っていきたいと思います。
コメント