CSSカラーガイド：CSSを使ってGemPagesで背景スタイルを設定する方法

CSS カラーとは何ですか?

CSS（カスケーディングスタイルシート）は、ウェブページ上のHTML要素の外観を制御するために使用されます。CSSの中心的なスタイル設定ツールの1つは カラーテキスト、背景、境界線、ボタンなどに色を適用できます。

CSS で色を定義する一般的な方法:

1. 名前付き色 – 定義済みのキーワード 赤, 青または 黒.
   例： 色：赤;
2. 16進コード – 6桁のコードで始まる #.
   例： 色: #ff0000;
3. RGB（赤、緑、青） – 各値の範囲は 0 ～ 255 です。
   例： 色: rgb(255, 0, 0);
4. HSL (色相、彩度、明度) – デザイナーにとってより直感的になります。
   例： 色: hsl(0, 100%, 50%);
5. RGBA / HSLA – 上記と同じですが、アルファ (透明度) 値を使用します。
   例： 背景色：rgba（255、0、0、0.5）;

これらの形式により、サイトのビジュアル デザインを柔軟に制御できるようになります。

CSS カラーリスト（最も一般的）

最も広く使用されている CSS カラー名とその 16 進コードをいくつか示します。

これらを CSS で直接使用して要素のスタイルを設定できます。

CSSを使ってGemPagesのセクションの背景色を変更する方法

あなたが使用している場合 GemPagesセクションの背景色を変更するには、 カスタムCSSコード。 方法は次のとおりです。

ステップ1： GemPagesエディタで、カスタム背景を適用したいセクションを右クリックし、 「カスタムコード」

ステップ2： CSSコードを貼り付けます CSSタブ カスタム コード モーダル内。

使用できる CSS の例を次に示します。

体 {

     背景: #3355ff !重要;    

}  

#3355ff を、選択した XNUMX 進カラー コードに置き換えます。

例: 黒の場合は #000000、白の場合は #ffffff、またはデザインの好みに合わせてその他の XNUMX 進コードを使用します。

!important により、競合するスタイルが上書きされ、ページ全体に背景色が一貫して適用されます。

ステップ3： 詳しくはこちら Save の三脚と プレビュー 変更内容。この CSS は、テーマまたは GemPages によって設定されたデフォルトの背景色を上書きします。

よくある質問

1. CSS を使用して GemPages 内の特定のセクションまたは要素をターゲットにするにはどうすればよいですか?

GemPagesの特定のセクションをターゲットにするには、 カスタムクラス名 要素に追加して CSS で参照します。
例：

• GemPages で、セクションクラス名をコピーします。

• 次の CSS を使用します。

.my-section {

  背景色：＃e0e0e0;

}

この方法は、 ボディ.

2. Shopify または GemPages で Tailwind CSS カラーを使用できますか?

直接はできません。Tailwind CSSはユーティリティファーストのフレームワークであり、ビルド時に統合する必要があります。TailwindがShopifyまたはGemPagesのセットアップにすでに含まれていない限り、Tailwindのカラークラスは使用できません。 bg-red-500代わりに標準の CSS を使用する必要があります。

3. カスタム CSS が GemPages または Shopify に適用されない場合はどうなりますか?

カスタム CSS が適用されない場合:

• 別のスタイルがそれを上書きしているかどうかを確認します。
• 追加 ！重要 強制的に使用してください（注意して使用してください）。
• セレクターが十分に具体的であることを確認してください。
• GemPages で、カスタム コードが保存され、変更が公開されていることを確認します。