こんな人に参考になる解消方法紹介記事、書きます😊
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】にコードを入力のと同時に、投稿画面からアイコンをボタン１つで入力できるよう
『Visual Icon Fonts』というプラグインを導入していたのですが、これが原因だったようです。
アルバトロスのデフォルト設定の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』とアルバトロスのテーマの相性についてはこちらのオープンケージ公式サイトの記事にも書いてありました。
同じアルバトロスのブログテーマを使用している方はこちらの記事と同じように設定してもらえれば使えるようになるので、是非参考にして下さいね。
解消方法と原因を知りたい！