【ブログ】初心者ブロガー必見!サイドバーのSNSアイコンの文字化けを治す方法

雑記

こんにちは!ななみです。

サイドバーの設定をしてプロフィールを作りたいのに、SNSアイコンが文字化けして困った!そんな方いませんか?

私は先ほどまで3時間くらい悩んでいましたが、結局わずか30秒で解決することができました。その方法を紹介します。

カスタムHTMLの記述に1文字足すだけ

とても簡単!

外観⇒ウィジェットと進みカスタムHTMLを編集します。

記述の中に「class=”fa fa-twitter “」というものがあると思います。実はこの記述に問題があります。

「class=”fa fa-twitter “」を「class=”fab fa-twitter “」にするだけで完了です。

これで綺麗にSNSアイコンを表示することができました。フォントのバージョンごとにfaで良いバージョンとfabでないといけないバージョンがあるそうです。

経緯

私はLuxeritasというテーマを利用させていただいています。カスタマイズ性が高く好みに編集することが可能なテーマです。

今回はプロフィールをよく見るあの形にしたかったのです。

検索していると手法を紹介してくださっているサイトがいくつか見つかりました。その通りにポチポチとしていたのですが、どうしてもSNSアイコンの表示だけうまくいかなかったのです。

コードに詳しい友人に泣きついたところ上の方法を試してみてと言われました。

そんな1文字で変わるのかと思いましたがこの通りです。持つべきものは友なんですね~。

WordPressは最近大きなバージョンアップがあった

WordPressには大きなバージョンアップがあり、細かい仕様からエディタまでたくさん変化したそうです。

私はこの状態になってからアカウントを作ったのでなんとも思わなかったのですが、結構混乱があったみたいですね~。

現在のバージョンはWordPress 5.0.3ですが、インターネットに転がっているトラブル解決方法やプラグインはそれより前の4.X.Xの時の記事が多いです。

ほとんどは前のバージョンでも通用しますが、中には今回のように検索してもなかなか解決方法が見つからないということもあります。(このトラブルがWordPressのバージョンによって起きた物なのかは定かではありませんが。)

Font Awesomeのバージョンのせいみたいですね。

HTML,CSSの勉強も大昔に勉強しましたが、もうあまり覚えていません。カスタマイズは指南サイトのコピペばかりでなく、ある程度自分で調整できるように知識をつけていきたいですね。

お読みいただきありがとうございました。

コメント

タイトルとURLをコピーしました