この記事は1年以上前に更新された内容のため、情報の一部が古い場合があります。最新の情報は公式マニュアルをご確認下さい。

AFFINGER5 機能紹介

見る人も楽しい豊富な「アニメーション」機能

サンプルはコチラ

AFFINGER には様々な動きでユーザーを愉しましたり表現を豊かにする「動き(モーション)」を用意しています。

動くアニメーションタグ

AFFINGER5及びEX版のver20180807以上の機能です

アニメーションが簡単に設定できるクイックタグを追加しました。

使い方

結果これは揺れるテストです

動かしたいテキストや画像を選択して「スタイル」>「アニメーション」より任意の動きを選択します。

原則としてはエディタ上では目印に[動]マークが付与されます。

Font Awesome Animationを利用しているので表示、利用環境はそれに順じます。

Webアイコンを動かす

ショートコードのfontawesomeのアイコンを設定する箇所で「タグ」>「ショートコード補助」>「アニメーション(クラス)」で用意されたクラスを付与するとアイコンに動きをつけることが可能になります。

結果

これはテストです

これはテストです

他にも以下の様な種類があります。マウスオーバー要はマウスオーバーした時に動きをつけるクラスです。

動き サンプル クラス マウスオーバー用
45°揺れ サンプル faa-wrench animated faa-wrench animated-hover
ベル揺れ サンプル faa-ring animated faa-ring animated-hover
横揺れ サンプル faa-horizontal animated faa-horizontal animated-hover
縦揺れ サンプル faa-vertical animated faa-vertical animated-hover
点滅

サンプル

faa-flash animated faa-flash animated-hover
バウンド サンプル faa-bounce animated faa-bounce animated-hover
 回転

サンプル

faa-spin animated faa-spin animated-hover
ふわふわ サンプル faa-float animated faa-float animated-hover
大小 サンプル faa-pulse animated faa-pulse animated-hover
シェイク サンプル faa-shake animated faa-shake animated-hover
シェイク(大) サンプル st-shake st-shake-hover
拡大(ゆれ) サンプル faa-tada animated faa-tada animated-hover
過ぎる サンプル faa-passing animated faa-passing animated-hover
戻る サンプル faa-passing-reverse animated faa-passing-reverse animated-hover
バースト サンプル faa-passing-reverse animated faa-passing-reverse animated-hover
落ちる サンプル faa-falling animated faa-falling animated-hover

※AMP不可

AFFINGER6を手に入れる

販売ページへ


※AMPページには対応していません

「稼ぐ」に特化したWordPressテーマ

今すぐ手に入れる

見れば効果8倍! /

アクセス「1」を「100」に変える 戦略的トップページテンプレート

ブログに訪れたユーザーを「ファン」にするための仕掛けを作る戦略的トップページレイアウトを解説。

無料ダウンロード

【無料】大人気!メルマガ配信中「稼ぐブログの設計図」

ブログで効率的に収益化するための考え方やノウハウをまとめました。

  • 【第1回】収益化に必要なのは「方法」ではなく「方向」
  • 【第2回】記事作成 ~ 人が「買う」と決める瞬間
  • 【第3回】検索でクリックされるタイトルの決め方
  • 【第4回】知っておくべき目次と見出しタグの意味
  • 【第5回】他言厳禁:売上が変わる7つの秘訣
  • 【第6回】必ず知っておきたい「重要&最低限」のSEO
  • 【第7回】稼ぐサイトの構成

配信登録フォーム

退会はいつでも可能です

-AFFINGER5, 機能紹介