ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

『ブロックをアニメーション化したい!』便利&簡単なプラグインBlocks Animationを使おう

ワードプレスのテーマによってはアニメーション用の独自ブロックが準備されています。

私が使用しているテーマLuxeritasやLightningにも独自のアニメーションブロックがありますが、プラグインBlocks Animationを使い始めてからはアニメーション用独自ブロックを使うことはなくなってしまいました。

この記事ではBlocks Animationのどこがそんなに優れているのか、を紹介いたします。

この記事でわかること
  • プラグインBlocks Animationの概要と機能
  • プラグインBlocks Animationの使い方
  • Blocks Animationのメリットとデメリット
  • よくあるアニメーション用ブロックとBlocks Animationとの違い
    (カラムブロックでの適用事例で比較説明)
  • アニメーション動作のカスタマイズ
    (継続動作・動作回数指定・モバイルではOFFとする)

※本記事は2022年3月のversion2.0リリースに伴い、2022年3月31日にリライトしました。

プラグインBlocks Animationとは

プラグインBlocks Animationの正式名は、Blocks Animation: CSS Animations for Gutenberg Blocks です。

プラグインBlocks Animation

有効インストール数がさほど多いわけではありませんが、レビューは非常に高いポイントです。更新もきちんとされているようですね。

Blocks Animationは、その名の通りGutenbergのブロックにアニメーションをつけることができるプラグインです。

Blocks Animationでできること

できること

★Loading Animations
任意のブロック毎に動きをつけることができる(フェイドインしたりスライドインして現れたり、ズームイン、スクロール、回転など)

★Typing Animations
段落ブロックなど文字を扱うブロックで、テキストにタイプライター風のアニメーションをつけることができる

★Count Animations
段落ブロックなどで入力した数値にカウンター風のアニメーション(数字がカウントアップする)をつけることができる

★Loading Animationsの種類は以下の通り

  • Backing(フェードインまたはフェードアウトするときにズーミングを伴う)8種類
    BacK In Down・Back In Left・Back In right・Back In Up・Back Out Down・Back Out Left・Back Out Right・Back Out Up
  • Bouncing(ブロックが飛び跳ねるように動く)11種類
    Bounce・Bounce In・Bounce In Down・Bounce In Left・Bounce In Right・Bounce In Up・Bounce Out・Bounce Out Down・Bounce Out Left・Bounce Out Right・Bounce Out Up
  • Fading(ブロックがふわっと動く)25種類
    Fade In・Fade In Down・Fade In Down Big・Fade In Left・Fade In Left Big・Fade In Right・Fade In Right Big・Fade In Up・Fade In Top Left・Fade In Top Right・Fade In Bottom Left・Fade In Bottom Right・Fade Out・Fade Out Down・Fade Out Down Big・Fade Out Left・Fade Out Left Big・Fade Out Right・Fade Out Right Big・Fade Out Up・Fade Out Up Big・Fade Out Top Left・Fade Out Top right・Fade Out Bottom Right・Fade Out Bottom Left
  • Flipping(ブロックが奥行方向に回転する)5種類
    Flip・Flip In X・Flip In Y・Flip Out X・Flip Out Y
  • Rotating(ブロックが回転する)10種類
    Rotate In・Rotate In Down Left・Rotate In Down Right・Rotate In Up Left・Rotate In Up Right・Rotate Out・Rotate Out Down Left・Rotate Out Down Right・Rotate Out Up Left・Rotate Out Up Right
  • Sliding(ブロックが直線的に動く)8種類
    Slide In Down・Slide In Left・Slide In Right・Slide In Up・Slide Out Down・Slide Out Left・Slide Out Right・Slide Out Up
  • Zooming(ブロックが拡大する)10種類
    Zoom In・Zoom In Down・Zoom In Left・Zoom In Right・Zoom In Up・Zoom Out・Zoom Out Down・Zoom Out Left・Zoom Out Right・Zoom Out Up
  • Rolling(ブロックが転がる)2種類
    Roll In・Roll Out
  • Light Speed(ブロックが斜めに変形しながら動く)4種類
    Light Speed In Right・Light Speed In Left・Light Speed Out Right・Light Speed Out Left
  • Other13種類
    Flash・Pulse・Rubber Band・Shake X・Shake Y・Head Shake・Swing・Tada・Wobble・Jello・Heart Beat・Hinge・Jack In The Box

