WordPressで数字のカウントアニメーションを表示する方法

WordPressサイトにアニメーション数字カウンターを表示する方法をお探しですか？

数字のカウントを表示することで、訪問者の注意を引くことができ、マイルストーン、満足したカスタマイザー、成功したプロジェクトの完了、その他の重要な統計をサイトに表示することができます。

この投稿では、WordPressで数字のカウントアニメーションを表示する方法を紹介します。

WordPressで数字カウントアニメーションを追加する理由

WordPressサイトに数字カウンターを表示することは、ユーザーを惹きつけ、注目を集める素晴らしい方法です。

月間訪問者数やWordPressブログの投稿記事数など、サイトの重要な統計情報を表示するために使用できます。

同様に、完了したプロジェクト、満足したカスタマーの数、カスタマイザーの数、あなたのビジネスが達成したマイルストーン、その他の重要な情報を表示するために、アニメーション数字カウントを使用することができます。

例えば、OptinMonsterは、最適化された月間訪問者セッションを表示するために数値カウンタを使用しています。

WordPressで数値カウントを追加したりカスタマイズしたりするには、通常コードの編集が必須となる。これは、コードの書き方を知らない初心者にとっては厄介なことだ。

それでは、WordPressでアニメーション数字カウンターを表示する方法を見てみましょう。プレミアムサイトビルダーと無料プラグインを使った2つの簡単な方法を取り上げます。

下のリンクをクリックすると、お好きなセクションにジャンプできます：

方法1: SeedProdを使用して数字カウントアニメーションを表示する

WordPressでアニメーション数字カウンターを追加する最良の方法は、SeedProdを使用することです。これは、多くのカスタマイズオプションを提供する最高のWordPressページビルダーです。

このチュートリアルでは、高度なブロックが含まれ、カウンターを追加できるSeedProd Proバージョンを使用します。無料で試せるSeedProd Liteバージョンもあります。

最初に必要なことは、SeedProdをインストールして有効化することです。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドをご覧ください。

有効化すると、SeedProdはライセンスキーの入力を要求します。ライセンスキーは、アカウントエリアと購入確認メールに記載されています。

次に、WordPressの管理画面からSeedProd ” ランディングページにアクセスします。

SeedProdでは、近日公開ページ、メンテナンスモードページ、ログインページ、404ページなど、プロがデザインしたカスタムランディングページを作成することができます。

新規ランディングページの追加」ボタンをクリックします。

その後、ランディングページにSeedProdテンプレートを選択し、アニメーション数字カウンターを表示することができます。

テンプレートにマウスオーバーして、オレンジ色のチェックボタンをクリックするだけです。

ポップアップ・ウィンドウが開きます。ページ名とページのURLを入力してください。

その後、’Save and Start Editing the Page’ボタンをクリックします。

SeedProdドラッグ＆ドロップビルダーが起動します。

次に、さまざまなブロックを追加したり、ページ上の既存の要素をクリックしたりして、ページテンプレートを編集することができます。

数字のカウントアニメーションを追加するには、左側のメニューからCounterブロックをドラッグしてテンプレートにドロップするだけです。

その後、カウンターブロックを選択し、さらにカスタマイズすることができます。

例えば、カウンターの開始番号と終了番号を変更したり、数字の接頭辞と接尾辞を入力したり、タイトルを編集したりするオプションがあります。

次に、左側のカウンターブロック設定の下にある「高度な設定」タブに切り替えることができます。

ここでは、Counterブロックのスタイル、色、間隔、フォントなどを変更するオプションがあります。

次に、上部にある「保存」トグルをクリックします。

ドロップダウンメニューから「公開する」を選択できます。

数字カウンターのアニメーションを見るには、WordPressサイトにアクセスしてください。

デモサイトではこんな感じ。

方法2: Counter Numberを使った数字カウントアニメーションを表示する

WordPressでカウントアニメーションを追加するもう一つの方法は、Counter Numberプラグインを使うことです。

WordPressの無料プラグインで、使いやすく、サイトにシンプルな数値カウンターを作成できます。

まず、Counter Numberプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法をご覧ください。

有効化した後、WordPressダッシュボードからCounter Numbers ” All countersに行き、’Add New Counter’ボタンをクリックしてください。

その後、カウンター番号のタイトルを入力することができます。

無料版では、プレーンなデザインのテンプレートしか選択できません。より多くのテンプレートやカスタマイズ設定が必要な場合は、SeedProdのご利用をお勧めします。

次に、カウンター番号の詳細を追加することができます。カウンターのタイトルを編集し、アイコンを選択し、カウンター番号の値を入力するオプションがあります。

下部にある「新規カウンターボックスの追加」ボタンをクリックすれば、好きなだけカウンター番号を追加することができます。

そのほか、右側のパネルからさらに多くのカスタマイズ設定ができる。

例えば、このプラグインでは、カウンターのタイトルの色、数字の色、アイコンのサイズ、フォントのサイズ、フォントファミリーなどを変更することができます。

変更後、一番上までスクロールし、カウンターを公開します。

次に、WordPressダッシュボードからCounter Numbers ” All countersに向かいます。

カウンター・ショートコードをコピーしてください。こんな感じになります：

[COUNTER_NUMBER id=41】。］

その後、投稿日やページからサイドバーまで、あなたのサイトのどこにでもアニメーション数字カウントを配置することができます。

新しい投稿やページを追加するか、既存の投稿やページを編集するだけです。コンテンツエディターに入ったら、「+」記号をクリックし、ショートコードブロックを追加します。

次に、カウンター番号のショートコードをブロックに貼り付けます。

ここから、ページや投稿をプレビューして公開し、アニメーションによる数字のカウントを実際に見てみましょう。

WordPressで数字のカウントアニメーションを表示する方法について、この投稿がお役に立てれば幸いです。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.