FontAwesom(フォントオウサム)を使おうとして文字化け。SNS連携のメニューボタンと問い合わせボタンが表示しなくなった場合の解消方法。【*オープンケージ*】

FontAwesomeを使っていて画面が文字化けした。

解消方法と原因を知りたい!

 

こんな人に参考になる解消方法紹介記事、書きます😊

 

FontAwesomを使いたくてブログのコードをさわっていたらボタンが文字化けしたこと

今日は最近とっても時間をかけて解消した不具合について書いておきます。

 

原因を突き止めるまでにかなり時間がかかってしまったので、同じ現象で困っている人は参考にしてみて下さいね💦

FontAwesomはおしゃれなアイコンツール!基本的な使い方について

FontAwesom

ワードプレスで書かれたブログを見ていると、こんな→おしゃれでかわいい絵文字を使った記事を目にしませんか?

 

これ、『FontAwesom(フォントオウサム)』というアイコンツールを使ってブログ上に挿入できるアイコンなんです。

 

使い方はっとてもシンプル♪

ものすごく簡単にいうとスマホで使用する絵文字のようなものなのですが😃

 

FontAwesomのアイコンは”画像”ではなく”文字”なので、大きさや、を変更したり、アニメーションをつけたり等、 こんな感じで

 

自分の好みに装飾できでしまうのです😊

 

基本的にはHTMLに書き込んで編集していきます。

 

文字なのでテキスト編集のタブに書き込んで反映させるという具合です。

 

投稿画面のこの部分です。

こう書きこむと、ブログ投稿した画面では

 

こうなります♪



 

さりぃ♥
かわいいですね💕

 

FontAwesomのアイコンはいたるところでデフォルト表示されていて、よく見かけるアイコンなのでブログが一気にサマになりますよね😊

 

普通に入力すると黒色に反映するのですが、わたしはピンクが好きなので、基本ピンク系の色を足すようなコードをCSSに追加して使っています❤

 

 

FontAwesomが文字化け!原因とその解消方法

通常、FontAwesomを使う際はブログのテーマエディターの画面に専用のコードを書いて事前準備をする必要があります。

 

たいてい、FontAwesomeの使い方を紹介しているブログでは手順として、ダッシュボード上の【外観】>【テーマエディター】>【header.php】にFontAwesomのアイコンを読み込むためのコードを書き込む方法が書いてあります。

 

ところが、このブログテーマ『オープンケージ』のアルバトロスでは、【header.php】にFontAwesomのコードを貼り付けると画面がこんな感じでSNSの連携ボタンと

 

問い合わせボタンが文字化けして、デフォルト表示のアイコンが消えてしまいます😫

 

スマホ画面もこんな感じ・・💦

 

Google検索で原因について調べてみたのですが、なかなか原因を見つけることができず、途方にくれることに😥

 

プラグインが原因かとも思い、一度全プラグインを停止させてみましたが効果なし

 

オープンケージの問い合わせ窓口に問い合わせると

 

『アルバトロスのデフォルト設定のFontAwesomと「WordPress Visual Icon Font」のプラグインがデータ競合していて表示不具合を起こしている』

 

ということでした。

 

【header.php】にコードを入力のと同時に、投稿画面からアイコンをボタン1つで入力できるよう

『Visual Icon Fonts』というプラグインを導入していたのですが、これが原因だったようです。

 

※FontAwesomを使うために『WordPress Visual Icon Font』をインストールするように書かれているブログもありますが、このアルバトロのステーマとは相性が悪いようです。

 

アルバトロスのデフォルト設定のFontAwesomは”Ver4.7.0”で、”Ver5.9.0”のコードも使えません。

 

ということで、【header.php】に入力したコードを消して『WordPress Visual Icon Font』のプラグインを停止させたところ・・

 

さりぃ♥
元通りになりました♪

そもそもアルバトロスのテーマではFontAwesomの”Ver4.7.0”のアイコンがデフォルト設定されているので【header.php】にはコードを入力する必要がなかったのです。

 

FontAwesomのサイトからアイコンのコードをコピーしてそのままテキストエディタに貼り付けてみたところ・・

こんな感じでかわいくお目当てのアイコンが入力できました。

 

もちろんコードを変えるだけ色をかえたり動きをつけたり大きさをかえたりもできます。

 

使い方詳細については別記事で書きますね。

 

他の方のブログを読んでいると

 

さりぃ♥
簡単に設定できそう😃

 

と思っていたのですが、超初心者のわたしは思うように使えるようになるまで、数週間もかかってしまいました

 

使っているブログテーマとFontAwesomのVerの相性によってはうまく反映しないことがあるのでブログテーマによっては微調整が必要です

 

『WordPress Visual Icon Font』とアルバトロスのテーマの相性についてはこちらのオープンケージ公式サイトの記事にも書いてありました。

 

同じアルバトロスのブログテーマを使用している方はこちらの記事と同じように設定してもらえれば使えるようになるので、是非参考にして下さいね。

 

補足
『WordPress Visual Icon Font』はスマホの画面の問い合わせボタンの表示が崩れてしまう原因になるようなのですが、この後再度インストールしてみたところ問題なく表示されたので、今は有効にして使っています。個人的に、【header.php】に入力したコードが原因だったのだと思っているのですが、また不具合がでた場合は追記していきますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

アバター

「さりぃ ❤」です。 IT関連の一般企業勤めのアラサーOL。 2回の転職を経て現職は3年目に突入。 時の流れに身を任せて、気付けば今年で社会人8年目! フリーランス・独立を夢見て副業に勤しむ毎日を送っています。 目標は副業が本業の収入を超えたら起業すること♪ 自分がWordPressを始めた頃の気持ちをテーマに、初心者さんに役立ちそうな記事を丁寧に書いています。 あとは日々こつこつしている副業とその成果についても更新中です♥ 少しでもお役に立てる情報をお届け出来ますように・・