右のツイッターアイコン⇒()プルプル動いてますかね?
以前どこかのブログで見かけて、
「ほーーーん。洒落とるやん?やってみよか。」
と思い、導入してみました。
設定自体はとても簡単なのですが、意外な事でつまづいた(動かなかった)ので備忘録として残しておきます。
似たような環境なのに「なぜかうまく行かない。(憤怒)」とか「そもそもどうやんの?」とか言う人は見てみてください。
目次
前提
動作(検証)環境
以下のバージョンのワードプレス+テーマ【JIN】の環境でのみ検証しています。
ワードプレス ver 4.9.8
テーマ JIN ver 1.770
その他
headタグにコードを追加するので、実施は自己責任でお願いします。
アイコンを動かす方法
参考にしたサイト
基本的な手順
参考ページにはいろいろ書いてありますが、下記①と②だけで動くようになります。
①headタグにコードを追加する。
参考サイトの
『1、下記のコードをheadタグに追加します!このコードを追加しないとアイコンは動きません。』
という文章の下にあるコードをhead内に追加してください。

他のコードがある場合には最後に追加してください。
追加したら登録をクリックして、何でも良いので記事を開いてください。
②記事内にアイコンのコードを書く
記事を開いて「テキスト」に下記コードを書いてみてください。
<i class="fab fa-twitter fa-lg faa-ring animated"></i>
「ビジュアル」タブに戻ると「」<-こんなアイコンになっていると思います。
正しく設定できていれば、記事のプレビューで動きを確認することが出来ます。
(エディタ内では動きません。)
このアイコンは、FontAwesome(以下フォントオーサム)が提供していて、JINテーマではコードを書くと自動的に取得して表示してくれます。
完了
プレビューで動いているのが確認できれば完了です。
「おい、アイコンみえねーし、うごかねーぞ!(憤怒)」て人は下を見てみてね。
つまづくポイント
コードのダブルクォーテーションが全角
参考サイトのコード、ダブルクォーテーションが全角になってます。。
※2018/12/05時点
どうやらワードプレスの仕様で、本文中の半角「“」等は、投稿すると勝手に全角に変換されてしまうようです。(この文のダブルクォーテーションも全角で表示されているはずです。)
テキスト内に打ち込んだ、コードとしての「”」は大丈夫です。
また、本文中でも「整形済みテキスト」を使えば半角のまま表示できます。
半角⇒「"」全角⇒「”」 整形済みテキスト
もうhead内に貼り付けてしまった方は、直接半角に打ち替えてください。
まだ貼り付けていない方は、メモ帳かなにかにコピーして打ち替えてからコピーしましょう。
うまくいかない人は、いちど半角全角をチェックしてみてください。

JINが対応しているのはver5.1まで
フォントオーサムのアイコンコードを使うためには、通常はCDNコードというものをフォントオーサムサイトから入手して、head内に記入する必要があります。
しかし、JINの場合には内蔵されているため、CDNコードの記入は不要です。
JIN ver1.770ではどうやらアイコンのバージョン5.1まで対応していそうです。
使いたいアイコンのバージョンを確認してから張り付けてください。
アイコンのバージョンが5.1よりも大きい場合、アイコンが表示されません。
アイコンのバージョンは、アイコンコードの隣に「update 5.0.0」のように書いてあります。
Tips
アイコンのコードの調べ方
下記のサイトに行って、使いたいアイコンをクリックしてください。
※色が濃い「Free」が無料で使えるアイコンです。
フォントオーサム
フォントオーサムで使いたいアイコンをクリックすると、↓のようなページが表示されるので、「Click to Copy HTML」と書かれている場所をクリックしてください。

クリックすると「Copied」と表示され、クリップボードにコピーされた状態になります。
そのままワードプレスの記事の「テキスト」に貼り付けてください。
コードを追加して、大きさを変えることもできます。
大きさ・動きのコード追加
・サンプルコード
<i class="fas fa-address-card fa-5x faa-ring animated"></i>
上のようにアイコンのコードの中に半角スペースを空けてコードを追加しましょう。
・サンプルコードの意味
fas fa-address-card | アイコンの種類を表しています。※必須 |
---|---|
fa-5x | 大きさを表しています。※任意 |
faa-ring animated | 動きを表しています。※任意 |
動きのコード一覧
faa-wrench animated
faa-ring animated
faa-horizontal animated
faa-vertical animated
faa-flash animated
faa-bounce animated
faa-spin animated
faa-float animated
faa-pulse animated
faa-shake animated
faa-tada animated
faa-passing animated
faa-passing-reverse animated
faa-burst animated
・
その他
その他詳しいことはサルワカ先生の下記ページに書かれています。
アイコンを動かす方法(おさらい)
初回
ヘッダーにコードをコピーする。
記事を書くとき
①使いたいアイコンのコードを「フォントオーサム」で調べてコピペする。
②動かすコードや大きさを追記する
③プレビューで動きをチェックする。
(2021/04/16 20:24:24時点 Amazon調べ-詳細)