WordPressでCSSアニメーションを簡単に追加する方法

長年にわたり、WordPressウェブサイトをよりインタラクティブにするためのさまざまな方法を試してきました。訪問者の注意を引きたい場合は、アニメーションが非常に効果的です。

アニメーションを使用して訪問者の注意を引き、ページの最も重要なコンテンツを強調することができます。これにより、顧客はコールトゥアクションボタンやリンクをクリックしやすくなります。

幸いなことに、コードの書き方を知らなくても、WordPressでアニメーションを簡単に設定できます。

このチュートリアルでは、WordPressにCSSアニメーションを簡単に追加する方法をご紹介します。

WordPressにCSSアニメーションを追加する理由

CSSアニメーションを使用して、ページ内のさまざまな部分に訪問者の注意を引くことができます。たとえば、オンラインストアがある場合、アニメーションは製品の最も重要な機能や最大のセールスポイントを強調することができます。これにより、ユーザーエクスペリエンスが向上し、売上が増加する可能性があります。

アニメーションは、CTA を目立たせることもでき、より多くの人に メールニュースレター を購読してもらうなど、特定の目標を達成するのに役立ちます。

WordPressテーマまたは子テーマのスタイルシートにCSSアニメーションを追加できます。ただし、これには多くの時間と労力がかかり、間違いを犯すと、ウェブサイトのデザインや機能が損なわれる可能性があります。

それでは、WordPressサイトにCSSアニメーションを簡単に追加する方法を見ていきましょう。特定のメソッドに直接ジャンプしたい場合は、以下のリンクを使用できます。

• 方法1：WordPress のブロックを簡単にアニメーション化する方法（迅速かつ簡単）
• 方法2：カスタムページにCSSアニメーションを追加する方法（推奨）

方法1：WordPress のブロックを簡単にアニメーション化する方法（迅速かつ簡単）

簡単なCSSアニメーションを追加する最も簡単な方法は、Blocks Animationを使用することです。

この無料アニメーションプラグインを使用すると、CSS を一行も書かずに、あらゆるブロックに表示アニメーションを追加できます。また、テキストや数字に追加できるタイプアニメーションやティッカー風エフェクトもあります。

まず、無料のBlocks Animationプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化後、WordPressのブロックエディターで任意のページまたは投稿を開きます。次に、アニメーション化したいブロックをクリックし、右側のメニューの「ブロック」タブを選択します。

このメニューに新しい「アニメーション」セクションが表示されます。

「アニメーション」セクションをクリックして展開するだけで、「アニメーション」、「カウントアニメーション」、「タイピングアニメーション」の3つの異なるオプションが表示されます。

「アニメーション」とは、ページが読み込まれるときに一度再生される短いエフェクトです。この種のエントランスアニメーションをWordPressブログに追加するには、「アニメーション」の横にあるドロップダウンをクリックするだけです。

これにより、使用したいアニメーションを選択できるメニューが開きます。

WordPressエディタにはアニメーションのプレビューが表示されるため、さまざまなオプションを試して最適なものを見つけることができます。

デフォルトでは、ページが読み込まれるとすぐに表示アニメーションが再生されますが、必要に応じて遅延を追加できます。同じページで複数のアニメーションを使用する場合は、遅延を使用してそれらをずらすことで、圧倒されないようにすることもできます。

「遅延」ドロップダウンを開き、リストから時間を選択するだけです。

「スピード」ドロップダウンを使用して、アニメーションを速くしたり遅くしたりすることもできます。

さまざまな設定を試しながら、「アニメーションの再再生」をクリックすることで、いつでもアニメーションをプレビューできます。

このプラグインには、「カウントアニメーション」と「タイピングアニメーション」もあります。

タイピングアニメーションはテキストをアニメーションさせることができ、カウントアニメーションは数字にカウンター風のエフェクトを追加します。これらのアニメーションは、テキストまたは数字をサポートする任意のGutenbergブロックで機能するため、ボタン、画像キャプション、見出しなどをアニメーションさせるために使用できます。

これらの効果のいずれかを追加するには、アニメーション化したいテキストまたは数値を強調表示することから始めます。次に、小さなツールバーの下向き矢印をクリックします。

