ホームページは自分のお城　ポルカドット

　

サービス一覧

ギャラリー

ブログ

自分メモ：背景画像を固定する

—

by

ぽるか
in ,

WordPressで、背景画像を固定して、画面をスクロールしたときに文字だけ動く方法を教えてもらえますか

ChatGPT:

もちろんです！😊
WordPressで「背景画像を固定して、スクロールしても文字（コンテンツ）だけ動く」ようにする方法はいくつかあります。
以下では、カスタマイズ画面で簡単にできる方法と、CSSを使う方法の両方を紹介します。

🧭 目的

スクロールしても背景は動かず、上に重なるテキストやコンテンツだけがスクロールするようにします。

✅ 方法①：CSSで設定する（おすすめ）

  1. WordPress管理画面にログイン
  2. 「外観」→「カスタマイズ」→「追加CSS」を開きます。
  3. 以下のCSSを貼り付けます：
body {
  background-image: url("背景画像のURL");
  background-attachment: fixed; /* 背景を固定 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* 画面いっぱいに調整 */
}
  1. 「公開」ボタンを押して保存。

これで、スクロールしても背景が固定され、文字だけが動くようになります✨

✅ 方法②：特定のセクションだけ固定背景にしたい場合

もしトップページのヒーローセクション（最初の見出し部分など）だけ固定したい場合：

.hero-section {
  background-image: url("背景画像のURL");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: #fff; /* テキストを見やすく */
  padding: 100px 20px;
}

※ .hero-section の部分は、あなたのテーマで使っているクラス名に置き換えてください。

⚠️ 注意点（スマホ対応）

スマホ（特にiPhoneのSafari）では、background-attachment: fixed; が効かない場合があります。
その場合は代替として、擬似的な固定背景を使う方法があります。

代替CSS（モバイル対応の方法）

.fixed-bg {
  background: url("背景画像のURL") center center / cover no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 背景を後ろに */
}

そしてHTML側（WordPressのHTMLブロックなど）で：

<div class="fixed-bg"></div>
<div class="content">
  <h1>タイトル</h1>
  <p>このテキストだけスクロールします。</p>
</div>

これでスマホでも背景が固定され、テキストだけ動きます📱

🪄 まとめ

目的方法備考
サイト全体で背景を固定body にCSSを追加一番簡単
特定のセクションだけ固定.hero-section にCSSデザイン性アップ
スマホ対応したい擬似固定背景を使うSafari対策

もしあなたが使っているテーマ名（例：Cocoon、SWELL、Lightningなど）を教えてもらえれば、
そのテーマに合わせた具体的な手順もご案内できます。

テーマ名を教えてもらえますか？

WordPressのブロックエディターでも可能でしょうか？

Twenty Twenty-Fourです

とても良い質問です！✨
はい、WordPressのブロックエディター（Gutenberg）でも背景画像を固定して、文字だけ動かすことは可能です。
ただし、少しコツが必要です。テーマやブロックの種類によっては「固定」オプションが直接出ない場合もあるので、
以下の方法で対応できます。

✅ 方法①：ブロックエディターの「カバー」ブロックで設定（簡単）

ブロックエディターには「カバーブロック（Cover block）」という便利なブロックがあります。
これを使うと、背景画像を固定してテキストを上に重ねられます。

🔧 手順

  1. 投稿または固定ページを編集画面で開く
  2. ＋ボタン → 「カバー」ブロックを追加
  3. 背景にしたい画像をアップロードまたは選択
  4. 右側の設定パネルで：
    • 「固定背景」または「背景を固定（Fixed Background）」をONにする
      （テーマによっては「背景をスクロールに合わせる」などの表現もあります）
  5. その上にテキストブロックや見出しを追加

✅ これで、背景はスクロールしても固定され、テキストだけが動きます。

⚠️ 注意点：テーマによって「固定背景」設定が出ない場合

一部のテーマ（例：CocoonやSWELLなど）では、
ブロックエディターのUIに「背景固定」オプションが表示されないことがあります。

その場合は次の方法を使います 👇

✅ 方法②：追加CSSで「カバーブロック」を固定背景にする

  1. カバーブロックを選択
  2. 右側の「ブロック設定」→「詳細設定」→「追加CSSクラス」に fixed-bg と入力
  3. 「外観」→「カスタマイズ」→「追加CSS」に以下を追加：
.fixed-bg {
  background-attachment: fixed !important;
  background-position: center center;
  background-size: cover;
}

これでそのブロックだけ背景固定になります。
（複数のカバーブロックがあっても、固定したいものだけに fixed-bg クラスを付ければOK）

✅ 方法③：スマホ対応（iPhone対策）

background-attachment: fixed; はiOS Safariで効かないため、
スマホでも同じ効果を出したい場合は擬似的な固定背景を使う方法もあります。

