便利すぎる神ツールを紹介する情報メディア、無料で始められる神ツールを活用しよう。

※ 記事内でアフィリエイト広告を利用しています

Blocks Animation: ブロックにアニメーションを追加できるWordPressプラグイン

Blocks Animation

Blocks Animationは、ブロックエディタのブロックにCSSアニメーションを追加できるWordPressプラグインです。

記事に配置したブロック(画像・テキスト・リンクボタンなど)が画面スクロールに合わせてアニメーションで動くようになります。全てではありませんが、殆どのブロックで動作します。

使い方は簡単です。記事編集中のブロックエディタでブロックを選択して、ブロックの設定パネルからアニメーションの種類を指定するだけで、選択ブロックにCSSアニメーションを適用できます。

ブロックで配置したコンテンツに動きをつけることで、強調したい部分がアニメーションで目立つようになります。ブログ記事のコンテンツを動かして訴求力を上げたい場合に役立つプラグインです。
便利なプラグインなので活用しましょう。

このプラグインを利用すると

ネタワン
ネタワン
記事に配置したコンテンツが画面のスクロールに合わせて動きます。

目次[閉じる]

広告

はじめに

このプラグインが優れていること

  1. ブロックエディタのブロックにCSSアニメーションを追加できる。
  2. 記事に配置したブロックが画面スクロールに合わせてアニメーションで動く。
  3. 多数のCSSアニメーションを利用できる。
  4. アニメーションの「遅延」「速度」を設定できる。
  5. 殆どのブロックで動作する(全てではない)
  6. プラグインの大部分が日本語化されている(全てではない)

期待できる効果

  • アニメーションで動きのある記事を実現できる。
  • 強調したい部分が目立ち、訴求力が上がる。
  • 申し込みボタン(CTA)に動きをつけることで、記事を読む人の反応を誘発する。

アニメーションの見本

下記は見本として画面撮影したGIFアニメです。

アニメーション

選択ブロックをアニメーションで動かすことができます。

アニメーション

申し込みボタンの例

例えば、お問合せなどの申し込みボタンのブロックにアニメーションをつけて目立たせることができます。
下記は3つのボタンにそれぞれ異なるアニメーションをつけた例です。

申し込みボタンの例

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

テキストを配置したブロックにタイピング風の効果を追加できる。

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

カウントアニメーション

数字を配置したブロックにカウントダウン風の効果を追加できる。

カウントアニメーション

利用できるアニメーション

  • 移動後に拡大(4種類)
  • バウンス(6種類)
  • フェードイン(12種類)
  • 裏返す(3種類)
  • 入れ替わり(5種類)
  • スライドイン(4種類)
  • ズームイン(5種類)
  • ロールイン(1種類)
  • 差し込む(2種類)
  • その他(13種類)

利用できるテキストアニメーション

  • タイピングアニメーション
  • カウントアニメーション

広告

信頼性

プラグインが定期的にアップデートされており、安定的に保守が行われています。
サポートフォーラムでも開発者が質問に回答しています。
プラグインの保守は適切に行われているようです。

確認日:2025.02.13

確認できた内容
  • 定期的なアップデートの実績
  • サポートフォーラム評判(好評)
  • プラグインの評価(好評)
  • プラグインの利用者数

インストール方法

Blocks Animation

WordPressの管理画面から検索してインストールしてください。
もしくは「wordpress.org」からダウンロードし、アップロードしてインストールしてください。

  1. WordPress管理画面 > プラグイン > 新規追加 >「Blocks Animation」で検索
  2. 「wordpress.org」からダウンロードする

広告

プラグインの使い方

このプラグインはブロックエディタ専用です。
記事編集の際にブロックエディタでブロックを選択し、右側の設定パネルで設定を編集できます。

メニュー

WordPress管理画面 > 投稿 > 新規投稿を追加
WordPress管理画面 > 固定ページ > 固定ページを追加

ブロックの設定パネル

記事編集の際にブロックエディタでブロックを選択し、右側の設定パネルで設定を編集できます。
「アニメーション・遅延・速度」などを設定できます。
ブロックエディタ上でもアニメーションのプレビューを確認できます。

Blocks Animation

まとめ

Blocks Animationは、ブロックエディタのブロックにCSSアニメーションを追加できるWordPressプラグインです。

記事に配置したブロック(画像・テキスト・リンクボタンなど)が画面スクロールに合わせてアニメーションで動くようになります。全てではありませんが、殆どのブロックで動作します。

ブロックで配置したコンテンツに動きをつけることで、強調したい部分がアニメーションで目立つようになります。ブログ記事のコンテンツを動かして訴求力を上げたい場合に役立つプラグインです。

この記事をシェアする

記事一覧へ戻る

ブログランキング参加中

あなたの応援が必要です

ブログランキングに参加しています。
ランキングを上げるために応援してね!!

 

人気ブログランキング

ブログノウハウランキング

にほんブログ村

にほんブログ村 IT技術ブログ IT技術ブログへ

 

 

コメント Comments

コメント一覧

コメントはありません。

コメントする

関連記事 Relation Entry