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】に入力したコードが原因だったのだと思っているのですが、また不具合がでた場合は追記していきますね。

*Share this article !*

コメントを残す

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

CAPTCHA


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