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

派手なテキスト スタイルは、視聴者の注意をすばやく引き付けます。 WordPress ウェブサイトの所有者は、テキストにアニメーションを追加する方法をよく尋ねます。 もちろん、WordPress サイトのテキストをデザインする方法はいくつかあります。 もう少しコードが必要な HTML CSS 効果を手動で追加できます。 ただし、コーディングは、カスタム アニメーションをサイトに追加する優れた方法です。 繰り返しになりますが、最高のウィジェットを備えたプラグインは、比較的便利で効果的で、人気があります。

ただし、両方の手法をできるだけ簡単にカバーするように努めました。 WordPress サイトを運営している場合は、時間をかけてブログを読み、プロセスを理解してください。 手順と指示に正しく従うと、独自のアニメーションをスムーズにカスタマイズできます。

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

アニメーション テキスト効果を使用して、WordPress サイトにセンスと個性を加えることができます。 このチュートリアルでは、これらの効果を追加する方法を紹介します。 ただし、その前に、アニメーション テキストとその役割について明確な考えを持っている必要があります。 学びましょう！

アニメーション テキスト エフェクトとは何ですか? どのように表示されますか?

アニメーション化されたテキスト効果は、記事やタイトルにちょっとした楽しみと興奮を加える素晴らしい方法です。 ファンシーなアニメーション テキスト効果を使用することを選択すると、さまざまな効果を作成できます。 テキストの色やサイズを変更する単純なエフェクトもあれば、テキストの点滅や点滅などの詳細なアニメーションもあります。

アニメーション テキストは、通常のテキストとは少し異なります。 通常、このタイプのテキストは単独では移動しません。 代わりに、画面上を移動しているように見える効果があります。 したがって、派手なテキストは、人々がコンテンツやリンクをクリックしたり、メールを開いたりする可能性を高めます。

ウェブサイトにおけるアニメーション テキストの役割

WordPress テーマで利用できるアニメーション テキスト効果にはさまざまな種類がありますが、それらはすべて同じ基本機能を共有しています。 テキストの色やスタイルを変更し、テスト スタイルを変更するだけです。 たとえば、 「行動喚起」ボタンを、背景が赤で「ここをクリック!」という白いテキストに変更できます。 をクリックしたとき。

アニメーション化された見出しまたは派手なテキストを含むヒーロー セクションは、次の役割を果たします。

• デザインを視覚的により興味深いものにします。
• 特別オファーや重要な情報を強調します。
• 製品の機能を目立たせます。
• ウェブサイトをよりインタラクティブにし、ビジネスを促進します。

アニメーション テキスト効果を追加する最も簡単な方法

WordPress プラグインの使用

今日の市場では、テキストのスタイリング作業を容易にするさまざまな種類のプラグインが提供されています。 ElementsKit は非常に強力なプラグインであり、Elementor ページ ビルダーのアドオンでもあります。 ElementsKit を使用すると、1 つのボンネットの下ですべてを取得できます。

ファンシーなアニメーション テキストは、ElementsKit pro が提供する印象的なウィジェットです。

ダッシュボードにログイン -> 任意のページまたは投稿を選択 -> ElementsKit で編集をクリック -> ElementsKit ファンシー アニメーション テキスト ウィジェットを検索 -> ウィジェットをドラッグ アンド ドロップ

コンテンツセクション

パーツはファンシー テキスト パーツと呼ばれ、次のフィールドが含まれます-

アニメーション

• アニメーション スタイル– ここでは、テキストまたは SVG の 2 つのオプションがあり、どちらも異なるアニメーション スタイルを作成できます。
• アニメーションの種類– アニメーションの種類に基づいて、ここでさまざまな選択肢が表示されます。
• Reveal Duration (ms) – オプション ボックスを使用して、アニメーションの継続時間をミリ秒単位で設定できます。
• Reveal Animation Delay (ms) – ここでアニメーションの遅延時間を調整します。 アニメーションを後で開始したり、最初からすぐに開始したり、アニメーションの途中で即座に開始したりできることを指定します。

コンテンツ

• プレフィックス テキスト– 表示するプレフィックス コンテンツをここに書き込む必要があります。 ファンシーアニメーションの前に書かれるということです。
• ファンシー リスト– ファンシー アニメーションのアイテムをここに追加します。
• サフィックス テキスト– 表示するサフィックス コンテンツを書き込みます。 というわけで、派手なアニメーションの後に指定します。

• タイトル HTML タグ– コンテンツの HTML タグをここで選択します。
• リンク (オプション) – ユーザーを他の場所にリダイレクトする場合は、任意のリンクを追加します。

スタイルセクション

• 見出しテキスト– このフィールドを使用して、見出しの配置、タイポグラフィ、色などを調整します。
• ファンシー テキスト リスト– このフィールドを使用して、タイポグラフィ、色、パディングを調整します。
• ファンシー カーソル– このフィールドを使用して、カーソルの色、幅、高さをカスタマイズできます。

必要なすべてのステートメントを編集してスタイリングしたら、[更新] をクリックして、フロント エンドからの変更を確認します。 例は -

CSS の適用

WordPress で CSS アニメーションを作成するときは、次の基本的かつ重要な点に留意してください。

