【ワードプレスにアニメーション機能をプラグインを使って設定しよう！】

ワードプレスにアニメーション機能をプラグインを使って設定しよう！。アニメーション。それは何を意味しているのでしょうか。今回は、ワードプレスにアニメーション機能をプラグインを使って設定しよう！について書いていきます。

 

以前にも似たような投稿をしたことがあります。それは「ブログに装飾やアニメーション画像を入れると効果的？」ですが、ツールを使ってアニメーションすると言う内容のものでした。当記事では「プラグイン」を使用します。

 

結論を先に話ししておきます

まずは、スクロールをトリガーにし、フェードインなどのアニメーションを簡単に設置できるプラグインの「Blocks Animation」を紹介していきたいと思います。トリガーとは「発火」を意味します。   また、今回使用するプラグイン「Blocks Animation」の正式名称は「Blocks Animation: CSS Animations for Gutenberg Blocks」です。「Blocks Animation」は「JavaScript」や「jQuery」などのスクリプトは一切使いません。   「Blocks Animation」は、スクロールに連動したCSSアニメーションを演出可能にするプラグインですが、エディターは「ブロックエディター」を使用する為、旧エディターの「クラシックエディター」で使用することはできません。   以前投稿した下記の記事にも目を通して貰えると幸いです。 「ブログ用の記事構成テンプレート」。 「主婦がブログをワードプレスで作成！」。

 

【ブロックエディターとは(動画付き)】

 

ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。

 

ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。

 

ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。

 

ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。

 

ブロックエディターの設定

 

この章では、ブロックエディターの設定をしていきます。ブロックエディターとして設定されていない方は、下記の図解を参考に設定してみて下さい。図解を見ながら設定していけば直ぐに終わるかと思います。

 

では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。また「Blocks Animation」を使用する場合でも、必ずブロックエディターに設定して下さい。

 

 

 

 

ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えるかと思います。

 

【Blocks Animationプラグインとは(動画付き)】

 

冒頭でも説明してますが「Blocks Animation」は「JavaScript」や「jQuery」などのスクリプトを一切使用することなく、スクロールに連動したCSSアニメーションを演出できるプラグインであり、難しい設定なども必要ありません。

 

「Blocks Animation」のプラグインをインストールし、有効化すると、右サイドバーの「ブロック」タブ内に「Animation」項目が追加されるので、アニメーションさせたいブロックを選択し、種類を選択するだけでOK。

 

面倒なCSSの追加をする必要も全くありません。また、アニメーションの種類は全部で8パターンあり、8パターンそれぞれのバリエーションを全て含めるとその数「78種類」ものアニメーションパターンが準備されている訳です。

 

ではここで動画を視聴してみて下さい。題して「【WordPress応用講座】『Blocks Animation』と『Animated Blocks』の使い方」です。『Blocks Animation』と『Animated Blocks』は、同じ考えだと思って下さい。

 

アニメーションの設定項目

「Animation」→ アニメーションの種類を意味します。 「Delay」→ アニメーションを開始するまでの遅延時間を意味します。 「Speed」→ アニメーションのスピードを意味します。

 

アニメーションのパターン

「Bouncing」→ 跳ねたり、弾んだりする系。 「Fading」→ フェードインしたり、フェードアウトしたりする系。 「Flipping」→ めくったり、めくられたりする系。 「Rotating」→ グルグル回る系。 「Sliding」→ スライドしてみたい人系。 「Zooming」→ ズームインしたり、ズームアウトしたりする系。 「Rolling」→ コロコロ転がる系。 「Other」→ その他、何でもあり系。

 

【Blocks Animationを使用するまでの流れ】

 

「Blocks Animation」がどのようなものか分かったところで、実際にブロックエディターを開いて「Animation」と言う項目を使っていきたいと思います。この章では、図解を用いて解説していくので分かりやすいかと思います。

 

Blocks Animationを使う為には

「ブロックエディター」に変更する。 「Blocks Animation」をインストールし、有効化する。   必ず2つを実施して下さい。どちらか片方を実施しても「Animation」としての機能は動作しませんので注意して下さい。それでは楽しいブログを作成してみて下さいね。

 

お願い

アニメーションの動作について、当記事では載せていません。それはあなたご自身の目で見る方が確実だからです。では下記の図解より「Blocks Animation」を使用するまでの流れについてお進み下さい。

 

 

 

やり方が分からない場合、先程紹介した動画を視聴してみて下さい。

 

 

 

 

 

 

 

 

「Loading Animations」「Count Animations」「Typing Animations」の中で、アニメーションとして設定する項目は「Loading Animations」です。あなたの方で入力した文字や画像がどのような動作をするのかご自身の目で確かめてみて下さい。

 

今回は以上となります。ワードプレスにアニメーション機能をプラグインを使って設定しよう！について、ご理解頂けたかと思います。実際に動作する場面は載せてませんが、あなたご自身で確認するのが一番です。

 

以前投稿した下記の記事にも目を通して貰えると幸いです。

 

 

トップページへ戻る