★アニメーションの遅延時間設定 9段階
遅延なし・100m病・200m秒・500m秒・1秒・2秒・3秒・4秒・5秒

★アニメーションスピード 5段階
Default・Slow・Slower・Fast・Faster

Blocks Animationの使い方

プラグインをインストール後の設定はありません。

アニメーションの使い方として大きく次の3つに分けて紹介します。

  1. ブロック毎に動きをつけるアニメーション
  2. テキスト単位のタイプライター風アニメーション
  3. 数字がカウントアップするアニメーション

①ブロック単位に動きをつけるアニメーション
(Loading Animations)

ブロックエディターで次の5ステップの作業だけでアニメーションがつきます。

①ブロックを選択する
②画面右の情報パネル内の項目Animationsを開ける

③Loading Animationを選択
④アニメーションの種類を選択(必要に応じて遅延時間・スピードも設定)

⑤遅延とスピードを必要に応じて選択

ブロック単位Animationの設定手順

こうしてZoom Inに設定したのが以下の通りです。

↓↓↓↓

プラグインBlocks Animation

アニメーションは一度だけです。
スクロールを戻したり再度スクロールしてもアニメーションしません。

再度確認したい場合は、ページを再読み込みすればよいでしょう。

②テキスト単位のタイプライター風アニメーション
(Typing Animations)

テキストが1文字ずつ現れるアニメーションです。段落ブロックを例にあげます。

①段落ブロック内に文字を入力
②入力した文字を選択(選択したテキスト部分がアニメーション化します)
③ブロック内ツールバーの”さらにブロックツールを表示”を開けて”Typing Animation”をクリック

タイプライター風アニメーションの設定

以上でタイプライター風アニメーションが設定されます。必要に応じてアニメーションのスピードと遅延時間は次のように設定するとよいでしょう。

④画面右の情報パネル内の項目Animationsを開ける
⑤”Typing Animations”を開ける
⑥DelayまたはSpeedをドロップダウンで選択

タイプライター風アニメーションの時間設定

こうして設定したタイプライター風アニメーションがこちら(遅延とスピードはデフォルト値です)

↓↓↓↓

タイプライター風に文字が現れます

③数字がカウントアップするアニメーション
(Count Animations)

先に紹介した文字単位のアニメーションと操作手順はほぼ同じですが、文字が数値(半角)ある場合に使えるアニメーションです。

①段落ブロック内に文字を入力(半角の数値を含むこと)
②入力した数値を選択(選択した数値がアニメーション化します)
③ブロック内ツールバーの”さらにブロックツールを表示”を開けて”Count Animation”をクリック

Count Animationの使い方

以上で数値がカウントアップするようになります。他のアニメーション同様、画面右のパネル内で項目AnimationsのCount Animationsを開けると遅延時間やスピードを変更可能です。

こうして設定したCount Animationsはつぎの通りです。

↓↓↓↓

ワードプレスの現在のバージョンは 5.9 です。

ちなみに数値は全角ではダメです。
また、足し算引き算など数値計算のできる数値が必要です。例えばバージョン5.9ではなく、バージョン5.9.3では設定できません。

Blocks Animationのメリット

  1. なんといっても操作が簡単。既存のブロックの操作パネルからアニメーションをつけるだけです。
  2. HTML要素の構造が変わらない(クラスがつくだけ)
  3. ブロックエディター内でアニメーションを確認できる

この3つのメリットだけで、テーマで準備されたアニメーションブロックよりも断然使いやすいといえます。

操作が簡単

①の操作についてですが、Luxeritasの”スクロールアニメブロック”やLightningの有料版プラグインVK Blocks Proの”アニメーション”ブロックだと、これらアニメーション用ブロックを設置してからその中にコンテンツを作成する必要があります

しかし通常アニメーションをつけたくなるのは、一度コンテンツを作成してしまった後、さらにアニメーションをつけて強調しようか、というときがほとんどだと思います。

だから作成済ブロックに後からアニメーションを追加するだけのBlocks Animationの方が理にかなった操作感といえるでしょう。

ブロックにアニメーションをつけた瞬間その場で動きの確認もできるので、豊富なアニメーションの種類も全く苦になりません。ぜひ一度使ってみてください。拍子抜けするほど簡単です。

