メールとテキストフィールド要素のプレースホルダーテキストの色を変更する

プレースホルダーテキストとは、顧客が何かを入力する前にフィールド内に表示される薄いテキストのことです。例えば、次のようなものです。

• 「メールアドレスを入力してください」
• "あなたの名前"
• 「電話番号」

プレースホルダーの色をカスタマイズすることで、フォームをストアのブランドイメージに合わせ、ページ全体のデザインの一貫性を向上させることができます。

ステップ1：要素設定を開きます

まず、GemPagesでページエディタを開きます。

その後：

• 上にカーソルを合わせる メールアドレス or テキストフィールド カスタマイズしたい要素
• 要素を右クリックします
• 選択 カスタムコード

これにより、その要素専用のカスタムCSSを追加できます。

ステップ2：プレースホルダーカラーコードを追加する

以下のコードをカスタムコードセクションに貼り付けてください。

.ElementClass::placeholder {

  色: #000000 !重要;

}

ステップ3：色の値を置き換える

交換する #000000 お好みの色で。

以下を使用できます。

• 色の名前
• 16進数カラーコード
• RGB値

色名やHEXコードを調べることができる人気のウェブサイトをいくつかご紹介します。

• カラーピッカー — https://htmlcolorcodes.com/
• クーラー — https://coolors.co/
• アドビカラー — https://color.adobe.com/
• CSSグラデーション — https://cssgradient.io/