こんにちはHaru(@yurupura_haru)です。
ブログの記事の中や、スマホ固定フッター等でアイコンを使用した際にアイコンが動いたら可愛いですよね！
前回のカスタマイズの”文字サイズ変更”等のコードが応用出来るので前回の記事を見ていない方はこちらからどうぞ☟
①このカスタムは、既にJINマニュアルのFontAwesomeでコードをコピーするよりスマホ固定フッターの設定が完了しているという過程でお伝えしています。
②今回のカスタマイズは、重要なheadタグ部分に触れるのため必ずバックアップを取ってからの作業をお願いします！
読みたい目次をクリック
アイコンは動いている方が目立つし何よりかわいい☆
静止している画面より一部動きがあった方が目を引きます。
というより『アイコンが動いてると可愛い』から動かしたかっただけなんですけどｗ
★After
カスタマイズ後は(判りにくいけど)こんな感じです♪画像は当ブログの『グローバルナビゲーション』画面です。※現在の設定は多少変更されています
記事内の場合はコードをテキストに貼り付けると動きます。固定スマホフッターも動作OKでした！目を引きたい箇所に使いたいですね♪
JIN(ジン)のアイコンに動きを追加する方法！
１、下記のコードを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のタグ設定からコードの追加が簡単に出来ます。
設定方法はこちらから確認▼▼▼
２、「表示したい設定のコード」を作成します
<i class=”アイコンコード+サイズ変更コード+動作コード”></i>
３、そのコードを「ナビゲーションラベル」や、記事内に貼り付けるとアイコンが動くようになります！
JIN(ジン)のアイコンを動かす詳細設定
- アイコンの動作と入れたい文字を決める
- 全体のバランスを整える(余白)
- 完成したコードを貼り付ける
アイコンの動作と入れたい文字を決める
<i class=”アイコンコード+動作コード“></i>
★アイコン動作＆動作コード一覧
ふりふり 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
全体のバランスを整える(余白)
半角／全角スペース
完成したコードを貼り付ける
<span style=”color: #ef8885;”><i class=”fab fa-twitter fa-lg faa-wrench animated“></i><br /><small>フォロー</small></span>
カラーコード変更+Twitterアイコン+Twitterアイコンのサイズ指定+アイコン動作コード+フォロー文字サイズ変更+フォロー文字
作成したコードを外観→メニュー→ナビゲーションラベルに貼り付けます。
まとめ
私の様な初心者でも簡単にカスタマイズ出来る操作性の高いJINは本当におすすめです！
【ブログ運営報告】アラフォー主婦ブロガーの1か月のPV・収益まとめ
【ブログ運営報告】アラフォー主婦ブロガー2か月目12,000PV達成！
【ブログ運営報告】アラフォー主婦ブロガー3か月目/スポンサー様3名決まりました！
ブログランキング参加中！ポチっとお願いします▼
＼ブログ✖️SNSで稼ぎたい人は／
＼Twitterで言えない情報を配信／
＼最短でフォロワー1000人達成／
