ホーム » カウンターの使い方

カウンターの使い方

カウンターの使い方

0から指定した数まで動く数字で、実績や件数を見せられます。

このページでできること
実績などの数値を動かして見せる

スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。

① 「カウンター」を追加する

  1. 編集したいページを「Elementorで編集」で開きます。
  2. 左上の「+」(要素を追加)を押し、「カウンター」で検索します。
  3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。

② 数値と単位を入力する

カウンター:コンテンツの実際の設定画面1234
1 終了ナンバー / 2 番号接尾辞 / 3 タイトル / 4 継続時間
赤い番号は手順の番号に対応しています。
  1. 「開始ナンバー」に開始値、「終了ナンバー」に表示したい数値を入力します。
  2. 数値の前に付ける文字は「番号接頭辞」、後ろの単位は「番号接尾辞」に入力します。
  3. 「タイトル」に「導入実績」など、何の数字かを入力します。
  4. 「アニメーションの継続時間 (ms)」を設定します。2000msは2秒です。
ここを確認:終了値・単位・タイトルが正しい。

③ 見た目と表示を確認する

カウンター:スタイルの実際の設定画面123
1 タイトル位置 / 2 タイトルギャップ / 3 番号/タイトル
赤い番号は手順の番号に対応しています。
  1. 「スタイル」でタイトルの位置と数字の配置を選びます。
  2. 「タイトルギャップ」で数字と説明の距離を調整します。
  3. 「番号」「タイトル」で文字色とサイズを整えます。
入力・使い方の例

開始0/終了120/接尾辞「件」/タイトル「導入実績」 → 120件

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

完了チェック
  • 終了値・単位・タイトルが正しい。
  • プレビューを開き直すと動きを確認できる。

スマホ表示の調整方法保存・公開の手順

うまくいかないとき

数字が自動更新されない

通常は入力した固定の数値を表示します。アクセス数や売上が自動集計される部品ではありません。

画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。


← Elementor使い方マニュアルの目次へ