ブログ運営

【JIN】アイコンが表示されない原因と解決方法【Font Awesome表示設定】

このブログは、ワードプレステーマ「JIN」を利用しています。

ある日、スマホで記事をチェックしていたら、

スマホのフッター固定メニューのアイコンが表示されていないことに気づく…。

いろいろ調べて解決できました。

この記事ではJINを使っていて、

  • アイコンが表示されなくなった
  • アイコンが表示されない

といった状況も僕と同じ原因の可能性があるので、参考にしていただければと思います。

同じように困っている人のためになれば嬉しいです。

シロハヤ
シロハヤ
原因が分かったら簡単に解決できました。   
スマホの固定フッターメニューは、スマホ画面の下側にずっと表示されている部分

【JIN】スマホフッター固定メニューのFont Awesomeアイコンが表示されない原因

JINを使っていてスマホの固定フッターメニューやそれ以外の場所でアイコンが表示されない原因としては、

  1. Font Awesomeのコードが間違っている
  2. Font Awesomeアイコンの表示設定がOFFになっている

といったことが考えられます。

僕の場合は、②Font Awesomeアイコンの表示設定がOFFになっていることが原因でした。それぞれの詳細と対処法を解説していきます。

Font Awesomeのコピペ箇所が間違っている

Font Awesome」のコードをコピーする部分や貼り付ける箇所が違うと表示されません。

それぞれ間違っていないか確認しましょう。一応人間なので、もしかするとミスしているかもしれません。

Font Awesomeアイコンでコピーする部分

Font Awesomeアイコンでコピーする部分

赤い部分の[far fa-grin]だけコピーする。

Font Awesomeアイコンのコードを貼り付ける位置

Font Awesomeアイコンのコードを貼り付ける位置

説明部分にコードを貼り付ける。

[説明]の表示がない人は、右上の[表示オプション]を押して、[説明]部分にチェックを入れたら出てきます。

Font Awesomeアイコンの表示がOFFになっている

JINでアイコンが表示されない原因として可能性が高いのは、Font Awesomeアイコン表示がオフになっていることです。

JIN2.0のアップデートで、サイト表示速度UPのために「Font Awesomeアイコンの表示OFF」機能が追加されたんですよね。

それで、僕自身もその機能を使って問題なかったんですが…

結果的には、Font Awesomeアイコンが表示されない設定にしていたことが原因でした。

確認方法としては、JINのFont Awesomeアイコン表示機能がどうなっているか確認してみましょう。

Font Awesomeアイコンの表示がOFFになっている [カスタマイズ]▶[その他設定]▶[fontawesomeを読み込まない]でON/OFFが切替可能です。

「fontawesomeを読み込まない」をオフ(チェックを入れない)にする。

この設定をオフにしてアイコンが表示されたら原因解決です。

JINでFont Awesomeアイコンを表示させたい場合の解決方法

Font Awesomeアイコン表示がOFFになっていることが原因の対処法は、2つあります。

  1. Font Awesomeの表示OFF機能を使わない
  2. JINオリジナルアイコンを使用する

Font Awesomeのアイコン表示OFF機能を使わない

さきほど紹介した手順で、Font Awesomeの表示OFF機能を使わないようにすればOKです。

チェックを外すだけなので時間がかかりません。

JINのFont Awesome代替のオリジナルアイコンを使用する

「サイト高速化もしたいし、アイコンも表示させたい…」という人は、JINのオリジナルアイコンを使いましょう。

まだ種類は少ないけど、最低限のアイコンは揃っています。

JINオリジナルアイコン一覧

JINのFont Awesome代替のオリジナルアイコンを使用する

Font Awesomeの時と同じように、赤い囲み部分のコードをコピーして貼り付けるだけです。

JINの意外と知られていない機能:オリジナルアイコンは記事内でも使える

JIN独自のオリジナルアイコンは、メニューにもちろん使えるんですが、実は記事内でも簡単に使えます。

記事内で使うとこんな感じです。

こんな風にかわいい文章になります。

使い方は人それぞれ!

こんな感じの使い方もできるので、記事に幅が広がります。自分の使い方を試してみるといいですよ!

記事内でオリジナルアイコンを使う手順としては、

[jin_icon_〇 color="#〇" size="〇px"]

 

といったようにショートコードを貼り付けるだけ。アイコンの色とサイズは自由にカスタマイズできます。

クラシックエディタなら、[ショートコード]欄の[アイコン]からポチっとするだけなので簡単です。

JINのオリジナルアイコンを使ったほうがいい理由

JINでFont Awesomeアイコンの表示をOFFに設定して、オリジナルアイコンを使うことをおすすめします。

JINでサイトの表示速度が改善される可能性が高い

JINのFont Awesomeアイコンの表示をOFFに設定することで、サイトの表示速度が改善される可能性が高いです。

Googleでは、サイトの表示速度は遅いよりも早いほうがいいとされています。なので、SEO的にも良いわけです。

通常なら、Font Awesomewのアイコンを表示させるために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/

ABOUT ME
シロハヤ
シロハヤ
朝起きるのがつらすぎて一部上場企業を退職。無職時代をなんとか乗り越えてからは自堕落な生活に…… ヒモ体質な自分を変えるために現在はWebライターとして活動中。 時間と場所に縛られないライフスタイルをモットーに発信しています。 詳しいプロフィールはこちら
この記事もよく読まれてる٩(ˊ ᗜˋ*)و

POSTED COMMENT

  1. アバター さとしも より:

    この記事のおかげでアイコンを付けられました。ありがとうございます!

    • シロハヤ シロハヤ より:

      この記事がお役に立てて良かったです。
      感謝コメントありがとうございます٩(ˊᗜˋ*)و

COMMENT

メールアドレスが公開されることはありません。