カウントダウンタイマーに背景色を追加する方法

この記事では、GemPagesのカウントダウンタイマー要素に背景色を追加する方法を説明します。

設定やカスタマイズのニーズに応じて、以下の2つの方法を選択できます。

• オプション1：カウントダウンタイマーをRow要素内に追加し、Rowの背景設定を使用する
• オプション2：カウントダウンタイマーにカスタムCSSコードを直接追加する

オプション1：行要素を使用して背景色を追加する

コードを使わずにカウントダウンセクション全体を視覚的にスタイル設定したい場合は、これが最も簡単で推奨される方法です。

ステップ1：カウントダウンタイマーを列の中に配置します

• GemPagesエディタを開きます。
• ドラッグ 行 素子 レイアウトに組み込みます。
• ドラッグ カウントダウンタイマー 列の内側。

これにより、行コンテナが背景のスタイルを制御できるようになります。

ステップ2：行の背景色を設定する

• 以下を行うには、 行 要素。
• Video Cloud Studioで 設定 パネル。
• 設定 → 背景 に移動してください。
• お好みの背景色を選択してください。

以下を追加することもできます:

• 無地
• グラデーション背景
• 背景画像

詳細については、こちらのガイドをご覧ください。 GemPagesで画像や背景色を設定する方法

オプション2：カスタムCSSを使用して背景色を追加する

カウントダウンタイマー要素自体に背景を直接適用したい場合は、カスタムCSSを使用できます。

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

• カウントダウンタイマーの要素をクリックしてください。
• 要素を右クリックします。
• 選択 カスタムコード.

これにより、その要素のカスタムコードエディタが開きます。

ステップ2：CSSコードを追加する

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

.ElementClass {

背景: #DFC4C4 !重要;

}

次に、以下を置き換えます。

• .ElementClass 実際の要素クラスを使用して
• #DFC4C4 ご希望のカラーコードで

ヒント：カラーコードの入手方法

GemPagesは標準的なHEXカラーコードをサポートしています。

例：

#000000 → ブラック

#FFFFFF → ホワイト

#FF0000 → 赤

#DFC4C4 → ソフトピンク

これらのウェブサイトを利用して、カラーコードを選択・生成できます。

• HTMLカラーコード
• Coolorsカラーパレットジェネレーター
• Adobeカラー
• カラーハント

これらのツールは次のことに役立ちます。

• 色を視覚的に選ぶ
• 一致するパレットを生成する
• HEXカラーコードを簡単にコピーできます

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

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

これで、カウントダウンタイマーが選択した背景色で表示されるはずです。