ドロップダウンメニューから「カウントアニメーション」または「タイピングアニメーション」を選択できるようになりました。

これらのオプションがグレーアウトしている場合は、正しいコンテンツをハイライト表示していることを確認してください。たとえば、テキストのみをハイライト表示している場合、「カウントアニメーション」を選択することはできません。

アニメーションを追加した後、小さなポップアップのドロップダウンメニューを使用して、速度を変更したり、オプションの遅延を追加したりできます。

例えば、次の画像では1秒の遅延を使用しています。

CSSアニメーションを公開する準備ができたら、「公開」または「更新」ボタンをクリックしてサイトにアニメーションを適用します。これで、WordPressウェブサイトにアクセスすると、アニメーションがライブで表示されます。

方法2：カスタムページにCSSアニメーションを追加する方法（推奨）

WordPressの組み込みブロックに簡単なアニメーションを追加したい場合は、Blocks Animationが適しています。しかし、訪問者の注意を本当に引きつけ、ウェブサイトに滞在させ、より多くのコンバージョンを獲得したい場合は、SeedProdの使用をお勧めします。

SeedProd は、シンプルなドラッグ＆ドロップエディターを使用して、美しいランディングページ、セールスページ、ホームページなどを作成できる最高のページビルダープラグインです。

回転およびハイライトされたアニメーション見出しを作成するために使用できる「アニメーション見出し」ブロックも付属しています。

名前とは裏腹に、Animated Headlineブロックを使用して、コールトゥアクション、サブヘッダー、または強調したいその他のテキストを含む、あらゆるテキストをアニメーション化できます。

SeedProd には、画像、テキスト、ボタン、動画など、あらゆるブロックに追加できる 40 種類以上の表示アニメーションも付属しています。

数回のクリックでセクション全体やカラム全体をアニメーション化することもできます。これにより、数分で魅力的なアニメーションページを作成できます。

コンバージョンと売上を増やすためにアニメーションを使用している場合、SeedProd は WooCommerce と統合されます。また、ウェブサイトのプロモーションにすでに使用している可能性のある、多くのトップ メールマーケティングサービス もサポートしています。

SeedProdページビルダーの設定方法

まず、SeedProdをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化後、ライセンスキーを入力する必要があります。

この情報は、SeedProd ウェブサイトのアカウントで見つけることができます。ライセンスキーを追加した後、「キーの検証」をクリックするだけです。

カスタムページデザインを作成する

開始するには、SeedProd » ランディングページに移動し、「新しいランディングページを追加」をクリックします。

次の画面で、テンプレートを選択するように求められます。

SeedProdには、404ページテンプレートやカスタムWooCommerce「ありがとう」ページなど、さまざまなカテゴリに整理された350以上の美しいテンプレートが付属しています。

このガイドでは、アニメーションテキストと表示アニメーションを備えたセールスページの作成方法を説明しますが、作成するページの種類に関わらず、手順は同様です。

カテゴリ内のさまざまなテンプレートを表示するには、いずれかのタブをクリックするだけです。

使用したいテンプレートを見つけたら、マウスカーソルを合わせ、チェックマークアイコンをクリックしてください。

すべての画像で「Zen Sales Page」テンプレートを使用していますが、どのテンプレートでも使用できます。

次に、ページにタイトルを付ける必要があります。

SeedProdはページタイトルに基づいてURLを自動的に作成しますが、これを好きなものに変更できます。たとえば、URLに関連キーワードを追加すると、WordPress SEOが向上し、関連する検索結果にページが表示されやすくなることがあります。

詳細については、WordPressブログのキーワードリサーチの方法に関するガイドをご覧ください。

タイトルとURLに満足したら、「保存してページ編集を開始」をクリックします。

これにより、SeedProd のドラッグ＆ドロップページエディターが読み込まれます。

右側には、左側にいくつかの設定が表示されたページのライブプレビューが表示されます。

SeedProdには、ソーシャルシェアボタン、動画、お問い合わせフォームなどを追加できるブロックを含む、デザインに追加できる多くのブロックが付属しています。

詳細については、WordPress でカスタムページを作成する方法 に関するガイドをご覧ください。