HTML構造が変わらない(Loading Animationsの場合)

テーマで準備されたアニメーションブロックの場合は、アニメーションブロックの中にコンテンツとなるブロックを配置するので、HTML構造としてもアニメーションブロックの分HTML要素が増えることになります。

これに対してBlocks Animationの場合はHTML構造そのものは変わりません。アニメーションをつける要素にクラスが追加されるだけなのです。

カラムブロックで中にあるそれぞれのカラムに別々にアニメーションをつけるなど、少しレイアウトが複雑なものにアニメーションをつける場合、HTML構造の変化によって意図した元々のレイアウトが崩れてしまうことがあります。

だからアニメーションの有無でHTML構造は変わらないので大きなメリットと言えるでしょう。
(のちほど、カラムブロックのアニメーション例で具体的に解説します)

Typing AnimationsとCount Animationsの場合は、対象の文字が独自のタグで挟まれる形となるので、HTML構造が変化することになります。

Blocks Animationのデメリット

①アニメーション一度だけ

Block Animationの場合、すでに見たようにアニメーションは一度きりです。

スクロールしたときにフェードインしてふわっと要素が見えるようになる、といった使い方だとアニメーションは一度だけで十分です。むしろスクロールするたびにフェードインすると見にくい感じですね。

でもCTAで設置したボタンを振動させるなど、アニメーションが継続して欲しい場合もあります。

今後のプラグインのアップデートに期待したいと思いますが、カスタムCSSで可能です。当記事内アニメーション動作のカスタマイズを参照ください。

②iphoneのChromeブラウザでは動作が不安定

私のiphoneで検証結果、Chromeで動作しない場合があります。同じiphoneでもSafariではきちんと動作します。
(検証:iphone XS、iOS:15.4、Google Chrome:99.0.4844.59)

またipadではChrome/Safariともに安定動作を確認できています。

Blocks Animationに限らず、CSSアニメーションはiphone のGoogle Chromeでは動作が安定しないようです。iphone用Chromeのバグとして改善要望が出ています。

https://bugs.chromium.org/p/chromium/issues/detail?id=1249723

したがってプラグインBlocks Animation側の問題ではないようです。

カラムブロックのアニメーション例

カラムブロックで作成した3カラムのコンテンツ例をアニメーションさせてみましょう。
まずアニメーション前は次のようなものです。

パソコンで閲覧時には横に3カラム並んで表示され、スマホならば縦に3つのカラムが並んで表示されます。
(※以下のレイアウトやanimation説明は、パソコン表示の場合となります。ぜひパソコンにて確認ください。)

初心者マーク

未経験者向けワードプレス講座です。パソコンの基本操作ができればOK!

設定

各種機能設定も学びましょう。

SEO

SEOの基本も身につきます。

実はこのカラムブロック内の文章行数は、わざと1カラム目のみ多めにしてあります。それでもボタンの位置がパソコン表示のときに縦に揃うようにカスタムCSSで調整済です(同時にCSSでカラムに枠線もつけています)。

ちなみにカスタムCSSで未調整のときのパソコン表示では、次のようにボタンの縦位置が揃いません。
(CSSで装飾している枠線や余白設定もありません)

初心者マーク

未経験者向けワードプレス講座です。パソコンの基本操作ができればOK!

設定

各種機能設定も学びましょう。

SEO

SEOの基本も身につきます。

CSSでボタン位置を調整済のカラムブロックに、スクロールするとカラムが順番に上にふわっとFade Inしてくるアニメーションをつけてみます。

プラグインBlocks Animationを使用の場合とLuxeritasのアニメーション用ブロックを使用の場合で比べてみましょう。

カラムをBlocks AnimationでFade In Upさせる

カラムブロック内の各カラムにBlocks Animationでアニメーションをつけます。設定は次の通りです。

  • アニメーション種類・・・Loading AnimationsのFade In Up
  • 遅延時間
    左カラム・・・遅延ゼロ
    中央カラム・・・遅延100m秒
    右カラム・・・遅延200m秒
  • スピード・・・デフォルト

遅延時間を変えることで、3つのカラムが順番にFade In Upします。

↓↓↓↓

初心者マーク

未経験者向けワードプレス講座です。パソコンの基本操作ができればOK!