• 適切なアニメーション名の設定 –これは、要素が CSS アニメーションによって移動されたときに要素に表示される名前です。 たとえば、「fadeIn」という名前のアニメーションを持つボタンがある場合、これがこのプロパティに使用する値になります。
• Animation-duration –これは、アニメーションが完了するまでにかかる秒数です。 これを none または 0 に設定して、アニメーションを無期限に、または何か他のことが起こるまで (ページの読み込みなど) 持続させることもできます。
• Animation-timing-function –特定の時間 (ミリ秒単位) にかかる時間に基づいて、要素がある場所から別の場所に移動する方法を制御します。 たとえば、このプロパティをイーズアウトに設定すると、要素はゆっくりと動き始め、持続時間の終わりに加速してから、最初から再び動き始めます。
• Animation-delay –これは、アニメーションが終了してから再開するまでに何ミリ秒追加する必要があるかを指定する値です (たとえば、1 秒)。
• Animation-iteration-count – アニメーションの再生に必要な時間です。 CSS プロパティを使用すると、この繰り返しをカウントできます。
• アニメーションの方向 –アニメーションを再生する順序または方向です。 ノーマル、リバース、オルタネート、オルタネート-リバースのいずれかです。
• Animation-fill-mode –これらの値は、要素の表示方法を指定します。 アニメーションが適用される前と後である可能性があります。
• @keyframes を知る –コース上で変化するアニメーションのプロパティと、それらのプロパティがとるべき値を指定します。 例えば：

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

通常、パーセンテージはアニメーションのタイミングを示すために使用されます。 上記のキーフレームは、要素の背景色がアニメーションを通じて赤から黄色に 25% 変化することを示しています。

ただし、 from と toは、それぞれ 0% と 100%の代わりに使用できます。

animate.css ファイルの作成

まず、作業しているテキスト エディターで、必要なすべてのプロパティを含む別のファイルを作成する必要があります。任意のアニメーションのキーフレームを選択できます。 次に、それらを特定の CSS クラスと組み合わせて、WordPress サイトのテキストに適用する必要があります。

まず、CSS ファイルに簡単なコードを記述します。 アニメーション テキストのサンプル コードは次のようになります。

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

このキーフレームを CSS クラスにバインドするために、 MyAnimation という名前のテキストを設定しました。 したがって、上記のコードの直後に、以下のコードをファイルに入れる必要があります。

 .MyAnimation { animation-name: MyAnimation; }

基本的な CSS アニメーションの知識をすべて見つけて、ここでコードを練習できます。

この手順を繰り返して、必要に応じてできるだけ多くのアニメーションを作成できます。 次に、ファイルを animate.css として保存します。 または、Animate.css ファイルをダウンロードすることもできます。 これは、多数の人気のあるアニメーション デザインのキーフレームと CSS クラスが含まれている人気のファイルです。 さらに、このファイルを使用すると、複雑なアニメーションをコーディングする手間が軽減されます。

上記のコードは、 h1 タグ' MyAnimation ' のテキストをアニメーション化します。 「3s」を別の値に変更することで、アニメーションの長さを変更できます。 16 進値を変更して色を変更することもできます。 CSS ファイルを保存したら、Web サイトの外観をさらに変更したり、CSS ファイルを編集したりできます。 CSSファイルを編集することで、文字のフォントやサイズ、色を変更することができます。 また、CSS ファイルを変更することで、背景色とヘッダーのサイズを変更することもできます。

animate.css ファイルを WordPress サイトにロードする

ファイルの作業が完了したら、それをテーマのディレクトリにアップロードします。 プロセス全体を 3 つのステップに分けました。

ステップ1

ファイル転送プロトコル (FTP) を使用してサイトに移動 -> FTP クライアント (FileZilla、WinSCP、Cyber​​duck など) を選択 -> ホスティング アカウントで必要な資格情報を選択します。

ステップ2

public_html ディレクトリへのアクセス -> wp-content に移動します -> テーマ -> アクティブまたは子テーマのフォルダーを選択します

ステップ-3

ここで、css という名前のサブディレクトリを検索します。 取得した場合は、Animate.css ファイルから animate.css または animate.min.css ファイルをサブディレクトリと共にアップロードします。

ただし、サブディレクトリ フォルダーがない場合は、新しいフォルダーを簡単に作成できます。 そのためには、ファイルを読み込んだ直後に簡単な編集を行って新しいファイルを作成すれば完了です。

functions.php 経由で Animate スタイルシートを呼び出す

functions.php ファイルは、アクティブなテーマのフォルダーにあります。 ここで、Animate スタイルシートを呼び出すために、次のコード スニペットを追加する必要があります。

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Animate.css の animate.min.css ファイルを使用した場合は、最終行に animate.css の代わりに animate.min.css を記述する必要があることに注意してください。 すべての変更を保存したら、WordPress ダッシュボードに移動します。

CSS クラスを使用してアニメーションを適用する

そのため、animate.css ファイルに任意のクラスを適用して、投稿やページでさまざまなアニメーション効果を表示できるようになりました。 また、Animate.css ファイルを使用すると、すべての完全なリストを参照できます。

最後に、クラシック エディターで投稿またはページを選択します -> テキスト エディターに切り替えます -> ブロック エディターの場合はブロック ツールバーの 3 点アイコンをクリックします -> HTML として編集を選択します -> アニメーションを追加しますクラスとアニメーションのクラスを要素タグに追加 -> プレビュー

これらは、サイトにアニメーション テキストを追加するための 2 つの効果的な手法であり、サイトをより魅力的で視覚的に魅力的なものにするのに役立ちます。 これらの手法のいずれかを使用することで、ページに動きと興味を持たせることができます。

ただし、コーディングの知識がない場合、CSS を適用するのは少し難しい場合があります。 したがって、WordPress で CSS アニメーションを作成するには、専門家の助けを借りることをお勧めします。 あるいは、ElementsKit の派手なアニメーション テキストは、スタイリッシュなアニメーションをすばやくデザインできるようにするスマート ウィジェットです。 ウィジェットを使用すると、選択したテキストを派手なアニメーションに変換できます。