デザイン【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれていますWordPress5.0から変更になった、投稿や固定ページの編集に使うエディタ、Gutenberg。旧来のエディタ時代から使っていた方にはなんだか変なのになったなぁ・・・なんて元に戻す方も多いと思います(私もその口でした)。使い慣れてくるとこれが結構便利!!今では管理するすべてのサイトでGutenberg使ってます。逆に旧エディタだと「あれ?これどうやるんだっけ?」と戸惑うようにもなってきました(笑)。Blocks」はGutenberg(ブロック)エディタ用に開発されたプラグイン。ほとんどのブロックへ個別に、かつ、簡単にアニメーション効果を持たせることができるプラグインです。どんなことができるのか・・以下の公式ページのスクリーンショットをご覧ください。選択するだけで、こんな風な表現ができるようになります。上の画像は画像に対する効果のみを表示してますが、見出し、クラシック、段落などいろいろなブロックでもアニメーション効果が実装できます通常のブロックにないものを追加する場合によくあるのが「特殊なブロックがセットになっていて、そのブロックを追加してコンテンツを作る」というプラグイン。それらにもこうした特殊効果を持つブロックのあるものも多数ありますが、最大の難点は一度使いだしたらそのプラグインを停止できなくなること。効果がなくなるばかりでなく、プラグインを使って挿入したブロックが表示されなくなったりすることも・・・。Blocks」は、今ある標準のブロックに対してアニメーション効果を付加するだけのものですので(詳しくは後述)、不要になってプラグインを停止しても、今までの投稿や固定ページから動きがなくなるだけで、前述した特殊ブロックを追加するプラグインと比べて単純な点がいいところでしょう。特定のブロックだけに動きを持たせたデザインをしたい、しかもできるだけ簡単に設定したいという方にピッタリのプラグインです。「え?こんなに簡単にできるの?」とびっくりすること間違いなしだと思います。※このプラグインは、旧エディタ(ビジュアルエディタ・テキストエディタ)では機能しません。Gutenberg(ブロックエディタ)でのみ機能しますのでご注意ください。この紹介記事を最後に編集したときの環境・バージョンなどプラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。3.0.5公式サイト(wordpress.org上):https://wordpress.org/plugins/blocks-animation/公式サイト(作者サイト):本記事を参考にWordPressサイトへプラグインの導入を検討される方へWordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。WordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。WordPress本体同様にプラグインについてもさまざまなバージョンが存在します。本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介していますこのページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。Blocks】プラグインは言語の変更に未対応ですので表示のまま設定することになりますが、設定項目がありませんので特に翻訳しなくても設定できると思います。Blocks】プラグインのインストールと設定インストール方法インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。基本的な設定方法や使い方このプラグインには設定項目がありません。ブロックエディタの編集画面で実際に設定していくだけです。上の画像のようにGutenberg(ブロック)エディタの各ブロックへ「Animations」というサイドメニューが追加されます。Animation・・・動作させる効果Delay・・・その場所が表示されてから動作を開始するまでの時間Speed・・・アニメーションの動作速度の3つを設定するだけです。アニメーション効果の選択肢は英語ですが、ブロックエディタであればその場でどんな動きになるのかを確認できますから実際に試してみればいいかと思います。※DelayとSpeedについてはプレビュー、または下書き保存後のプレビューで確認しないと実際の動きはわかりませんブロックごとに異なる動作を簡単に指定できるが本当に便利だと思います。冒頭でも書きましたが、特別にアニメーション効果のあるブロックを使うというようなプラグインではありませんから、プラグインを停止すれば特に何かを変更することなくアニメーション効果をストップさせることができます。Blocks】プラグインの便利な使い方・カスタマイズ方法などより便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。モバイルで動作しないようにするにはこのプラグインはアニメーション効果を追加したブロックの要素には特定のclass要素を付加して、それに対するデザイン要素とスクリプトが動作してアニメーション表示させるようになっています。したがって通常ではモバイル環境でも動作するようになっています。!important;}}また、前述したようにclassが付与されてもそれに対するデザイン要素(CSS)とスクリプトの読み込みがなければ動作しませんから、AMP対応サイトでもアニメーション効果がなくなるだけで、エラーを起こすことがありません。トップページのみで動作するようにするこのプラグインを使う機会は、個別の投稿や固定ページというよりは、固定ページで作成したトップページだけという方が多いのかも知れません。以下のコードをテーマのfunctions.phpへ追加することで、トップページ(is_front_page)のみこのプラグインのCSSを読み込ませることができるようになり、他のページでは余分なCSSの読み込みを削減することができます。関係のないCSSとJSは読み込まないようにしたいという場合には有効でしょう。habone_block_animation_enqueue(){if(is_front_page()){wp_enqueue_style('animate-css');wp_enqueue_style('themeisle-gutenberg-animation-style');wp_enqueue_script('themeisle-gutenberg-animation-frontend');}}add_action('wp_enqueue_scripts','habone_block_animation_enqueue');上記コードはis_front_pageでフロントページ(トップページ)に限定していますが、その他の条件を足せば必要なページだけ読み込ませることができます。