WordPress テーマJIN(ジン)でアイコンを動かす方法【つまづくポイントの解説あり。】

Marさん

こんにちは！まーさんです。
よかったらTwitterもチェックしてみてくださいね。
@Mar_san_blog

右のツイッターアイコン⇒（）プルプル動いてますかね？
以前どこかのブログで見かけて、

「ほーーーん。洒落とるやん？やってみよか。」

と思い、導入してみました。

設定自体はとても簡単なのですが、意外な事でつまづいた(動かなかった)ので備忘録として残しておきます。

似たような環境なのに「なぜかうまく行かない。(憤怒)」とか「そもそもどうやんの？」とか言う人は見てみてください。

前提

動作(検証)環境

以下のバージョンのワードプレス＋テーマ【JIN】の環境でのみ検証しています。
ワードプレス ver 4.9.8
テーマ JIN ver 1.770

その他

headタグにコードを追加するので、実施は自己責任でお願いします。

アイコンを動かす方法

参考にしたサイト

ゆるりとぷらす

WordPress『JIN(ジン)』カスタマイズアイコンを動かす方法☆

https://yurupura.com/blog/jincustomize2/

基本的な手順

参考ページにはいろいろ書いてありますが、下記①と②だけで動くようになります。

①headタグにコードを追加する。

参考サイトの

『１、下記のコードをheadタグに追加します！このコードを追加しないとアイコンは動きません。』

という文章の下にあるコードをhead内に追加してください。

他のコードがある場合には最後に追加してください。
追加したら登録をクリックして、何でも良いので記事を開いてください。

②記事内にアイコンのコードを書く

記事を開いて「テキスト」に下記コードを書いてみてください。

<i class="fab fa-twitter fa-lg faa-ring animated"></i>

「ビジュアル」タブに戻ると「」<-こんなアイコンになっていると思います。
正しく設定できていれば、記事のプレビューで動きを確認することが出来ます。
（エディタ内では動きません。）

このアイコンは、FontAwesome(以下フォントオーサム)が提供していて、JINテーマではコードを書くと自動的に取得して表示してくれます。

完了

プレビューで動いているのが確認できれば完了です。

スコさん

え？これだけ？

Marさん

うん。これだけ。

「おい、アイコンみえねーし、うごかねーぞ！(憤怒)」て人は下を見てみてね。

つまづくポイント

コードのダブルクォーテーションが全角

参考サイトのコード、ダブルクォーテーションが全角になってます。。
※2018/12/05時点

どうやらワードプレスの仕様で、本文中の半角「“」等は、投稿すると勝手に全角に変換されてしまうようです。(この文のダブルクォーテーションも全角で表示されているはずです。)

テキスト内に打ち込んだ、コードとしての「”」は大丈夫です。

また、本文中でも「整形済みテキスト」を使えば半角のまま表示できます。

半角⇒「"」全角⇒「”」　整形済みテキスト

もうhead内に貼り付けてしまった方は、直接半角に打ち替えてください。
まだ貼り付けていない方は、メモ帳かなにかにコピーして打ち替えてからコピーしましょう。

Marさん

これで1時間以上なやんでもうた。。

うまくいかない人は、いちど半角全角をチェックしてみてください。

テキストエディタで見てやっと気付いた。

JINが対応しているのはver5.1まで

フォントオーサムのアイコンコードを使うためには、通常はCDNコードというものをフォントオーサムサイトから入手して、head内に記入する必要があります。

しかし、JINの場合には内蔵されているため、CDNコードの記入は不要です。

Marさん

ただし、アイコンを動かすためのコードはhead内に追記が必要です。

JIN ver1.770ではどうやらアイコンのバージョン5.1まで対応していそうです。

使いたいアイコンのバージョンを確認してから張り付けてください。

アイコンのバージョンが5.1よりも大きい場合、アイコンが表示されません。

アイコンのバージョンは、アイコンコードの隣に「update 5.0.0」のように書いてあります。

Tips

アイコンのコードの調べ方

下記のサイトに行って、使いたいアイコンをクリックしてください。
※色が濃い「Free」が無料で使えるアイコンです。

フォントオーサム

https://fontawesome.com/

フォントオーサムで使いたいアイコンをクリックすると、↓のようなページが表示されるので、「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	動きを表しています。※任意

動きのコード一覧

・動き一覧(大きさは2倍 fa-2x になっています。)
　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
・