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

こんにちはHaru(@yurupura_haru)です。

ブログの記事の中や、スマホ固定フッター等でアイコンを使用した際にアイコンが動いたら可愛いですよね！

Haru

今回は、twitterの小鳥も動かすカスタマイズです！

前回のカスタマイズの”文字サイズ変更”等のコードが応用出来るので前回の記事を見ていない方はこちらからどうぞ☟

WordPress『JIN(ジン)』カスタマイズ♪固定スマホフッターを変更する方法スマホでブログを見た時に常に表示される『固定スマホフッター』を自分好みに変更したいと思ったことはありませんか？この記事では、 ...

わんこず

始める前に2点確認してね！

①このカスタムは、既にJINマニュアルのFontAwesomeでコードをコピーするよりスマホ固定フッターの設定が完了しているという過程でお伝えしています。

FontAwesomeでコードをコピーする

JINマニュアルはこちら

②今回のカスタマイズは、重要なheadタグ部分に触れるのため必ずバックアップを取ってからの作業をお願いします！

Haru

ど素人が行ったカスタマイズなので何が起きても自己責任でよろしくお願いします！

JINでブログを始めたら1ヶ月目から収益が発生しました！

【ブログ運営報告】アラフォー主婦ブロガーの1か月のPV・収益まとめこんにちはHaru(@yurupura_haru)です。ブログを始めて1ヶ月が経ちました！！長かった様な短かった様な… ワ...

読みたい目次をクリック

アイコンは動いている方が目立つし何よりかわいい☆

静止している画面より一部動きがあった方が目を引きます。

というより『アイコンが動いてると可愛い』から動かしたかっただけなんですけどｗ

★After

カスタマイズ後は(判りにくいけど)こんな感じです♪画像は当ブログの『グローバルナビゲーション』画面です。※現在の設定は多少変更されています

記事内の場合はコードをテキストに貼り付けると動きます。固定スマホフッターも動作OKでした！目を引きたい箇所に使いたいですね♪

JIN(ジン)のアイコンに動きを追加する方法！

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

追加するコード

JINはHTMLのタグ設定からコードの追加が簡単に出来ます。

設定方法はこちらから確認▼▼▼

HTMLタグ設定方法

２、「表示したい設定のコード」を作成します

コードを作成しよう

３、そのコードを「ナビゲーションラベル」や、記事内に貼り付けるとアイコンが動くようになります！

JIN(ジン)のアイコンを動かす詳細設定

アイコンの動作と入れたい文字を決める
全体のバランスを整える(余白)
完成したコードを貼り付ける

Haru

私がこのブログに実際に設定したコードと手順で説明するよ

アイコンの動作と入れたい文字を決める

アイコン動作コード

★アイコン動作＆動作コード一覧

　ふりふり　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