WordPressにCSSアニメーションを追加したいですか？
アニメーションを使って訪問者の注意を引き、ページの最も重要なコンテンツを強調することができます。これにより、カスタマイザーがコールトゥアクションボタンやリンクをクリックするよう促すこともできます。
このチュートリアルでは、WordPressでCSSアニメーションを簡単に追加する方法を紹介します。
なぜWordPressにCSSアニメーションを追加するのか？
CSSアニメーションを使用すると、ページのさまざまな部分に訪問者の注意を引くことができます。例えば、オンラインショップの場合、商品の最も重要な特徴や最大のセールスポイントをアニメーションで強調することができます。これにより、ユーザーエクスペリエンスを向上させ、売上を伸ばすことができます。
また、アニメーションはCTAを目立たせ、より多くの人にメールマガジンを購読してもらうなど、特定の目標を達成するのに役立ちます。
WordPressテーマや子テーマのスタイルシートにCSSアニメーションを追加することができる。しかし、これには多くの時間と労力がかかり、間違えるとサイトのデザインや機能さえも壊してしまう可能性がある。
それでは、WordPressサイトにCSSアニメーションを簡単に追加する方法を見ていきましょう。特定の方法にすぐに飛びつきたい場合は、以下のリンクをご利用ください：
方法1：WordPressのブロックを簡単にアニメーション化する方法（素早く簡単）
シンプルなCSSアニメーションを追加する最も簡単な方法は、ブロックアニメーションを使うことだ。
この無料アニメーションプラグインを使えば、CSSを個別記述することなく、あらゆるブロックに入場アニメーションを追加することができる。また、タイピングアニメーションや、テキストや数字に追加できるテロップ風のエフェクトもあります。
まず、無料のプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関する初心者ガイドをご覧ください。
有効化したら、WordPressのブロックエディターで任意のページまたは投稿を開きます。そして、アニメーションさせたいブロックをクリックし、右側のメニューから「ブロック」タブを選択するだけです。
このメニューに新しく「アニメーション」セクションが追加されているのがわかるだろう。
アニメーション」セクションをクリックすると、3つの異なるオプションが表示されます：アニメーション」、「カウントアニメーション」、「タイピングアニメーション」です。
アニメーション」は、ページが読み込まれたときに一度だけ再生される短いエフェクトです。WordPressブログにこのようなエントランスアニメーションを追加するには、「アニメーション」の隣にあるドロップダウンをクリックするだけです。
アニメーションを選択するメニューが開きます。
WordPressエディターにはアニメーションのプレビューが表示されるので、さまざまなオプションを試して、最もよく見えるものを確認することができます。
初期設定では、ページがロードされるとすぐに入場アニメーションが再生されますが、お好みでディレイを追加することもできます。同じページで複数のアニメーションを使用する場合は、ディレイを使って時間をずらすこともできます。
ディレイ』ドロップダウンを開き、リストから時間を選択するだけです。
また、「スピード」ドロップダウンを使ってアニメーションを速くしたり遅くしたりすることもできます。
さまざまな設定を試している間、「アニメーションを再生」をクリックすれば、いつでもアニメーションをプレビューすることができます。
プラグインには「カウント・アニメーション」と「タイピング・アニメーション」もある。
タイピングアニメーションはテキストをアニメーションさせ、カウントアニメーションは数字にテロップ風の効果を加えます。これらのアニメーションは、テキストや数字をサポートしているGutenbergブロックであれば、どのブロックでも動作しますので、ボタンや画像のキャプション、見出しなどのアニメーションに使用することができます。
これらのエフェクトを追加するには、まずアニメーションさせたいテキストまたは数字をハイライトします。次に、小さなツールバーの下向き矢印をクリックします。
ドロップダウンメニューから「カウントアニメーション」または「タイピングアニメーション」を選択できるようになりました。
これらのオプションがグレーアウトしている場合は、正しいコンテンツをハイライトしたことを確認してください。例えば、テキストだけをハイライトした場合、「アニメーションをカウント」を選択することはできません。
アニメーションを追加した後、小さなポップアップのドロップダウンメニューを使ってスピードを変更したり、オプションでディレイを追加することができます。
例えば、以下の画像では1秒のディレイを使っている。
CSSアニメーションを公開する準備ができたら、「公開する」または「更新する」ボタンをクリックして、サイトにアニメーションを適用します。これで、WordPressのサイトにアクセスすると、アニメーションがライブで表示されます。
方法2：カスタムページにCSSアニメーションを追加する方法（推奨）
WordPressのビルトインブロックに簡単なアニメーションを追加したい場合は、Blocks Animationが良いでしょう。しかし、本当に訪問者の注意を引き、サイトに滞在させ、より多くのコンバージョンを得たいのであれば、SeedProdを使用することをお勧めします。
SeedProdは、シンプルなドラッグ＆ドロップエディターを使って美しいランディングページ、セールスページ、ホームページなどを作成できる最高のページビルダープラグインです。
また、「アニメーションヘッドライン」ブロックが付属しており、回転やハイライトのアニメーションヘッドラインを作成することができる。
その名前とは裏腹に、アニメーション見出しブロックを使えば、行動喚起、小見出し、その他強調したいテキストなど、あらゆるテキストをアニメーション化することができます。
SeedProdには、画像、テキスト、ボタン、動画など、どのブロックにも追加できる40種類以上の入り口アニメーションも付属しています。
数回クリックするだけで、セクションやカラム全体をアニメーション化することもできます。このように、数分で魅力的なアニメーションページを作成することができます。
より多くのコンバージョンと売上を得るためにアニメーションを使用している場合、SeedProdはWooCommerceと統合します。また、すでにあなたのサイトを宣伝するために使用しているかもしれないトップEメールマーケティングサービスの多くもサポートしています。
SeedProdページビルダーの設定方法
最初に行う必要があるのは、SeedProdのインストールと有効化です。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、ライセンスキーを入力する必要があります。
この情報は、SeedProdサイトのアカウントで確認できます。ライセンスキーを追加した後、’Verify Key’をクリックするだけです。
カスタムページデザインの作成
開始するには、SeedProd ” ランディングページに行き、「新規ランディングページを追加」をクリックします。
次の画面では、テンプレートの選択を求められます。
SeedProdには、404ページテンプレートや WooCommerceの「サンキュー」カスタムページなど、さまざまなカテゴリーに分類された350以上の美しいテンプレートが用意されています。
このガイドでは、アニメーションテキストとエントランス・アニメーションを使ったセールスページの作成方法を紹介しますが、どのようなページを作成する場合でも手順は同じです。
タブをクリックするだけで、そのカテゴリー内のさまざまなテンプレートが表示されます。
使いたいテンプレートが見つかったら、マウスオーバーしてチェックマークのアイコンをクリックしてください。
すべての画像に「Zen Sales Page」テンプレートを使用していますが、どのテンプレートを使用してもかまいません。
次に、ページにタイトルをつける必要がある。
SeedProdはページタイトルに基づいたURLを自動的に作成しますが、これを好きなものに変更することができます。例えば、関連するキーワードをURLに追加することで、WordPressのSEOが向上し、関連する検索結果にページが表示されやすくなることがよくあります。
さらに詳しく知りたい方は、WordPressブログのキーワードリサーチ方法をご覧ください。
タイトルとURLに満足したら、『保存してページの編集を開始する』をクリックします。
SeedProdのドラッグ＆ドロップページエディターがロードされます。
右側にはページデザインのライブプレビュー、左側にはいくつかの設定が表示されます。
SeedProdには、ソーシャルシェアボタン、動画、お問い合わせフォームなどを追加できるブロックをはじめ、デザインに追加できるブロックがたくさん用意されています。
詳しくは、WordPressでカスタマイザーページを作成する方法をご覧ください。
WordPressにアニメーションテキストを追加する方法
ページにアニメーションテキストを追加するには、アニメーションヘッドラインブロックを見つけ、ページデザインにドラッグします。
見出しをアニメーション化するには2つの方法があります。まず、「ハイライト」スタイルでは、円やジグザグの下線など、テキストに形状のアニメーションを追加します。
このアニメーションを使えば、見出しの中の特定の単語やフレーズに注意を引くことができます。最も重要なコンテンツを強調することで、見出しを読みやすく理解しやすくすることができます。また、行動喚起に注意を引くのにも最適です。
ハイライトスタイルには打ち消し線もいくつかある。
打ち消し線を使えば、人目を引く面白い効果を生み出すこともできるし、単純にデザインに楽しさを加えることもできる。
ハイライト・アニメーションを作成するには、「スタイル」のドロップダウンを開き、「ハイライト」を選択します。
次に、’Shape’ ドロップダウンを開き、シェイプを選択します。シェイプをクリックすると、SeedProdはそのアニメーションのプレビューを表示します。
SeedProdには、テキストにトランジション効果を加える「回転」アニメーションスタイルもあります。
多くの場合、アニメーションテキストはページが読み込まれたときに訪問者が最初に見るものなので、最も重要なテキストを強調するには最適な方法です。
トランジション・アニメーションを作成するには、「スタイル」のドロップダウンを開き、「回転」をクリックするだけです。
次に、’アニメーション’ドロップダウンを開き、フェード、ズーム、ロールなど、使用したいトランジションのタイプを選択することができます。繰り返しますが、SeedProdはページエディター内でアニメーションを再生します。
ハイライト」アニメーションでも「回転」アニメーションでも、アニメーションのテキストの前後にテキストを追加できます。
見出し前」と「見出し後」のフィールドに入力するだけです。テキスト」フィールドに、アニメーションさせたい単語やフレーズを追加します。
見出し全体をアニメーション化したい場合は、「Before Headline」と「After Headline」フィールドを空欄にするだけです。
初期設定では、SeedProdはアニメーションをループ再生しますが、訪問者によっては迷惑に感じるかもしれません。
アニメーションを1回だけ再生するには、「無限ループ」スイッチをクリックして無効化します。
初期設定では、アニメーションは8000ミリ秒のディレイの後、1200ミリ秒再生されます。
異なる値を使用するには、’Duration’ と ‘Delay’ フィールドに入力します。例えば、デュレーションを短くすることでアニメーションを速くすることができます。
また、テキストのスタイルを変更することもできます。例えば、フォントサイズや配置を変更することができます。
アニメーションの見出しに満足したら、「保存」ボタンをクリックして変更を保存します。
WordPressで入場アニメーションを追加する
エントランスアニメーションは、ページが最初に読み込まれたときに再生されるので、訪問者の注意を引くのに最適な方法です。
また、訪問者が最初に見るべきコンテンツを強調するために使用することもできます。例えば、オンラインマーケットプレイスを運営している場合、商品のヒーロー画像やブラックフライデーセールの広告バナーをアニメーション化することができます。
SeedProdエディター内で、アニメートしたいコンテンツをクリックし、左側のメニューから’Advanced’タブを選択するだけです。
次に、「アニメーション・エフェクト」セクションをクリックして展開します。
その後、「Entrance Animation」のドロップダウンからアニメーションを選択するだけです。
上記と同じプロセスを踏むだけで、どのブロック、セクション、カラムにも入場アニメーションを追加できるようになった。
WordPressでCSSアニメーションを公開する
ページの設定に満足したら、「保存」ボタンのドロップダウンメニューをクリックし、「公開する」を選択します。
このページでは、CSSアニメーションをライブで見ることができる。
WordPressでCSSアニメーションを追加する方法について、この投稿がお役に立てば幸いです。WordPressでカスタムランディングページを作成する方法や、WordPressのダイナミックコンテンツプラグインのエキスパートが選ぶベストプラグインもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Wissam Giroud
Can we use animation on a free plan website in wordpress? I am unable to use plugin as it prompts me to upgrade to business plan
WPBeginner Support
Our tutorials are for WordPress.org sites not WordPress.com sites, for a better understanding of the two, you would want to take a look at our article below:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
You would need the plan level that allows plugins to install plugins on WordPress.com
管理者
vishnu
How to add animation text on home page feature image
WPBeginner Support
You would want to reach out to the plugin’s support and they should be able to assist
管理者
amy
does this only work for blog posts? i dont see the animate it icon for website pages.
WPBeginner Support
It should work on pages as well. If it is not appearing you would want to reach out to the plugin’s support and they should be able to assist
管理者
twinkle chandan
how to add these in image block or any other block
WPBeginner Support
You would want to reach out to the plugin’s support for their plans to support the block editor
管理者
dimiter kirov
Does it have Gutenberg integration?
WPBeginner Support
It looks like the plugin is currently updated to work with Gutenberg
管理者
Aditi
Hello support team Recently I’m working on wordpress theme my theme already have animation box at staring of page loading I just want to change its color. what should I do…? suggest me any css trick
WPBeginner Support
You could use inspect element to see what needs changed: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Or reach out to your theme’s support and they should be able to let you know
管理者
Muneeb
Thank You
WPBeginner Support
You’re welcome
管理者
Leo August
Good article. I was looking for something just like this. One question, I’d like to use the animation used in the pricing table example at the top of the article, but I don’t see anything in Animate It that matches it. Which animation and settings does that example use?
WPBeginner Support
Hi Leo,
We used fadeIn effect.
管理者
Catherine
Unfortunately, WP.org says Animate It has not been tested as to its compatability with my version of WP. I just installed WP.org a fee days ago. Disappointing. Will it be approved in future?
WPBeginner Support
Hi Catherine,
You can safely install the plugin. Please see our guide on installing plugins not tested with your WordPress version for more details.
管理者
Lesa
I’m looking for a specific type of animation.
One of the services I offer is design and layout brochures.
To display a portfolio of brochures, I would like to have just the flat front on the page that tells about the service, and when the visitor clicks the link to see more, they are taken to a page where a tri-fold brochure slowly opens up to reveal the interior.
Do you know whether there are any animation plugins that do this?
Thanks for any guidance you may be able to offer.
Geraldine Ward
Thank you WP Beginner Support for your answer and also thank you Mark and Hemang for your comments, both something to consider.
Geraldine Ward
I am thinking of doing an animation for a wordpress website in Adobe Animate CC but I can’t seem to find any positive information about whether I will be able to use it in wordpress – can you shed any light on this?
Thank you
Geraldine
WPBeginner Support
You can export animation as a movie and upload it to YouTube and then share the video. However if it is a shorter animation like few seconds, then you can convert into an animated GIF and add it to your WordPress site.
管理者
Hemang Rindani
WordPress is a great CMS that caters to many businesses with the rich functionalities it offers. The flexibility and ease of use makes it a popular CMS across the enterprises. The inbuilt framework, themes, modules and plugins make it easier for a developer to implement any complex scenario through an effortless dashboard.
It is important to have an engaging website that enhances the user experience. Make sure to identify proper tools like social media login and sharing, images and animations that trigger user interaction. Animate It! is very useful WordPress tool designed and developed to provide an efficient and user friendly solution to apply beautiful CSS3 animations on WordPress Posts and Widgets. It allows a developer to add animations effortlessly without compromising on website security. The dashboard for Animate It! is self explanatory and a CMS developer does not require to have any programming or animation knowledge to use it.
Mark Klinefelter
Nice articles but too much animation can drastically slow down page load time. I have been through this and elimated a lot of “cute” animation stuff. Pingdom scores will go up after that.