代替コード（ブロックのHTMLに埋め込む）

<div class="fixed-bg"></div>
<div class="content">
  <h2>固定背景の上にテキスト</h2>
  <p>スクロールしても背景は動かないように見えます。</p>
</div>

CSSは同じように追加します：

.fixed-bg {
  background: url("背景画像URL") center center / cover no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.content {
  position: relative;
  z-index: 1;
}

これならスマホでも確実に固定背景っぽく動きます📱

🪄 まとめ

方法操作場所特徴
カバーブロックの「固定背景」設定ブロックエディターのみ簡単・コード不要
CSSで .fixed-bg クラス追加カスタマイズ → 追加CSS柔軟・細かく調整可
擬似固定背景（HTML＋CSS）高度な方法モバイル完全対応

もしあなたが使っているテーマ名（例：SWELL、Cocoon、Twenty Twenty-Fourなど）を教えてもらえれば、
そのテーマのブロックエディターで最適なやり方（実際のボタン名など）も具体的に説明できます。

👉 よければ、使っているテーマ名を教えてもらえますか？

あなた:

Twenty Twenty-Fourです

ChatGPT:

完璧です！🙌
WordPress公式テーマの 「Twenty Twenty-Four」 は、フルサイト編集（FSE）対応テーマ なので、
ブロックエディター（Gutenberg）だけで「背景固定＆文字だけスクロール」を簡単に実現できます。

以下に 手軽な方法（ブロック操作だけ） と カスタムCSSでより柔軟にする方法 の2通りを紹介します。

✅ 方法①：ブロックエディターで「カバー」ブロックを使う（最も簡単）

🔧 手順

  1. 固定ページ または 投稿ページ の編集画面を開く
  2. 「＋」→ カバー ブロックを追加
  3. 背景にしたい画像を選択（またはアップロード）
  4. 右サイドバーの「ブロック設定」で以下を設定：
    • ✅ 「固定背景（Fixed Background）」をオンにする
      （※ 英語表記の場合は「Fixed background」）
    • 「配置」→「全幅」や「幅広」など、レイアウトに合わせて調整
    • 「背景の不透明度」や「オーバーレイカラー」もここで変更可能
  5. カバー内に「見出し」や「段落」ブロックを追加してテキストを配置

💡 結果

  • スクロールしても 背景画像は固定されたまま
  • テキストだけが上をスクロールして動く ようになります

✅ 方法②：CSSを使ってより自由にコントロール

Twenty Twenty-Fourでは、ブロックに「追加CSSクラス」を付けてスタイルを上書きできます。

手順：

  1. カバー（Cover）ブロックを選択
  2. 右のサイドバー → 「詳細設定」→ 「追加CSSクラス」に fixed-bg と入力
  3. 「外観」→「カスタマイズ」→「追加CSS」に以下を追加：
.fixed-bg {
  background-attachment: fixed !important;
  background-position: center center;
  background-size: cover;
}

✅ 効果：

これでそのカバーだけが固定背景になります。
複数のカバーのうち、固定したいものだけにこのクラスを付けられます。

⚠️ スマホ（iPhoneなど）で固定されない場合

Safari（iOS）では background-attachment: fixed; が効かないため、
もしスマホでも同様の見え方にしたい場合は、擬似的に固定背景を作る方法を使います。

例：

<div class="fixed-bg"></div>
<div class="content">
  <h2>背景固定のテキスト</h2>
  <p>スクロールしても文字だけが動きます。</p>
</div>

追加CSS：

.fixed-bg {
  background: url("背景画像URL") center center / cover no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.content {
  position: relative;
  z-index: 1;
  color: #fff;
}

🔸 この方法はモバイルでも確実に動作します。

🎨 補足：Twenty Twenty-Fourのブロックスタイル調整ポイント

  • カバー内のテキストが読みにくい場合は、
    オーバーレイカラーを「黒 50%」などに設定すると視認性が良くなります。
  • カバーをセクション区切りとして使うと、
    パララックス風の「動く背景・動かない背景」構成も簡単にできます。

✅ まとめ

方法特徴難易度
カバーブロックの「固定背景」ONコード不要・テーマ対応済み⭐（簡単）
CSSで .fixed-bg クラス追加柔軟・複数背景制御も可⭐⭐
擬似固定背景（HTML＋CSS）モバイル完全対応⭐⭐⭐

もし希望があれば、

🔸「トップページの最初のカバーだけ背景固定にしたい」
🔸「スクロールで背景が切り替わるパララックス風にしたい」

といった実装パターンも、Twenty Twenty-Four向けにコード付きで解説できます。
どちらのパターンを試してみたいですか？

北海道の〇〇業界も発展を見守り50年