ページの背景を変更する

ページの背景を変更する理由

場合によっては、デザイン目標に合わせてページ全体の背景色を変更したい場合があります。 

たとえば、テーマでデフォルトの白い背景を使用している場合は、ブランドイメージに合った大胆でモダンな外観にするために、背景を黒に切り替えることができます。

GemPages でページの背景を変更するにはどうすればいいですか?

GemPagesは現在、背景を変更するための直接的な設定を提供していないため、以下の手順に従って使用する必要があります。 カスタムコード:

ステップ1: カスタムコード要素を追加する

• GemPages で編集したいページを開きます。
• ドラッグアンドドロップ カスタムコード ページに要素を追加します。

• 要素をクリックして設定を開きます。
• 左側のサイドバーから「追加...」ボタンをクリック カスタムコード のセクションから無料でダウンロードできます。

ステップ2: コードを挿入してカスタマイズする

現在、コード エディター パネルにいます。

• まず CSSをクリックし、次のコードをボックスに貼り付けます。

body {

     background: #3355ff !important;    

}

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

• 交換する #3355ff  お好みの16進カラーコードで.

例えば、： つかいます #000000 黒の場合、 #ffffff 白の場合は 、またはデザイン設定に合わせて次のような 16 進コードを入力します。

#f5f5f5 ライトグレー（ニュートラル背景）

#ff6f61 暖色系のコーラル（エネルギッシュで注目を集める）

#1a1a1a ダークチャコール（モダンな外観）

#f9fafb ソフトなオフホワイト（クリーン＆ミニマル）

• ヒット Save ボタンをクリックして変更を保存します。

結果

これらの手順に従うことで、ページの背景色を簡単にカスタマイズし、ビジョンやブランドに合ったデザインを作成できます。

ページの背景色の変更に関するよくある質問

1. コードを追加しても背景色が変わらないのはなぜですか?

コードが カスタムコード要素 そしてあなたが選択した CSS エディタで。また、16進コードが正しいことを確認してください（例： #000000 黒の場合）。

2. 色の代わりに画像を背景として使用できますか?

はい。CSSを次のように置き換えてください。

body {

   background-image: url("YOUR_IMAGE_LINK_HERE") !important;

   background-size: cover;

   background-repeat: no-repeat;

}

画像の URL にアクセスできることを確認してください。

3. ページの背景を変更すると、XNUMX ページだけに影響しますか、それともすべてのページに影響しますか?

背景の変更は、カスタムコード要素を追加したページにのみ適用されます。他のページは変更されません。

4. ページから背景色を削除するにはどうすればよいですか?

本文 { 背景: 透明 !important; }