WordPressにアニメーションテキストを追加する方法

ページにアニメーションテキストを追加するには、アニメーション見出しブロックを見つけて、ページデザインにドラッグします。

見出しをアニメーション化するには2つの方法があります。まず、「ハイライト」スタイルは、円や下線付きのジグザグのような形状アニメーションをテキストに追加します。

このアニメーションを使用して、見出し内の特定の単語やフレーズに注意を引くことができます。これにより、最も重要なコンテンツをハイライトすることで、見出しをより読みやすく理解しやすくなります。また、行動喚起に注意を引くための優れた方法でもあります。

ハイライト表示されたスタイルには、いくつかの打ち消し線形状もあります。

取り消し線を使用して、面白くて目を引く効果を作成したり、デザインにちょっとした楽しさを加えたりすることができます。

ハイライトアニメーションを作成するには、「スタイル」ドロップダウンを開いて「ハイライト」を選択するだけです。

次に、「形状」ドロップダウンを開き、形状を選択します。形状をクリックすると、SeedProdはそのアニメーションのプレビューを表示するため、さまざまな形状を試して最も気に入ったものを見つけることができます。

SeedProd には「ローテーション」アニメーションスタイルもあり、テキストにトランジション効果を追加します。

アニメーションテキストは、ページが読み込まれたときに訪問者が最初に目にするものなので、最も重要なテキストを強調するのに最適な方法です。

トランジションアニメーションを作成するには、単に「スタイル」ドロップダウンを開き、「ローテーション」をクリックします。

次に、「アニメーション」ドロップダウンを開き、フェード、ズーム、ロールなどの使用したいトランジションタイプを選択できます。ここでも、SeedProd はページエディター内でアニメーションを再生するため、さまざまなエフェクトを試して好みのものを見つけることができます。

「ハイライト」または「ローテーション」アニメーションを作成する場合でも、アニメーションテキストの前後にテキストを追加できます。

「見出しの前」と「見出しの後」のフィールドに単純に入力します。「テキスト」フィールドに、アニメーション化したい単語またはフレーズを追加します。

ヘッドライン全体をアニメーションさせたい場合は、「ヘッドライン前」と「ヘッドライン後」のフィールドを空のままにしてください。

デフォルトでは、SeedProdはアニメーションをループ再生しますが、一部の訪問者にとっては迷惑に感じる場合があります。

アニメーションを1回だけ再生するには、「無限ループ」スイッチをクリックして無効にします。

デフォルトでは、8000ミリ秒の遅延後にアニメーションが1200ミリ秒間再生されます。

値を変更するには、「期間」と「遅延」フィールドに入力してください。たとえば、期間を短くするとアニメーションを速くすることができます。

テキストのスタイルを設定することもできます。たとえば、フォントサイズ や配置を変更できます。

アニメーション見出しの外観に満足したら、「保存」ボタンをクリックして変更を保存します。

WordPress に表示アニメーションを追加する

エントランスアニメーションはページが最初に読み込まれるときに再生されるため、訪問者の注意を引くのに最適です。

また、訪問者に最初に見てほしいコンテンツを強調するためにも使用できます。たとえば、オンラインマーケットプレイスがある場合、商品のヒーロー画像やブラックフライデーセールを宣伝するバナーをアニメーション化することができます。

SeedProdエディター内で、アニメーション化したいコンテンツをクリックし、左側のメニューで「詳細」タブを選択するだけです。

次に、「アニメーション効果」セクションをクリックして展開してください。

その後、「表示アニメーション」ドロップダウンからアニメーションを選択するだけです。

上記と同じ手順に従うだけで、任意のブロック、セクション、または列に表示アニメーションを追加できるようになりました。

WordPressでCSSアニメーションを公開する

ページのセットアップが完了したら、「保存」ボタンのドロップダウンメニューをクリックし、「公開」を選択します。

これで、このページにアクセスしてCSSアニメーションをライブで確認できます。

この記事が、WordPress に CSS アニメーションを追加する方法を学ぶのに役立ったことを願っています。また、WordPress にアニメーション背景を追加する方法 や、すべてのウェブサイトに必要な主要な WordPress デザイン要素 に関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。