ブログ運営

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

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

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

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

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

WordPress『JIN(ジン)』カスタマイズ♪固定スマホフッターを変更する方法こんにちはHaru(@yurupura_haru)です。 スマホでブログを見た時に常に表示されている『固定スマホフッター』を自分好...
わんこず
わんこず
始める前に2点確認してね

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

FontAwesomeでコードをコピーする

JINマニュアルはこちら

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

Haru
Haru
ど素人が行ったカスタマイズなので何が起きても自己責任でよろしくお願いします!
JINでブログを始めたら1ヶ月目から収益が発生しました!
【ブログ運営報告】アラフォー主婦ブロガーの1か月のPV・収益まとめこんにちはHaru(@yurupura_haru)です。 ブログを始めて1ヶ月が経ちました!!長かった様な短かった様な… ワ...

 

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

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

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

★After

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

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

 

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

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

追加するコード

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css” type=”text/css” media=”all” />

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

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

HTMLタグ設定方法

 

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

コードを作成しよう

<i class=”アイコンコード+サイズ変更コード+動作コード”></i>

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

 

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

 

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

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

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

 

アイコン動作コード

<i class=”アイコンコード+動作コード“></i>

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

 ふりふり faa-wrench animated
 ぶるぶる faa-ring animated
 横ゆれ  faa-horizontal animated
 縦ゆれ  faa-vertical animated
 点滅   faa-flash animated
 ぴょん2   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

Haru
Haru
設定したい動作コードを、アイコンコードの後ろに貼り付けます。個人的には進む~が好き

全体のバランスを整える(余白)

 

余白を挿入

半角/全角スペース

Haru
Haru
文字とアイコンの間に『スペース』を入れるだけで調整出来ます

完成したコードを貼り付ける

固定スマホフッターでフォロー文字+twitterバードを動かす方法

<span style=”color: #ef8885;”><i class=”fab fa-twitter fa-lg faa-wrench animated“></i><br /><small>フォロー</small></span>

カラーコード変更+Twitterアイコン+Twitterアイコンのサイズ指定+アイコン動作コード+フォロー文字サイズ変更+フォロー文字

Haru
Haru
カラーコードや大きさは好きなものに変更してね

作成したコードを外観→メニュー→ナビゲーションラベルに貼り付けます。

Haru
Haru
おつかれさまでした!保存をしたあと動作確認をしたら終了です!

 

まとめ

私の様な初心者でも簡単にカスタマイズ出来る作性の高いJINは本当におすすめです!

JIN公式カスタマイズ情報はこちら

JINダウンロードはこちら

わんこず
わんこず
最後まで読んでくれてありがとな!ブログの更新情報はtwitterで発信しているからフォロー(@yurupura_haru)してくれたら嬉しいぞ♪

ブログランキング参加中!ポチっとお願いします▼

にほんブログ村 ブログブログ ブログ初心者へ
にほんブログ村