WordPress

WordPress『JIN』スマホフッターにアイコンが表示されない時の対処法

ブログにも慣れてきたら色々とブログのデザインを変えたりしたいですよね。

mariko
mariko
そんな私はつい最近スマホのフッターにアイコンを追加しました。

でもね、簡単なはずなのにめちゃくちゃ手こずったんです。。泣
アイコンが全く表示されなくて。

 

その原因はもしかしたらアイコンを読み込むコードが無いのが原因かもしれません。

6月14日追記
JINではFontAwesomeを読み込まない設定にできるようで、その設定を変えれば簡単にできました!

この記事では、以下のような人の参考になります。

JINのテーマを使っていて、FontAwesomeのアイコンが表示されていなくて困っている人

 

固定スマホフッターとは

スマホ画面下にあるメニューのことです。私は今回このように変更しました。デフォルトだとアイコンがなく、文字だけでしたが、アイコンが入ると可愛いくなりました!

スマホフッターの変更の方法は以下のJINマニュアルより行なってください。

 

スマホフッターのカスタマイズ

JINのマニュアルからスマホフッターのカスタマイズを出来ると知り、『ゆるりとぷらす』Haruさんの記事に辿り着いた私。

そのカスタマイズが可愛くて、これ絶対やる!と意気込み取り掛かかり始めました。

 

 

JINマニュアル、もしくはHaruさんの方法通りに行なってアイコンが表示されるならこの記事を読む必要はありません^^

 

原因はコードだった【6月14日追記】原因はJINの設定によるもの

設定が終わりヨッシャー!と意気込んでスマホを確認してみると「あれ…アイコンが表示されていない。」

大きさを変えるコードを消してみたり、色々試してみたりしましたが、何度やってもアイコンだけ表示されない。。

その日はとりあえず放置して寝ました。翌日改めて試してもやっぱりアイコンだけ表示されない。

ぴよたそ
ぴよたそ
一晩置いたら解決すると思っていたのか。。

 

どうやらFontAwesomeのアイコンを表示するためのコードが無い説が浮上。

JINのマニュアルにも書いているように、アイコンのコードはFontAwesomeから取得しています。

なのでFontAwesomeのアイコンを表示するコードがなければ表示できませんよね。ということで早速コードを取得。

 

FontAwesomeからコードを取得【6月14日追記】必要ありません

FontAwesomeの公式サイトへ行き、無料会員登録をしましょう。
え、会員登録するの?って思いました?私も思いました。でもどうやら登録しないとコードを取得できないようだったので登録しました。→登録しなくて良いです!JINの設定方法を変更しましょう。下のページで説明します。

無料なので必要なのは名前とメールアドレス、パスワードのみです。

FontAwesomeへ

 

Version5.9.0での登録方法です。

 

Start for Free(無料で始める)ボタンを押して、メールアドレスを入力します。

 

入力したら右のボタンをクリック。登録したメールアドレスに確認メールがきているので、メールに記載の下のボタンをクリックし、設定を完了させます。

 

 

名前などの必要事項を記載すると、コードが表示されるのでコードをコピーします。下のようなコードです。ユーザーIDの所にあなたのIDが記載されています。

 

<script src=”https://kit.fontawesome.com/ユーザーID.js”></script>

 

コードをheadへペースト【6月14日追記】これも必要ありません

コピーしたコードをHTMLのheadへペーストしましょう。

 

念の為バックアップをとってから行なってくださいね。

これで完了です!

スマホ画面を確認してみましょう。私の場合この方法で解決しました!

 

 

【6月14日追記】手っ取り早い解決方法はこれ!

実はJINにはFontAwesomeを読み込まない設定があるようで、チェックボックス一つで解決しました!

その方法は、「外観」→「カスタマイズ」→「その他設定」→「FontAwesomeを読み込まない」というチェックボックスがあります。

そのチェックボックスのチェックを外しましょう!これだけです!!

昨日ご紹介したheadに貼り付ける作業の手間はいりません。実際私もheadのコードを消去し、チェックボックスのチェックを外したらちゃんとスマホでアイコンが表示されていました!

ぴよたそ
ぴよたそ
こんな簡単なことだったなんて、、、泣

 

ちなみに!JINのテーマ使っているならFontAwesomeではなくJIN独自アイコンを利用するのをオススメします!下の記事をご参考ください。

 

【検証】FontAwesomeをオフにしたら表示速度は変わるのか検索ランキングに影響を与えると言われる表示速度。FontAwesomeは表示速度に影響を与えているのか検証してみました。表示速度の向上を目指す初心者ブロガー。...

 

まとめ

簡単な設定でも初心者なら少しの事でつまずいてしまいますよね。でもサイトが自分色に染まっていく楽しみを感じているのは私だけではないはず。

 

mariko
mariko
ひとつずつクリアして楽しんでいきましょう。