メインビジュアルをただ静止画やスライドを表示するだけだとつまらないですよね。
CSSで固定表示するとちょっと見え方が面白くなるので、その備忘録です。
SWELLのメインビジュアルを固定表示する方法
やり方は簡単です。
事前準備
まずメインビジュアルを静止画でもスライド画像でもいいので設定しておきましょう。
ちなみにテキストやブログパーツなどは固定化しないようになるので、画像だけ固定表示になります。
あとはコンテンツ部分ですが、デフォルトだと背景が透明なので、スクロールしたときにメインビジュアルが透けて表示されることがあります。ですのでフルワイドなどブロックを敷いて上げるとよいです。
CSS
下記のCSSを入れましょう。
カスタマイズによりますがヘッダーの高さ分余白をいれてあげると良いです。
/* メインビジュアルの固定背景 */
.p-mainVisual__imgLayer {
position: fixed;
width: 100%;
overflow: hidden;
padding-top: 72px; /* ヘッダーの高さ*/
}以上です。
最後に、PCとスマホ幅でトップページをスクロールして確認します。画像が止まったまま下のコンテンツが重なって流れれば成功です。ヘッダーの下で画像がずれる場合は padding-top をヘッダーの実寸に合わせます。見え方は冒頭のGIFと同じです。
メインビジュアルの関連カスタマイズは複数のブログパーツを重ねる方法とスライダーを6枚以上表示する方法、一覧はSWELLカスタマイズまとめにあります。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
よくある質問：SWELLのメインビジュアルを固定表示する方法
SWELLのメインビジュアルを固定表示するには、どうしますか？
記事では、まずメインビジュアルを静止画でもスライド画像でもよいので設定しておき、CSSを追加します。CSSで固定表示すると、スクロールしたときの見え方が変わります。
テキストやブログパーツも、固定されますか？
記事では、テキストやブログパーツなどは固定化しないようになるので、画像だけが固定表示になります。
コンテンツ部分は、どうすればよいですか？
記事では、コンテンツ部分はデフォルトだと背景が透明なので、スクロールしたときにメインビジュアルが透けて表示されることがあります。フルワイドなどのブロックを敷くとよいです。
ヘッダーとの間に、余白は必要ですか？
記事では、カスタマイズによりますが、ヘッダーの高さ分余白を入れるとよいです。ヘッダーの下で画像がずれる場合は、CSSの値をヘッダーの実寸に合わせます。
固定が効かないときは、どうしますか？
記事では、祖先要素のCSSの指定を確認してください。CSS仕様では、そのプロパティを持つ要素がその内側の固定要素の基準になるため、スライダーの構成によっては画面に固定されません。
固定できているかは、どう確認しますか？
記事では、PCとスマホ幅でトップページをスクロールして確認します。画像が止まったまま下のコンテンツが重なって流れれば成功です。見え方は冒頭のGIFと同じです。
確認の範囲を教えてください。
記事では、掲載CSSの記述内容とセレクタを確認しました（SWELL 2.19／WordPress 7.1時点の表記）。実環境でのPC・スマホのスクロール時の固定挙動、スライダー使用時の見え方、ヘッダー追従設定との組み合わせは確認していません。テーマの更新で表示が変わる可能性があるため、最新は公式で確認してください。
