Tradeテーマの特定ページの背景を画像にしたい

日本語 ディスカッション 技術的なQ＆A

Topic summary

ユーザーがShopifyのTradeテーマで特定ページの背景を固定画像にしたいと質問しています。背景画像は固定され、テキストのみがスクロールする状態を希望しています。

提案された解決方法:

  • 対象ページのテンプレートファイル(例:page.contact.liquid)を確認
  • CSSファイル(theme.cssまたはstyle.css)に以下を追加:
    body.template-ページテンプレート名 {
  background: url('背景画像のURL') no-repeat center center fixed;
  background-size: cover;
}
  • Shopify管理画面の「設定」>「ファイル」から背景画像をアップロードし、URLを取得

現在の状況:
ユーザーは提案された方法を試したものの、うまく再現できず、コラボレーターとしての直接的な支援を依頼しています。問題は未解決のまま継続中です。

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

特定のページの背景を、こちらで指定した画像にしたいです。

背景画像は固定され、ページ内のテキストのみがスクロール出来る状態が理想です。

テーマはTradeを使用しています。

コード編集等、詳しくはありませんので、サンプルや貼り付け位置を添えて教えていただけば幸いです。

1 Like
2

質問拝見しました。

以下やり方をご参考にしていただけますと幸いです。

特定ページのみに背景を固定するための手順1. 対象ページのテンプレートを確認

  • Shopify管理画面で「オンラインストア」>「テーマ」>「アクション」>「コードを編集する」を開きます。
  • 左側のファイルリストで、「templates」フォルダを探し、対象ページのテンプレートファイル（例：page.contact.liquid や page.custom.liquid）を確認します。

  1. CSSに特定ページ用のスタイルを追加

    • 「assets」フォルダ内のtheme.css（またはstyle.css）を開きます。

    • 以下のコードを追加します：

/* 特定ページの背景固定設定 */
body.template-ページテンプレート名 {
  background: url('背景画像のURL') no-repeat center center fixed;
  background-size: cover;
}

  • template-ページテンプレート名 を対象ページのテンプレート名に置き換えます（例：template-page.contact など）。

  • 「背景画像のURL」には、アップロードした画像のリンクを貼り付けます。

  • 画像のアップロード

    • Shopify管理画面で「設定」>「ファイル」に移動し、背景画像をアップロードします。
    • 画像リンクをコピーして上記のコードに貼り付けます。

以上で特定のページにきかせられるかと思いますのでご参考にしてください。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

3

上記実行したつもりでしたが、上手く再現されませんでした。

コラボレーターとしてお手伝いいただくことは可能でしょうか？