遊戯王のコレめせ!

コレクターの目線から遊戯王を分析するブログ。最新情報・相場情報・コレクターのための情報など幅広くまとめます。

【2018年2月】FontAwesomeで文字化けする・正しく表示されない時の対処法



 FontAwesomeに躓いた人はこれを読んで下さい、多分解決します。FontAwesomeのアイコンが文字化けしてしまう、アニメーションを付けても静止したまま動かない、設定が合っているはずなのにナゼ?を解消します。

 

 

 

 

はじめに

 恐らくFontAwesomeを意気揚々と入れてみて、思ったように動作しなくて辞めてしまった人、多いんじゃないでしょうか。私もさっきまでその1人でした(笑)

 導入を紹介するサイトは腐るほどあるのに、やっぱり一度躓いた時に解決策が書いてある記事のなんと少ないこと・・・。そんな私のような人の為に躓いた点を分かりやすく紹介します。

 導入する際の基本的なやり方は他の記事を参照してください。

 

saruwakakun.com

moghouse.hatenablog.com

  他にもまとめている記事は沢山あると思います。

 

 

 

FontAwesomeを使用した時に起こった問題点

 これらの記事に沿っても何故か私の場合正しくできませんでした。

 起こった問題としては

  1. FontAwesomeをはてなブログに貼り付けると文字化けする
  2. アイコンによって文字化けする・しないがある
  3. アイコンのアニメーションの動作がおかしい・若しくは動かない

 などです。勿論参照しているFontAwesomeのバージョンは新しいものを選んでいますし、無料アイコンを使っている中でのことです。

 

 

 

 

対応策1

 完全な対応策ではありませんでしたが、このような方法が紹介されていました。

 ※こちらの記事の内容は実行しなくても良いです

 

Font Awesome が文字化け | 眉ぼってなかなか変換されない備忘

 

 「i タグにfont-familyを書く」を実際に実行してみると文字化けは解消され、今まで見れなかったアイコンは見ることができました。

f:id:aqn1313:20180216043639p:plain

 一応記述としてはこんな感じ。

 あまりバラけさせたくないのでhtml上に記述していましたが、あまり詳しくない人からすればそのあたりから躓いてしまいます。

 ただこの問題点としては、アイコンは表示されてもアニメーションが正しく動作しないというところです。そのため、アニメーションを考えていない人はこの対処でも良いのかなと思います。

 

 

 

対応策2

 では私の場合何が間違っていたのかというと、FontAwesomeからそのままコピーしていることに問題がありました。公式からそのままコピーすれば間違いないと思っていたのでそこが落とし穴でした。

 

f:id:aqn1313:20180216044659p:plain

 

 例えば適当なアイコンを検索した時に画像の位置から持ってくる場合

<i class="fas fa-arrows-alt"></i> ではなく
<i class="fa fa-arrows-alt"></i> にしてみてください。

 そうすると表示されると思います。

 アイコンによって「"fa fa-○○"」となっていないものがあり、それらは私の環境の場合正しく表示されませんでした。それに気付くまでかなり時間がかかりました。

 

 

 

 またアイコンに色違いがある場合

 

f:id:aqn1313:20180216112157p:plain

 

 こういったものは上記で消した部分「fa"s"やfa"r"」で分けているためこの方法では表示できませんでした。そのため別のもっと正しい方法があると思うのですが、これでほとんどは正常に動くので私は満足しています。

 

 

 

 ちなみにアニメーションに関しては

 

f:id:aqn1313:20180216045629p:plain

 

 こちらの名称通りで合っていますが、こちらの場合「faa-○○」なのでごっちゃになる所だけ注意すれば問題ないかと思います。

 

 

 

 

その他初心者が躓くポイント

