ワードプレスにアニメーション機能をプラグインを使って設定しよう！。アニメーション。それは何を意味しているのでしょうか。今回は、ワードプレスにアニメーション機能をプラグインを使って設定しよう！について書いていきます。
以前にも似たような投稿をしたことがあります。それは「ブログに装飾やアニメーション画像を入れると効果的？」ですが、ツールを使ってアニメーションすると言う内容のものでした。当記事では「プラグイン」を使用します。
| 結論を先に話ししておきます |
| まずは、スクロールをトリガーにし、フェードインなどのアニメーションを簡単に設置できるプラグインの「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』は、同じ考えだと思って下さい。
| アニメーションの設定項目 |
|
| アニメーションのパターン |
|
【Blocks Animationを使用するまでの流れ】
「Blocks Animation」がどのようなものか分かったところで、実際にブロックエディターを開いて「Animation」と言う項目を使っていきたいと思います。この章では、図解を用いて解説していくので分かりやすいかと思います。
| Blocks Animationを使う為には |
必ず2つを実施して下さい。どちらか片方を実施しても「Animation」としての機能は動作しませんので注意して下さい。それでは楽しいブログを作成してみて下さいね。 |
| お願い |
| アニメーションの動作について、当記事では載せていません。それはあなたご自身の目で見る方が確実だからです。では下記の図解より「Blocks Animation」を使用するまでの流れについてお進み下さい。 |
- 下記の図解は、ブロックエディターの新規画面です。では初めに「オレンジ色枠」で囲まれている箇所に、記事となるタイトル名を入力してみましょう。仮に入力しなくても大丈夫です。
- 「黄色枠」で囲まれているタイトル名の箇所に、コチラでは「マニュアル」と入力してみました。次に「桃色枠」で囲まれている箇所に「Animation」として動作させたい「文字」もしくは「画像」などを入れていきましょう。
やり方が分からない場合、先程紹介した動画を視聴してみて下さい。
- コチラでは「水色枠」で囲まれている箇所に「アフィリエイトマニュアル作成中」としてみました。すると「赤色枠」で囲まれている「Animation」と言う項目が表示されるようになります。
- ではここで「紫色枠」で囲まれている「Animation」を開くと「赤色枠」で囲まれているように「Loading Animations」「Count Animations」「Typing Animations」が表示されています。
- では一つずつ見ていきましょう。まずは一番上の「赤色枠」で囲まれている箇所を押してみて下さい。すると「黄色枠」で囲まれている別窓が開きます。
- 次は2番目の「桃色枠」で囲まれている箇所を押してみて下さい。すると「緑色枠」で囲まれている別窓が開きます。
- 次は一番下の「紫色枠」で囲まれている箇所を押してみて下さい。すると「水色枠」で囲まれている別窓が開きます。
- では「Loading Animations」と表示されている右側の「桃色枠」で囲まれている箇所を押すと「オレンジ色枠」で囲まれている別窓が開き、その中の「紫色枠」で囲まれている下向き▼を押してみて下さい。
- すると「赤色枠」で囲まれているように沢山の「Animation」があります。一つ一つ確認するのは大変ですが、使ってみたい「Animation」があれば使ってみると良いでしょう。
| 「Loading Animations」「Count Animations」「Typing Animations」の中で、アニメーションとして設定する項目は「Loading Animations」です。あなたの方で入力した文字や画像がどのような動作をするのかご自身の目で確かめてみて下さい。 |
今回は以上となります。ワードプレスにアニメーション機能をプラグインを使って設定しよう！について、ご理解頂けたかと思います。実際に動作する場面は載せてませんが、あなたご自身で確認するのが一番です。
以前投稿した下記の記事にも目を通して貰えると幸いです。