設定

各種機能設定も学びましょう。

SEO

SEOの基本も身につきます。

なかなかいい感じでFade In Upしたのではないでしょうか?CSSで調整した通りボタンの縦位置も揃っています。

LuxeritasのスクロールアニメブロックでFade Upさせる

同じようにLuxeritasのアニメーション用ブロックである”スクロールアニメ”でアニメーションさせてみます。

各カラムを別々にアニメーションさせるためには、

①各カラムの中にスクロールアニメブロックを設置
②スクロールアニメブロックの中に各カラム内コンテンツ(画像・テキスト・ボタン)をコピペし
③コピー元コンテンツを削除

という複雑な作業が必要です。やってみるとなかなか面倒です。

設置したスクロールアニメブロックの設定です。

  • アニメーション種類・・・Fade Up(Blocks Animationの Fade In Upと同じ効果)
  • 遅延時間
    左カラム・・・遅延ゼロ
    中央カラム・・・遅延100m秒
    右カラム・・・遅延200m秒
  • スピード・・・1000ms(Blocks Animationのデフォルトと同じ)

(Luxeritasのスクロールアニメの場合、スクロールを戻したり、再スクロールするたびにアニメーションする仕様となっています)

結果は以下の通り。

↓↓↓↓

初心者マーク

未経験者向けワードプレス講座です。パソコンの基本操作ができればOK!

設定

各種機能設定も学びましょう。

SEO

SEOの基本も身につきます。

効果としては各カラム内コンテンツが順番にFade Upして表示されますが、Blocks Animationと同じではありません。アニメーションするのがあくまでカラム内のコンテンツであってカラムそのものではないからです。

これをBlocks Animationと同じ見映えにするには、カラムにつけていた背景色や枠線を消してカラムは透明化し、カラム内コンテンツをグループ化して背景色・枠線を設定する、といった修正が必要になりそうです。

他の問題として、ボタンの縦位置が揃わなくなっています

これは、カラム内にスクロールアニメという別のブロックを挿入したがために、HTML構造が変化し、カスタムCSSがうまく機能しなくなってしまったためです。

この場合、新しいHTML構造に合わせてCSSを再度調整しなおす必要があります。これも結構面倒ですね。

この問題はLightningの有料プラグインVK Blocks Proのアニメーションブロックを使用した場合でも起こります。

以上の結果、Blocks Animationを使えばすごく簡単にアニメーション設定できるうえCSSも調整しなおす必要がないのに比べて、今回比較したアニメーション用ブロックを使う場合は全く逆であると言えるでしょう。

アニメーション動作のカスタマイズ

簡単なCSSを書くだけでカスタマイズできる項目を紹介しておきます。

アニメーションを継続動作

アニメーションを継続するブロックにクラス名”animation-infinite”を付与して次のCSSを適用させます。

.animation-infinite {
    animation-iteration-count: infinite;
}

このブロックにLoading AnimationsのBounceをつけると以下の通り。

↓↓↓↓

設定

アニメーション回数を設定する

先ほどの継続動作のCSSの値をinfinteでなく回数指定するとOKです。付与するクラス名も変更しておきましょう。

/* 2回動作 */
.animation-count2 {
    animation-iteration-count: 2;
}
/* 3回動作 */
.animation-count3 {
    animation-iteration-count: 3;
}

モバイルでは動作させない

Blocks Animationのフォーラムでモバイルで動作OFFするCSSが紹介されていたので共有します。
(私自身では動作確認はしてませんので、動作確認は各人でお願いします)

https://wordpress.org/support/topic/switch-off-on-mobile/

/* Remove CSS animations on small screens */
@media only screen and (max-width : 599px) {
    .animated {
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
        visibility: visible !important;
    }
}

まとめ

Blocks Animationを使うと次のメリットがあります。

  1. なんといっても操作が簡単。既存のブロックの操作パネルからアニメーションをつけるだけです。
  2. Loading Animationsの場合HTML要素の構造が変わらない(クラスがつくだけ)
  3. ブロックエディター内でアニメーションを確認できる

この3つの特徴のため、テーマでよくあるアニメーションブロックには戻れなくなってしまいました。

あとはアニメーションの継続設定や動作回数をプラグインで設定できるようになると最高なんですがね。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる