ShopifyとGemPagesの背景にCSSグラデーションを使用する方法

CSS グラデーションとは何ですか?

A CSSグラデーション 2色以上の色彩が変化する背景スタイルです。従来の画像とは異なり、グラデーションはコードで作成されるため、スケーラブルで軽量、そして簡単にカスタマイズできます。

CSS グラデーションには主に 3 つの種類があります。

• 線形グラデーション: 直線に沿って色を遷移します (例: 上から下、左から右)。
  例： 線形グラデーション（赤、緑）
• 放射状グラデーション: 色は中心点から外側に放射状に広がります。
  例： 放射状グラデーション（円、青、白）
• 円錐勾配: 円グラフのように中心点を中心に色が回転します。
  例： 円錐グラデーション（90度から、赤、黄、緑）

おすすめのCSSグラデーションジェネレーター

以下の無料ツールを使用すると簡単になります:

• CSSグラデーション – 線形および放射状グラデーションのためのユーザーフレンドリーなインターフェース
• uiグラデーション– 美しく、すぐに使えるプリセット
• Coolors グラデーションジェネレーター – ブランドパレットに最適
• グラデーションハント – コミュニティキュレーションのグラデーション

これらのジェネレーターは視覚的なプレビューを提供し、ワンクリックで CSS をコピーできます。

Shopifyでグラデーション背景を設定する方法

Shopifyテーマでは、 テーマエディタカスタム CSS を使用してこれを行う方法は次のとおりです。

ステップ1： に行く オンラインストア>テーマ Shopify管理画面で。

ステップ2： 詳しくはこちら カスタマイズ 編集したいテーマの横にある をクリックします。

ステップ 3： クリック 設定（歯車アイコン） それから、 色.

ステップ4： スキームで、編集するスキームをクリックします。

ステップ5： 変更したいグラデーションを選択します。

ステップ6： 横の矢印をクリック 勾配、その後、選択し CSS.

ステップ7： 入力フィールドにグラデーション CSS コードを貼り付けます。 

ステップ8： 詳しくはこちら Save.

結果はテーマエディタのプレビューで確認できます。この方法は、ヘッダー、バナー、さらにはセクション全体にも有効です。.

GemPagesでCSSグラデーション背景を追加する方法

GemPagesは、静的な色、グラデーション、画像などの背景カスタマイズをネイティブでサポートしています。しかし、より細かい制御をしたい場合は、 カスタムCSS、方法は次のとおりです。

ステップ1：右クリック グラデーションを適用するセクションに。

ステップ2： 選択する カスタムコード コンテキストメニューから選択します。

ステップ3： 表示されるCSSモーダルに、カスタムCSSコードを入力します。例:

.gdXweR3hSd {

  背景: linear-gradient(135deg, #f6d365, #fda085) !重要;

}

説明：

.gdXweR3hSd

• これは CSSクラスセレクター.
• これは、ページ上のクラス名を持つすべての要素を対象とします .gdXweR3hSd

背景: 線形グラデーション(135度, #f6d365, #fda085);

• この行は、 グラデーション背景 選択したセクションに。

さらに詳しく見てみましょう:

• 背景: 要素の背景を設定するために使用される CSS プロパティです。
• 線形勾配(…) は、 色の間のスムーズな移行.
• 135deg: これは、グラデーションが斜めに流れることを意味します。 左上隅から右下隅まで.
  • この値を他の角度に変更することもできます。 90deg （左から右へ） 180deg （上から下へ）など
    
• #f6d365： これは 開始色 勾配の。
• #fda085： これは 終了色 勾配の。

ステップ4： 詳しくはこちら Save.