パート主婦大雪のお気楽BOX
JIN

【アイコンコード】WordPressテーマ「JIN」スマホフッターメニューの設定方法

どーも!大雪です。

このブログでも使用している、大人気のWordPressテーマ「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を使用する場合は、そのテーマのマニュアルや関連記事をご参照ください。

スマホ画面で確認

最後に、きちんと表示されているか、必ずスマホで確認してください。

アイコンを設定した方が、インパクトもあるし分かりやすい。
大雪
大雪
絶対大丈夫!と思っていたのにダメで焦る、とか日常茶飯事です(私は)。

フッターメニュー自体は、マニュアルに従えばいいだけです。

表示されない場合は、まずマニュアルの再確認と、アイコンコードのコピーミスのチェックをしてみましょう。

では、上手くいきますように!

あわせて読みたい
仔ヤギとその口元に花をあてる人の手
超!初心者がWordPressテーマ「JIN」を購入する前にチェックすること3つどーもこんにちは!大雪です。 いま大注目のWordPress(ワードプレス)テーマ「JIN(ジン)」。 私も使っています。こ...