【SWELL】アニメーションをブロックとアイコンに付ける方法

当ページのリンクには広告が含まれています。
初心者ブロガー

アニメーションをブロックやアイコンに付けたいです。プログラミングは分からないのでコードを書かずにアニメーションを付ける方法を教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • 「Blocks Animation」でブロックにアニメーションを付ける方法
  • 「Font Awesome」のアイコンにアニメーションを付ける方法
本記事の内容

【SWELL】アニメーションをブロックとアイコンに付ける方法

以下の順番で解説していきます。

  • 「Blocks Animation」でブロックにアニメーションを付ける
  • 「Font Awesome」のアイコンにアニメーションを付ける

「Blocks Animation」でブロックにアニメーションを付ける

「Blocks Animation」とは

  • CSSアニメーションを追加できるプラグイン
  • Gurtenbergの全ブロックに対応
  • インストール後すぐに利用できる(初期設定なし)
  • 編集画面からアニメーションの確認ができる(「アニメーションを再生」ボタンがあり繰り返し見直しができる) ※下記動画を参照
  • コードを書く必要一切なし
  • 現在も開発が続いているためセキュリティ面の心配も少ない

公式サイト

WordPress.org 日本語
Blocks Animation: CSS Animations for Gutenberg Blocks Blocks Animation は、Gutenberg のすべてのブロックに最も洗練された方法で CSS アニメーションを追加することができます。

編集画面からアニメーションの確認ができる

※「アニメーションを再生」ボタンがあり繰り返し見直しができます。

プレビュー画面を開かずに確認できるのには感動しました🥹

アニメーションは全部で55パターン

※2023年10月25日時点

  • 上から移動後に拡大
  • 左から移動後に拡大
  • 右から移動後に拡大
  • 下から移動後に拡大
  • バウンド
  • バウンスイン
  • 下へバウンスイン
  • 左へバウンスイン
  • 右へバウンスイン
  • 上へバウンスイン
  • フェードイン
  • 下へフェードイン
  • 下へ大きくフェードイン
  • 左へフェードイン
  • 左へ大きくフェードイン
  • 右へフェードイン
  • 右へ大きくフェードイン
  • 上へフェードイン
  • 左上からフェードイン
  • 右上からフェードイン
  • 左下からフェードイン
  • 右下からフェードイン
  • 裏返す
  • 横に裏返す
  • 縦に裏返す
  • 中央支点で回転
  • 左を支点に上から回転
  • 右を支点に上から回転
  • 左を支点に下から回転
  • 右を支点に下から回転
  • 上からスライドイン
  • 左からスライドイン
  • 右からスライドイン
  • 下からスライドイン
  • ズームイン
  • 下へズームイン
  • 左へズームイン
  • 右へズームイン
  • 上へズームイン
  • ロールイン
  • 右から差し込む
  • 左から差し込む
  • フラッシュ
  • 脈打つ
  • 輪ゴム
  • 横方向から揺らす
  • 縦方向に揺らす
  • ブレ
  • 揺れる
  • TaDa
  • ふらつき
  • ゼリー
  • 鼓動
  • 蝶番
  • Jack in The Box

「Blocks Animation」のインストール

管理画面メニューから、「プラグイン」>「新規追加」を選択します。

「プラグインの検索…」に下記をコピペします。

Blocks Animation

Blocks Animationを「インストール」>「有効化」します。

「Blocks Animation」の使用方法

管理画面メニューから、「投稿」>「新規追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「メディア」>「画像」を選択します。

画像ブロックをクリックしてから、「アップロード」または「メディアライブラリ」より画像を挿入します。

画像ブロックをクリックしてから、「設定」>「ブロック」>「アニメーション」を選択します。

  • アニメーション:「55パターン」から選択できます。
  • 遅延:「なし・100ミリ秒・200ミリ秒・500ミリ秒・1秒・2秒・3秒・4秒・5秒」から選択できます。
  • 速度:「やや低速・低速・デフォルト・やや高速・高速」から選択できます。

これで画像ブロックにアニメーションが付きました。

「カウントアニメーション」「タイピングアニメーション」については後ほど解説します。

アニメーション全55パターンを一挙紹介

上から移動後に拡大

左から移動後に拡大

右から移動後に拡大

下から移動後に拡大

バウンド

バウンスイン

下へバウンスイン

左へバウンスイン

右へバウンスイン

上へバウンスイン

フェードイン

下へフェードイン

下へ大きくフェードイン

