SWELLのメインビジュアルの画像を固定し、本文がその前をスクロールする表現を試した記録です。
掲載CSSは旧環境で試した最小例です。
ヘッダー、高さ、重なり順、祖先要素のCSSに依存するため、そのまま使える完成設定としては扱わず、検証用ページで調整してください。
SWELLのメインビジュアルを固定表示する方法
まず静止画1枚で試します。
スライダーや動画へ同じCSSを適用できるとは限りません。
事前準備
検証用ページで静止画1枚を設定し、変更前の追加CSSを保存しておきます。
スライダーはtransformを持つ祖先や切り替え処理の影響があるため、この最小例の対象から外します。
このセレクタは画像レイヤーを対象にし、テキストやブログパーツを直接固定しません。
ただし重なり順によっては文字・リンクを覆うことがあるため、表示とクリック操作を確認します。
本文側の背景が透明なら画像が透けます。
本文を覆う範囲に背景色を指定し、背景だけでなく重なり順も確認してください。
フルワイドブロックを置くだけで解決するとは限りません。
CSS
以下は旧例の記録です。
「外観 → カスタマイズ → 追加CSS」または子テーマのstyle.cssの一方で試します。
全ページへ影響させないよう、導入先ではbodyのpage-idなど実際の対象クラスで範囲を限定してください。
72pxは旧環境で指定した例示値です。
padding-topは画像レイヤーの内側の余白であり、画面上端からの固定位置を決めるtopとは役割が異なります。
テーマ側のtop/left/heightと合わせて計算済みスタイルを確認してください。
/* 旧環境の最小例。導入先の位置・高さ・適用範囲を別途調整 */
.p-mainVisual__imgLayer {
position: fixed;
width: 100%;
overflow: hidden;
padding-top: 72px; /* ヘッダーの高さ*/
}元に戻す場合は、本記事を参考に追加したCSSだけを削除し、キャッシュを更新します。
テーマ既存のtransformやoverflowを一括で削除するとスライダー等を壊すため、固定されない原因を確認せず解除しないでください。
PCとスマホで、スクロール時の固定位置、ヘッダー追従、画像の切れ方、本文の背景、文字とリンクの重なりを確認します。
管理バーの有無、画面回転、拡大、動きを減らす設定も確認対象です。
固定演出を無効にした通常表示も用意し、読みにくくなる場合は採用しません。
メインビジュアルの関連カスタマイズは複数のブログパーツを重ねる方法とスライダーを6枚以上表示する方法、一覧はSWELLカスタマイズまとめにあります。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにも過去のコードがあります。
今回の本文見直しとの同期は確認していません。
よくある質問：SWELLのメインビジュアルを固定表示する方法
SWELLのメインビジュアルを固定表示するには、どうしますか？
まず静止画1枚の検証用ページで試します。
掲載CSSは旧環境の最小例で、スライダーや動画への対応を示す完成コードではありません。
テキストやブログパーツも、固定されますか？
画像レイヤーだけを対象とします。
ただし重なり順次第で文字やリンクを覆う場合があるため、操作確認が必要です。
コンテンツ部分は、どうすればよいですか？
本文側の背景が透明なら画像が透けます。
背景色を指定する範囲と、画像より手前に表示する重なり順を確認します。
ヘッダーとの間に、余白は必要ですか？
72pxは例示値です。
内側余白のpadding-topと、固定位置を決めるtopを混同せず、ヘッダーの実寸や既存CSSを確認します。
固定が効かないときは、どうしますか？
記事では、祖先要素のCSSの指定を確認してください。
CSS仕様では、そのプロパティを持つ要素がその内側の固定要素の基準になるため、スライダーの構成によっては画面に固定されません。
固定できているかは、どう確認しますか？
PCとスマホのスクロール、重なり、リンク、拡大、管理バー有無を確認します。
過去のGIFと同じになるとは限りません。
確認の範囲を教えてください。
記事では、掲載CSSの記述内容とセレクタを確認しました（SWELL 2.19／WordPress 7.1時点の表記）。
実環境でのPC・スマホのスクロール時の固定挙動、スライダー使用時の見え方、ヘッダー追従設定との組み合わせは確認していません。
テーマの更新で表示が変わる可能性があるため、最新は公式で確認してください。
