WordPressでテキストアニメーションを作成する方法（簡単な手順）

公開: 2022-08-04

WordPress にアニメーションを追加しますか?

アニメーションは視聴者の注意を引く優れた方法であり、CTA ボタン、体験談、サインアップフォームなどの役立つコンテンツや重要な要素に視聴者を誘導します。

この記事では、WordPress Web サイトでテキストアニメーションを作成する方法を順を追って説明します。

アニメーションテキストエフェクトとは何ですか? なぜ使用するのですか?

アニメーションテキスト効果は、Web サイトの見出しやその他のテキストベースのコンテンツ用の CSS アニメーションです。バウンス、スクロール、スライドなどのトランジション効果やアニメーションスタイルを追加して、サイトの重要な情報に注目を集めることができます。

WordPress でテキストアニメーションを使用すると、次のことができます。

価格表で特典を目立たせる
製品機能のアニメーション化
注目を集める見出しを作成する
コールトゥアクションボタン (CTA) に注目を集める
もっと。

多くの Web サイトでは、ページスクロールにページアニメーションとトランジションを使用しています。たとえば、ユーザーがページを下にスクロールすると、テキストウィジェットが「ポップ」するようにアニメーション化できます。

CSS3 アニメーションはフラッシュやビデオよりも高速であるため、読み込みが速く、最新のほとんどの Web ブラウザーでサポートされています。また、WordPress アニメーションプラグインを使用すると、サイトに簡単に追加できます。

それを念頭に置いて、WordPress でアニメーションテキスト効果を作成する方法を見ていきましょう。

WordPress にアニメーションテキスト効果を追加する方法: 2 つの方法

WordPress にアニメーションを追加するには、いくつかの方法があります。 WordPress プラグインを使用するか、手動で CSS 効果を追加できます。

テキストエフェクトを手動で作成するのは初心者にとって難しいため、WordPress ページビルダーと無料の WordPress アニメーションプラグインを使用してテキストアニメーションを作成する方法を紹介します。

方法 1. SeedProd でアニメーションの見出しを作成する
- ステップ 1. SeedProd プラグインをインストールしてアクティブ化する
- ステップ 2. ランディングページのテンプレートを選択する
- ステップ 3. ランディングページのコンテンツをカスタマイズする
- ステップ 4. アニメーションヘッドラインブロックを追加する
- ステップ 5.設定を構成する
- ステップ 6. ランディングページを公開する
方法 2. Animate It! でテキストアニメーションを追加するCSS プラグイン

方法 1. SeedProd でアニメーションの見出しを作成する

最初の方法では、WordPress に最適な Web サイトビルダーである SeedProd を使用します。視覚的なドラッグアンドドロップページビルダーとアニメーションヘッドラインブロックを使用すると、数回クリックするだけで刺激的なトランジション効果を追加できます。

SeedProd を使用すると、コードを記述したり開発者を雇ったりすることなく、カスタム WordPress テーマとレスポンシブレイアウトを作成できます。ページをカスタマイズするための強力なコンテンツブロック、e コマースストアの WooCommerce サポートが含まれており、人気のある WordPress プラグインとシームレスに統合されています。

さらに、このプラグインは軽量で肥大化がないため、ページの読み込み時間が速く、ユーザーフレンドリーです.

WordPress で SeedProd を使用してテキストアニメーションを作成するには、次の手順に従います。

ステップ 1. SeedProd プラグインをインストールしてアクティブ化する

まず、SeedProd の価格設定ページに移動し、ライセンスを選択します。高度な機能を備えたSeedProd Proをお勧めします。

その後、SeedProd アカウントエリアにログインし、プラグインをダウンロードします。同時に「ダウンロード」タブでライセンスキーをコピーできます。

次に、プラグインをインストールして、WordPress サイトで有効にします。サポートが必要な場合は、次の手順に従って WordPress プラグインをインストールできます。

SeedProd をアクティベートした後、 SeedProd » Settingsに移動し、ライセンスキーを入力して、 Verify Keyボタンをクリックします。

これで、アニメーション効果のあるページの作成を開始する準備が整いました。

ステップ 2. ランディングページのテンプレートを選択する

SeedProd を使用して、単一の WordPress ページ、WordPress テーマ、またはビジュアルエディターを備えたランディングページを作成できます。このガイドでは、販売ランディングページにテキストアニメーションを追加します。

