このブログは、ワードプレステーマ「JIN」を利用しています。
ある日、スマホで記事をチェックしていたら、
スマホのフッター固定メニューのアイコンが表示されていないことに気づく…。
いろいろ調べて解決できました。
この記事ではJINを使っていて、
- アイコンが表示されなくなった
- アイコンが表示されない
といった状況も僕と同じ原因の可能性があるので、参考にしていただければと思います。
同じように困っている人のためになれば嬉しいです。
【JIN】スマホフッター固定メニューのFont Awesomeアイコンが表示されない原因
JINを使っていてスマホの固定フッターメニューやそれ以外の場所でアイコンが表示されない原因としては、
- Font Awesomeのコードが間違っている
- Font Awesomeアイコンの表示設定がOFFになっている
といったことが考えられます。
僕の場合は、②Font Awesomeアイコンの表示設定がOFFになっていることが原因でした。それぞれの詳細と対処法を解説していきます。
Font Awesomeのコピペ箇所が間違っている
「Font Awesome」のコードをコピーする部分や貼り付ける箇所が違うと表示されません。
それぞれ間違っていないか確認しましょう。一応人間なので、もしかするとミスしているかもしれません。
Font Awesomeアイコンでコピーする部分
赤い部分の[far fa-grin]だけコピーする。
Font Awesomeアイコンのコードを貼り付ける位置
説明部分にコードを貼り付ける。
[説明]の表示がない人は、右上の[表示オプション]を押して、[説明]部分にチェックを入れたら出てきます。Font Awesomeアイコンの表示がOFFになっている
JINでアイコンが表示されない原因として可能性が高いのは、Font Awesomeアイコン表示がオフになっていることです。
JIN2.0のアップデートで、サイト表示速度UPのために「Font Awesomeアイコンの表示OFF」機能が追加されたんですよね。
それで、僕自身もその機能を使って問題なかったんですが…
結果的には、Font Awesomeアイコンが表示されない設定にしていたことが原因でした。
確認方法としては、JINのFont Awesomeアイコン表示機能がどうなっているか確認してみましょう。
[カスタマイズ]▶[その他設定]▶[fontawesomeを読み込まない]でON/OFFが切替可能です。「fontawesomeを読み込まない」をオフ（チェックを入れない）にする。
この設定をオフにしてアイコンが表示されたら原因解決です。
JINでFont Awesomeアイコンを表示させたい場合の解決方法
Font Awesomeアイコン表示がOFFになっていることが原因の対処法は、2つあります。
Font Awesomeのアイコン表示OFF機能を使わない
さきほど紹介した手順で、Font Awesomeの表示OFF機能を使わないようにすればOKです。
チェックを外すだけなので時間がかかりません。
JINのFont Awesome代替のオリジナルアイコンを使用する
「サイト高速化もしたいし、アイコンも表示させたい…」という人は、JINのオリジナルアイコンを使いましょう。
まだ種類は少ないけど、最低限のアイコンは揃っています。
Font Awesomeの時と同じように、赤い囲み部分のコードをコピーして貼り付けるだけです。
JINの意外と知られていない機能：オリジナルアイコンは記事内でも使える
JIN独自のオリジナルアイコンは、メニューにもちろん使えるんですが、実は記事内でも簡単に使えます。
記事内で使うとこんな感じです。
こんな風にかわいい文章になります。 使い方は人それぞれ！こんな感じの使い方もできるので、記事に幅が広がります。自分の使い方を試してみるといいですよ！
記事内でオリジナルアイコンを使う手順としては、
[jin_icon_〇 color="#〇" size="〇px"]
といったようにショートコードを貼り付けるだけ。アイコンの色とサイズは自由にカスタマイズできます。
クラシックエディタなら、[ショートコード]欄の[アイコン]からポチっとするだけなので簡単です。
JINのオリジナルアイコンを使ったほうがいい理由
JINでFont Awesomeアイコンの表示をOFFに設定して、オリジナルアイコンを使うことをおすすめします。
JINでサイトの表示速度が改善される可能性が高い
JINのFont Awesomeアイコンの表示をOFFに設定することで、サイトの表示速度が改善される可能性が高いです。
Googleでは、サイトの表示速度は遅いよりも早いほうがいいとされています。なので、SEO的にも良いわけです。
通常なら、Font Awesomeｗのアイコンを表示させるためにFont Awesomeのサイトを読み込む…という手順が行われています。
JINのオリジナルアイコンを使うことでそれがカットされるのでサイトの表示速度改善に期待できます。
100点満点のスコアで10～20点速度が改善された人もいるようです。サイトの速度チェックには「PageSpeed Insights」がよく利用されています。
JINのオリジナルアイコンを使うデメリットは種類が限られていることだけ
JINのオリジナルアイコンを利用するデメリットとしては、使えるアイコンの種類が限られていることくらいです。
種類が限られていると言っても、20種類以上はあるし、最低限使えるアイコンは揃っています。また、アイコンは随時追加されていくようです。
それ以外のJINでのサイト高速化の方法は、こちらの記事「JINの高速化方法を全まとめ！表示速度が遅い時の対処法は？」で紹介されています。
まとめ：【JIN】アイコンが表示されない原因と解決方法
JINでアイコンが表示されない原因と対処法を解決しました。
- Font Awesomeのコードが間違っていないか？
- Font Awesomeアイコンの表示設定がOFFになっていないか？
といったことを確認してみましょう。
今回紹介した原因で解決できなかったらわからないので、JINフォーラムで質問してみましょう。
たまたまスマホフッターメニューをカスタマイズしてて気付けたのでよかったです…。
スマホのフッター固定メニュ－は、記事を邪魔せず回遊率のアップが期待できます。JINなら簡単に設定できるのでやってみるといいですよ。
参考情報
▼JINのスマホフッター固定メニューの手順
https://jin-theme.com/manual/s-footermenu/
▼JINで高速化する方法
https://jin-theme.com/manual/speed-up/
▼JINのオリジナルアイコン一覧
https://jin-theme.com/original-icon/
▼サイトの表示速度チェック「PageSpeed Insights」
https://developers.google.com/speed/pagespeed/insights/
▼JINについて質問ができる「JINフォーラム」
https://jin-forum.jp/
この記事のおかげでアイコンを付けられました。ありがとうございます！
この記事がお役に立てて良かったです。
感謝コメントありがとうございます٩(ˊᗜˋ*)و