左へフェードイン

左へ大きくフェードイン

右へフェードイン

右へ大きくフェードイン

上へフェードイン

左上からフェードイン

右上からフェードイン

左下からフェードイン

右下からフェードイン

裏返す

横に裏返す

アニメーションから「横に裏返す」を選択しているのになぜか縦に裏返ります😅

縦に裏返す

アニメーションから「縦に裏返す」を選択しているのになぜか横に裏返ります😅

中央支点で回転

左を支点に上から回転

右を支点に上から回転

左を支点に下から回転

右を支点に下から回転

上からスライドイン

左からスライドイン

右からスライドイン

下からスライドイン

ズームイン

下へズームイン

左へズームイン

右へズームイン

上へズームイン

ロールイン

右から差し込む

左から差し込む

フラッシュ

脈打つ

輪ゴム

横方向から揺らす

縦方向に揺らす

ブレ

揺れる

TaDa

ふらつき

ゼリー

鼓動

蝶番

Jack in The Box

カウントアニメーション

※プレビュー画面からの確認が必要です。

数字を全選択してから、「(全てを表示)」>「カウントアニメーション」を選択します。

表示されたカウントアニメーションから以下を選択します。

  • 遅延:「なし・100ミリ秒・200ミリ秒・500ミリ秒・1秒・2秒・3秒・4秒・5秒」から選択できます。
  • 速度:「やや低速・低速・デフォルト・やや高速・高速」から選択できます。

プレビュー画面で確認

タイピングアニメーション

※プレビュー画面からの確認が必要です。

キストを全選択してから、「(全て表示)」>「タイピングアニメーション」を選択します。

表示されたタイピングアニメーションから以下を選択します。

  • 遅延:「なし・100ミリ秒・200ミリ秒・500ミリ秒・1秒・2秒・3秒・4秒・5秒」から選択できます。
  • 速度:「やや低速・低速・デフォルト・やや高速・高速」から選択できます。

プレビュー画面で確認

「Font Awesome」のアイコンにアニメーションを付ける

「Font Awesome」とは

  • WebサイトになどのWebアイコンフォントを表示させることのできるサービス
  • 有料版と無料版を合わせると「26,233」種類あり、無料版だけでも「2,025」種類ある ※2023年10月25日時点
  • カラーやサイズ、向きを変えたり、アニメーションを付けることもできる

SWELLで「Font Awesome」を使えるようにする

管理画面メニューから、「SWELL設定」>「SWELL設定」を選択します。

タブを「Font Awesome」に切り替えて下記の設定にします。

  • 読み込み方:「CSSで読み込む」を選択します。
  • バージョン:「v6」を選択します。

これでSWELLで「Font Awesome」が使えるようになりました。

「Font Awesome」にアクセス

下記から公式サイトに移動します。

あわせて読みたい
Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

トップページの「Icons」を選択します。

「2,025 free and open-source icons」を選択します。

※2023年10月25日時点では、無料で使えるアイコンが「2,025点」あります。

アイコンの一覧ページが表示されました。

アイコンに付けるアニメーションを決める

アニメーションは全部で9パターン

※2023年10月25日時点

  • Beat
  • Beat Fade
  • Bounce
  • Fade
  • Flip
  • Shake
  • Spin
  • Spin Reverse
  • Spin Pulse

表示させたいアイコンを探して開いてから、「No Animation」よりアニメーションを選択します。

下記画像では、「Beat」を選択しています。

「<i class="○○"></i>」の○○の部分は後ほど使います(コピペします)。

アイコンにアニメーションを付ける

管理画面メニューから、「投稿」>「新規追加」を選択します。

下記のショートコードをコピペします(どちらでも使用できます)。


[icon class="ここにアイコンのクラス名"]

[アイコン class="ここにアイコンのクラス名"]

「ここにアイコンのクラス名」に先ほどのコードをコピペします。

先ほどのコードとは、「<i class="○○"></i>」 の○○です。

※ショートコードのテキスト色を変えるとアイコンがその色で表示されます。

これでアイコンにアニメーションが付きました。

アニメーション全9パターンを一挙紹介

Beat

Beat Fade

Bounce

Fade

Flip

Shake

Spin

Spin Reverse

Spin Pulse

以上で解説を終わります。

また、今回の記事を参考にしつつ色々と触ってみることで実装の幅を増やして頂ければと思います。

本記事が読者の疑問を解決する役に立つと幸いです。

最後まで読んで頂きありがとうございました。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容