まず、 SeedProd » Landing Pagesに移動し、[ Add New Landing Page ] ボタンをクリックする必要があります。

ここでは、180 以上のモバイル対応のランディングページテンプレートから選択できます。

販売ページを作成しているので、[販売] タブをクリックして、さまざまな販売ページテンプレートを表示します。気に入ったテンプレートが見つかったら、画像のホバー効果が表示されるまでカーソルを移動し、オレンジ色のチェックマークアイコンをクリックします。

choose a landing page template to animate

次に、ランディングページ名と URL 情報を追加できるポップアップウィンドウが表示されます。その後、[保存してページの編集を開始] ボタンをクリックします。

ステップ 3. ランディングページのコンテンツをカスタマイズする

ランディングページテンプレートが SeedProd のドラッグアンドドロップビジュアルエディターで開きます。ここで、コンテンツとスタイルをカスタマイズし、ページ要素を追加できます。

SeedProd drag-and-drop-page builder WordPress

たとえば、現在の画像ブロックをクリックして、WordPress メディアライブラリまたはコンピューターからファイルをアップロードすることで、カスタムロゴを追加できます。

CTA ボタンをクリックして、左側の [詳細設定] パネルにアクセスすると、さまざまな色、テキスト、およびスタイルで CTA ボタンを編集することもできます。

Customize landing page call to action button seedprod

新しい要素の追加も同様に簡単です。左側のブロックパネルからブロックをドラッグして、デザインにドロップできます。たとえば、カウントダウンタイマーは、ページに緊急性を追加し、見逃すことを恐れてユーザーに行動を促すことができます。

カスタマイズが完了したら、次に見出しテキストをアニメーション化する方法を見てみましょう。

ステップ 4. アニメーションヘッドラインブロックを追加する

ランディングページのメインヘッドラインをアニメーション化するとします。そのためには、 Animated Headlineブロックを見つけてページデザインにドラッグする必要があります。

ブロックをクリックして設定を表示すると、見出しをアニメーション化する 2 つの方法が表示されます。

ハイライト
回転中

強調表示されたスタイルは、次のような図形を含む図形アニメーションをテキストに追加します。

サークル
縮れた
下線
ダブル
二重下線
ジップザグに下線を引く
対角線
取り消し線
バツ

対照的に、 Rotatingスタイルは、次のようなトランジション効果を見出しに追加します。

タイピング
クリップ
フリップ
跳ねる、弾む
ロール
ズーム
フェード
光速
スライドダウン

さらに、アニメーションテキストの前後にテキストを追加したり、無限ループを有効にしたり、アニメーションの長さを変更したり、配置、フォント、見出しレベルを調整したりできます。

この例では、強調表示されたドロップダウンメニューから「下線」図形を使用します。

SeedProd text animation WordPress underline

アニメーションテキスト効果に満足したら、右上隅にある [保存] ボタンをクリックします。

ステップ 5.設定を構成する

次のステップは、メールマーケティングサービスを接続し、ランディングページの設定を構成することです。

SeedProd は、Constant Contact、Mailchimp など、多くの一般的なメールプロバイダーとの直接統合を提供します。画面の上部にある [接続] タブをクリックして、いずれかを選択できます。

特定のプロバイダーへの接続については、メール統合のドキュメントをご覧ください。

次に、[ページ設定] タブをクリックします。ここで、ページ名、URL、ページ上の SEO などの設定を編集したり、Google アナリティクスプラグインに接続したりできます。

SeedProd のドメインマッピング機能を使用して、ランディングページにカスタムドメイン名を付けることもできます。これは、単一の WordPress インストールで固有のドメインを持つ複数のランディングページを持つ優れた方法です。

次のステップに進む前に、忘れずに [保存] をクリックしてください。

ステップ 6. ランディングページを公開する

デザインに満足したら、[保存] ボタンのドロップダウンメニューをクリックし、[公開] を選択します。

publish landing page with text animation

ページを表示して、テキストアニメーションの動作を確認できるようになりました。

方法 2. Animate It! でテキストアニメーションを追加するCSS プラグイン

次の方法では、無料の WordPress アニメーションプラグインを使用して、アニメーションテキスト効果を Web サイトに追加します。これは、ページビルダーや WordPress ブロックエディターの代わりに従来の WordPress WYSIWYG エディターを使用する場合に適したソリューションです。