イヤーびっくりしました。WordPressのテーマでお世話になっている有料人気テーマ「SANGO」のWebフォントが一部文字化けしていました（泣）
文字化けしていた表示としては、こんな感じでした。赤い丸の中をご覧ください。
四角型の青枠が見えますが、元々はツィッターアイコンで鳥の形をしていました。
文字化けしてるぅ〜
SANGOが親テーマを自動更新できるようになってからの初アップデートでした。アップデートの詳細内容などを見もせずに、すぐに更新ボタンをポチッとなと。。。
今回は大好きなWordPressテーマ「SANGO」のWebフォント「FontAwesome」を新しいバージョンに更新した奮闘記事ですｗ
FontAwesomeの文字化け
えっ！？文字化けしてる。。。聞いてないよ。どうしよう。。。自分の書いたソースがおかしいのかな？
といろいろと疑心暗鬼になったり、どうしたら良いんだ？と自分のやったことでおかしい部分を思い出そうとしていました。
結局はSANGOの方で「FontAwesome」のバージョンをアップしていたようです。
おぉ〜早くいってくれよーーーヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ
と言いつつも、自己責任だろ？と反省、、、自分の不注意が原因です。サルワカさんの更新アップデートの記事をよく見ていれば良かったな、、、と。
Webフォント「FontAwesome」とは？
そもそもWebフォントとは何かということですが、読んだ字のごとくインターネット上で使えるフォントという意味です（汗）
そのWebフォントの中で「FontAwesome」というのは、通常画像で対応するようなアイコンがフォントで対応できてしまうので、見た目にもわかりやすく、かつカッコいいすぐれた表現が可能になるフォントです。
かなり有名です。今まで無料でしたが、有料版も出ています。
Font AwesomeはWebデザインにはかかせない必須ツール（Webフォント）です。有料なWordPressテーマにはほぼ使われていますね。
Font Awesomeとはアイコンを文字として扱うことを可能にしたツールです。 画像ではなく文字なので、大きさや色などを変更することが可能！ ところが説明は英語でかつ、ソースをコピーしてHTMLに書き込むなど、初心者にはなかなか難しいツール。
そうなんです。ある程度使いこなすにはHTMLやCSSの知識が必要です。慣れないうちは大変ですよぉ〜。でも慣れれば問題ありません！
当サイトの「Font Awesome」修正点はこちら【備忘録】
これからはこのサイトで文字化けしていて、修正したポイントを記載していきます。
Search Regexでコードの置換対応
「Search Regex」とはWordPressのプラグインの一つです。キーワードを指定して、変更したいキーワードに置換してくれます。
キーワードなどの文言だけでなく、HTMLソースなどのコードも一括置換してくれるすぐれものプラグインです。
最初の修正は全ページのどこかにある、ソースコード修正なのでSearch Regexを使いました。
ツィッターアイコンの修正
冒頭の文章に入れているTwitterアイコンが文字化けしていました。
Twitterアイコンの修正コードはこちらです。
- ＜i class=”fa fa-twitter”＞ → ＜i class=”fab fa-twitter”＞
ソースをよく見ると「ｂ」があるのと無い違いだけなんですけど。。。
おぉ直った！(・∀・)
CSSでのソースコード修正対応
残りの文字化けは、この対応でほぼ終わりました。
- 外観→カスタマイズ→追加CSS
今回は上記のようなWordPress管理画面からの「追加CSS」から変更していますが、CSSの変更方法はその他にもいくつかあります。たとえば下記の方法など。
- 外観→テーマの編集→SANGO Child: スタイルシート (style.css)に追記
- FTPにて子テーマにあるスタイルシート (style.css)に追記してアップ
上記の方法は、子テーマにあるスタイルシート (style.css)を変更するという意味では同じですが、「WordPressの管理画面からやるのか」と「FTPでデータをアップする」という違いがあります。
「追加CSS」からの修正方法
追加CSSを選択すると右側はサイトのプレビュー画面になります。なので視覚的にCSSが修正できて便利です。
下記のサルワカさんの記述どおりに修正していきます。
font-family: Font Awesome;だった部分は、font-family: “Font Awesome 5 Free”;に置き換える必要があります（ブランド系アイコンの場合にはfont-family: “Font Awesome 5 Brands”;）。
参考サイト：サルワカ
要約するとこのようになります。同じようになっている記述をすべて変更していきます。
- 【前】font-family: Font Awesome;
- 【後】font-family: Font Awesome 5 Free;
↓
数が多いと面倒な作業になるため、テキストエディターに一度コピペして、一括置換するとすぐに作業が完了します。
おぉ直った！(・∀・)
上記のように文字化けして四角い文字になっていたのが、きちんと修正できました。
Font AwesomeのSolidタイプとRegularタイプでつまづいた件
上記の追加CSS修正（font-familyをすべてFont Awesome 5 Freeにする）をしても直っていない部分がまだありました。
いままで使っていて知らなかったんですけど、Font Awesomeって、SolidタイプとRegularタイプというタイプがあるということでした。
その場合はタイプ別にweightを400か900に変更せよとのことが書いてあります。
さらにSolidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて指定する必要があります。
詳しくは、疑似要素でFont Awesome5のアイコンを表示するが参考になるかと思います。
参考サイト：サルワカ
CSSを見てみると、文字化けしているWebフォントはすべて「font-weight:normal;」になっていました。
写真部分のフォントは「Solidタイプ」でしたので、weightを900にせよとのこと。追加CSSから下記のように修正しました。
- font-weight:normal;
- font-weight:900;
↓
Font Awesome 5のページを読んでみると上記の画像マークは「map-marker-alt」という名称でした。
右側に「SOLID」とあります。
なので「Solidタイプ」というのがわかりますね。
なのでfont-weightを900に変更していきます。
おぉ直った！(・∀・)
さっそくほかの部分もそのようにタイプ別にfont-weightを修正してみると、ほぼすべての文字化けが直っていました。※Regularタイプの場合は900部分を400にすればOK。
詳細はFontAwesome 5のページを参考にしてみてください。
スマホのフッター下部のメニューアイコンの文字化け
スマホのフッターメニューのアイコンが2ヶ所文字化けしていました。良かった気がついて。。。
WordPressの管理画面の外観のカスタマイズより、メニュー → SPフッター固定メニューから修正します。
SNSのフォローボタンとトップへいくボタンを修正しました。この2つです。
サイドバーのプロフィールのSNSアイコンの文字化け
サイドバー部分のSNSアイコンが文字化けしていました。。。
WordPressの管理画面の外観のカスタマイズより、メニュー → SPフッター固定メニューから修正しました。
- ＜i class=”fa fa-twitter”＞ → ＜ class=”fab fa-twitter”＞
- ＜i class=”fa fa-facebook”＞ → ＜i class=”fab fa-facebook”＞
おぉ直った！(・∀・)
前のバージョンにもどすことが可能なので無理しなくてよい
上記のCSSを変更しても駄目な場合があということで、その際はあきらめて前のバージョンに戻そうということでした。つまりFont Awesomeのバージョンを「5」から「4.7」にバージョンをもどせるということでした。
置き換えがやっぱり億劫な場合
アイコンタグを多くの場所で挿入しているのであれば、置き換えは骨の折れる作業かもしれません。
外観⇒カスタマイズ⇒詳細設定⇒「Font Awesome4.7を使用する」にチェックを入れることで、Font Awesome4.7の使用を継続することができます。
参考サイト：サルワカ
前のバージョンに戻せるんですよね。。。ここまでやってしまったので、前に戻すにも大変かなと。
た、たしかに・・・Σ(ﾟдﾟlll)ｶﾞｰﾝ
まとめ：本日の教訓｜アップデート（更新）は慎重に！
文字化けしているのがわかった瞬間に「やばい！」と、かなり久しぶりに焦りました。
WordPressのテーマのアップデートなどの際は慎重に、更新情報を確認してアップデートボタンを押しましょう。
いくらSANGOが簡単にアップデートできるようになったからと言って、むやみにボタンをポチるのは危険というお話でした！(^O^)／
なんかまだ文字化けしてるのあんじゃねという予感・・・さらに Σ(ﾟдﾟlll)ｶﾞｰﾝ
追記：まだあった文字化けしてたWebフォント
ショックです。まだ文字化けしていたWebフォントがありました。これは全ページ見直さないと駄目ですか。。。
リンクアイコンの文字化け
リンクの後に設定していたリンクアイコンが出ていないと思っていたら、文字化けでなく、文字消えですか（泣）
文字が化けていたのでなく、消えていました。こういうこともあるのですね。
Font Awesomeのサイトで確認すると2つの無料版がありました。
こう見ると今まで使っていたWebフォントのデザインは上の1の方なんですが、2の方がしっくりきますね。。。
ということでSearch Regexにて一括していきます。
- 今までのソース：＜i class=”fa fa-external-link fa-fw” /＞＜/i＞
- 変更後のソース：＜i class=”fas fa-external-link-square-alt fa-fw”＞＜/i＞
CSSも多少直します。外観→カテゴライズ→追加CSSです。
.fa-external-link-square-alt:before {
content: "\f360";
padding-left: 5px;
}
おぉ直った！(・∀・)
とりあえず一段落です（汗）またあったら報告していきます。
