カウントダウンの数字の間にコロンを追加する方法

GemPagesのカウントダウン要素は、デフォルトでは、各時間単位（日、時間、分、秒）を区切り文字なしで個別に表示します。

カウントダウンタイマーをよりすっきりとプロフェッショナルに見せたい場合は、コロン（:）各数字の間に小さなカスタムCSSスニペットを使用して挿入します。 このガイドでは、ほんの数ステップでその方法を説明します。

あなたが始める前に

すでに持っていることを確認してください カウントダウン要素 GemPagesのあなたのページに追加されました。

このカスタマイズはGemPagesのカウントダウン要素で機能し、カスタムCSSスニペットを追加する必要があります。

ステップ1：カウントダウン要素のカスタムコードエリアを開きます

• GemPagesでページエディタを開きます。
• あなたの上でクリックしてください カウントダウン 要素。
• 要素を右クリックします。
• 選択 カスタムコード.

これにより、CSSを追加できるカスタムコードパネルが開きます。

ステップ2：カスタムCSSを追加する

以下のコードをカスタムコード欄に貼り付けてください。

.ElementClass #section-countdown > div {

位置：相対;

}

.ElementClass #section-countdown > div:not(:last-child):after {

コンテンツ： '：';

位置：絶対;

右: -2.5px;

トップ：50％;

変換：translateY（-50％）;

線高さ：1;

フォントサイズ：16px。

フォント重量：太字;

padding-bottom：3px;

カラー：#121212。

}

コードを貼り付けた後、置き換えてください .ElementClass 実際の要素クラスを使用します。 

間隔に関する重要な注意点

カウントダウンのレイアウト、フォントサイズ、間隔、デザイン設定によっては、 右 結腸を最適な位置に配置するための値。

具体的な例を挙げますと、以下の通りです。

右: -2.5px;

次のような値を試してみてください。

右: -1px;

右: -4px;

右: -6px;

デザイン上で間隔が適切に見えるまで調整してください。

詳細については、こちらの動画説明をご覧ください。 織機チュートリアルビデオ

ステップ 3: 保存して公開する

• 詳しくはこちら Save.
• ページを公開または更新します。
• ページをプレビューして、カウントダウンの表示スタイルを確認してください。

これで、カウントダウンタイマーの各数字の間にコロンが表示されるはずです。