どーも!大雪です。
このブログでも使用している、大人気のWordPressテーマ「JIN(ジン)」。
初心者でもきれいなサイトやブログを作ることが出来る、素晴らしいテーマです。
が、私はそれでも相当つまづきました(今もまだ未解決の部分が結構あります)。
スマホフッターメニューの設定もその一つです。
今回は、同じようにスマホフッターメニューのアイコンが設定出来なくて困っている方のために、私が見つけた解決方法をお伝えします。
JINのアイコンコード記入の仕方
スマホのフッターメニューとは
スマホの下部で表示される、固定メニューのことです。
このフッターメニューがあれば、閲覧者がメニューを探してスマホの縦に長い画面をウロウロする必要が無くなります。
フッターメニューを文字だけではなく、アイコンも付けて表示すれば、閲覧者が一目で内容を確認することが出来るうえにカッコいい(笑)ので設定してみましょう。
メニューの項目は自由に決められます。いろいろなブログをスマホで閲覧して、参考にして下さい。
JINのマニュアルを確認する
スマホフッターメニューの設定方法は、公式マニュアルの基本設定に記載されています。
まずはマニュアル通りにメニューを作成する→追加したいメニューを選ぶまで作業を進めましょう。
次に出てくるのが、アイコンを設定するです。
この設定画面の番号3「説明」の項目に、FontAwesome(フォントオーサム)から取得したコードを記載します。
私はこのコードで引っかかりました。
アイコンコードは必要な部分だけ記載する
アイコンのコードはFontAwesome(フォントオーサム)というサイトで調べます。
ここで使用したいアイコンを選択します。今回はhomeを選択しました。
ちなみに、アイコンを検索する時は英語を使用します。
ここで問題なのが、JINの「説明」の項目に記載するアイコンコードです。
上の例では、FontAwesomeで選択したアイコンページで示されるアイコンコードは<i class=”fas fa-home”></i>です。
しかしこれをそのまま「説明」に転記してもアイコンは表示されません。
使用するのは<i class=”fas fa-home“></i>のfas fa-homeの部分だけです。
他のアイコンも、コードの必要な部分は同じですので、抜き出して記載してください。
後はマニュアル通り、必要な数だけアイコンを設定します。
なお、以上はJINの設定方法です。他のテーマでFontAwesomeを使用する場合は、そのテーマのマニュアルや関連記事をご参照ください。
スマホ画面で確認
最後に、きちんと表示されているか、必ずスマホで確認してください。
フッターメニュー自体は、マニュアルに従えばいいだけです。
表示されない場合は、まずマニュアルの再確認と、アイコンコードのコピーミスのチェックをしてみましょう。
では、上手くいきますように!