・マウスカーソルでアニメーションを動かす指定

 マウスカーソルで動かす指定は「On parent hover」です。

 「On parent hover」classってどこに付けるの?っていうのも躓くポイントだと思いますが、私のページの場合リンクタグに付けています。他にも<p>,<div>なんかに付けても良いでしょうね。どこをひとくくりにするかで考えると良さそうです。

 

 

・html上でcssに切り替え

 意外とこれを紹介している記事は無いので分かるまで苦労します。 

<style type="text/css">
ここにcssの内容
</style>

 これだけです。上記の画像にもこれが入っているので参考になるかと思います。はてなブログの携帯設定にはcssが無いのでこれを入れて初めてcssの設定ができます。初心者御用達、躓きポイントですね。

 

 

私の体験からのブログパーツ編集アドバイス

 私は学校で教わった程度のプログラミング知識しかありませんでしたが、このブログ内パーツはほぼ全て基盤となるソースを別サイトから頂いて自分のサイト用に組み替えています

 

 仮にもし「私、htmlとかcssとか全く分からないし、ブログパーツに変にこだわるの諦めようかな・・・」みたいなことを思った人に向けて、私の体験から少しだけアドバイスをします。

 

  • 取りあえず拝借してそのまま貼り付けろ!

 まずは、取りあえず配布されているものを有り難く頂戴して、そのまま貼り付けてしまいます。理由は編集しだすとキリがないからです。私は特にそうなんですが、1度こだわりだすとトコトン自分の理想に加工したくなる人間なので、最初の一歩がとにかく重いです。

 「これ導入したいな」と思っても、「取りあえず導入して、色変えて、見た目変えて、仕様変えて・・・」と考え出すと後回しにしがちです。なので取りあえずそのまま貼り付けて導入しちゃって、暇が出来たら少しずつ自分の理想に編集していけば良いと思います。ザイガルニック効果というやつですね。

 

  • それなりに見せる方法は色彩関連と影!

 まあ、私のブログもプロの人から見たらまだまだなんでしょうが、加工する上で一番変わってくるのは色合いと影です。

 これはやってみると分かるんですが、かなりセンスが問われます。特に色合いに関しては、加工しだすと理想の色にすることも難しいし、それぞれの色の統一感を出すのは本当に難しいということに気づかされると思います。逆に、合った色の統一感を出すことが出来れば、一気にそれなりに見せることが可能です。

 色の統一感を出せたなら、そこに高級感や質感を加える必要があります。その一番手っ取り早い方法が影と言う訳です。

 

  • 「opacity」には注意しろ!

 「opacity」は要素の透明度を指定する項目です。

 分かりやすく説明すると、”マウスカーソルを乗せると、ボタンがちょっと薄くなったりするあれ”に使われてます。マウスカーソルが乗ってるよっていうことですね。

 これが何故注意したほうが良いかというと、選んだ色がopacityで透けさせた状態で表示されていることがあるためです。色々と編集していると、思った色にならないことがあり「なんで~~!!」ということがありますが、大体この指定があるのを見落としているのが原因であることが多いです。

 

 パッと思いついた注意点はこのぐらいです。

 これ以上の記事は書く予定ないですが、もし需要があるならブログパーツの編集にあたって重宝してる方法とか書くかもしれません。

 

 

まとめ

 私の環境での話でした。これに気づくまではアニメーションはできないものと諦めて、大した知識も無いのにcss上から無理やりZ軸基点にして回転させる~というプログラミングをひたすら試していました…。

 まとめ記事の本文からコピーしている人であれば、こういった問題も無かったかもしれませんが、ちょっとこだわってみようみたいな人は陥りやすいかもしれない問題ですね。プログラミングはいじってみないと分からないことが多いので、気付けば簡単ですが分かるまでかなり時間がかかってしまうのが難点です。

 私もそこまで詳しいわけでは無いので、記事中におかしなところがありましたら「コンタクト」よりご連絡ください。あくまで私がとった対処法です。

 もし他に気付いたことがあれば追加していきます。

 

 それではまた。