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

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

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

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

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

アニメーション テキスト効果とは何ですか?また、どのように表示されますか?

アニメーションのテキスト効果は、あなたのコンテンツにちょっとした楽しみと興奮を加えるのに最適な方法です。 記事やタイトルも。派手なアニメーション テキスト効果の使用を選択すると、さまざまな効果を作成できます。いくつかの効果は、 文字の色やサイズを変更するだけの簡単な操作、いくつかは次のような詳細なアニメーションです。 点滅または点滅するテキスト.

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

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

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

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

• デザインを視覚的にさらに面白くします。
• 特別オファーや重要な情報を強調表示します。
• 製品の特徴を際立たせます。
• ウェブサイトをよりインタラクティブにし、ビジネスを促進します。

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

WordPress プラグインの使用

現在の市場では、テキストのスタイル設定タスクを容易にするさまざまな種類のプラグインが提供されています。 ElementsKit は非常に強力なプラグインです Elementor ページビルダーのアドオンも含まれます。 ElementsKit を使用すると、すべてを 1 つの機能で実現できます。

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

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

コンテンツセクション

その部分はと呼ばれます ファンシーテキスト部分、次のフィールドが含まれます。

ElementsKit がなぜこれほど人気があるのかご存知ですか? 🤔
ここを確認してください 👉 ElementsKit で構築された世界トップランキング Web サイト

アニメーション

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

コンテンツ

• プレフィックステキスト – 表示したいプレフィックスの内容をここに記述する必要があります。つまり、派手なアニメーションの前に書かれることになります。
• ファンシーリスト – 派手なアニメーションを作成するには、ここにアイテムを追加します。
• サフィックステキスト – 表示したいサフィックスの内容を記述します。ということで、派手なアニメーションの後に指定することになります。

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

スタイルセクション

• 見出しテキスト – このフィールドを使用して、見出しの配置、タイポグラフィ、色などを調整します。
• ファンシーテキストリスト – このフィールドを使用して、タイポグラフィ、色、およびパディングを調整します。
• ファンシーカーソル – このフィールドを使用すると、カーソルに色、幅、高さの派手な外観を与えることができます。

必要なステートメントをすべて編集してスタイル設定した後、「更新」をクリックしてフロントエンドからの変更を確認します。例としては –

CSSの適用

WordPress で CSS アニメーションを作成する場合は、次の点に注意してください。 基本的だが重要なことを心に留めておく:

• 正しいアニメーション名の設定 – これは、CSS アニメーションによって要素が移動されたときに要素に表示される名前です。たとえば、「fadeIn」という名前のアニメーションを備えたボタンがある場合、これがこのプロパティに使用する値になります。
• アニメーション期間 – これはアニメーションが完了するまでにかかる秒数です。これを none または 0 に設定して、アニメーションを無期限に、または何か他のことが起こるまで (ページの読み込みなど) 継続させることもできます。
• アニメーションタイミング機能 – これは、特定の時間 (ミリ秒単位) にかかる時間に基づいて、要素があるスポットから別のスポットに移動する方法を制御します。たとえば、このプロパティをイーズアウトに設定すると、要素はゆっくりと動き始め、持続時間が終了すると速度が上がり、再び最初から動き始めます。
• アニメーション遅延 – これは、アニメーションが終了してから再び開始するまでに追加するミリ秒数 (たとえば、1 秒) を指定する値です。
• アニメーションの反復回数 – これはアニメーションの再生に必要な時間です。 CSS プロパティを使用すると、この繰り返しをカウントできます。
• アニメーションディレクション – アニメーションを再生する順序または方向です。ノーマル、リバース、交互、交互反転のいずれかになります。
• アニメーションフィルモード – これらの値は、要素の表示方法を指定します。アニメーションが適用される前でも後でも構いません。
• @keyframes を知る – コース中に変化するアニメーションのプロパティと、それらのプロパティが取る値も指定します。例えば： 

@keyframes の例 { 0% {背景色: 赤;} 25% {背景色: 黄色;} 50% {背景色: 青;} 100% {背景色: 緑;} }

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

しかし、 からとから の代わりに使用できます それぞれ0%と100%.

「タイムライン」セグメントは、顧客の注意を引き、Web サイトへの訪問に影響を与えるのに大きな役割を果たします。続きを読む 👉 ここ！

animate.css ファイルの作成

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

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

```@keyframes MyAnimation { from { 不透明度: 0;変換: 回転(20度);アニメーション期間: 3 秒。 } から {不透明度: 1;} 変換: 回転(0度); } }

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

.MyAnimation { アニメーション名: MyAnimation; }

CSS アニメーションの基本的な知識をすべて学び、実践することができます。 コードはここにあります!

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

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

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

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

ステップ1

を使用してサイトにアクセスします ファイル転送プロトコル (FTP) -> FTP クライアントを選択します (ファイルジラ、WinSCP、Cyberduck など) -> ホスティング アカウントで必要な認証情報を選択します。

ステップ2

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

ステップ-3

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

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

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

function.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.min.css を記述する必要があります。 animate.css の代わりに。すべての変更を保存したら、WordPress ダッシュボードに移動します。

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

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

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

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

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