SWELL│メインビジュアルを固定表示する方法

2025.04.17

メインビジュアルをただ静止画やスライドを表示するだけだとつまらないですよね。

CSSで固定表示するとちょっと見え方が面白くなるので、その備忘録です。

SWELLのメインビジュアルを固定表示する方法

やり方は簡単です。

まずメインビジュアルを静止画でもスライド画像でもいいので設定しておきましょう。

ちなみにテキストやブログパーツなどは固定化しないようになるので、画像だけ固定表示になります。

あとはコンテンツ部分ですが、デフォルトだと背景が透明なので、スクロールしたときにメインビジュアルが透けて表示されることがあります。ですのでフルワイドなどブロックを敷いて上げるとよいです。

下記のCSSを入れましょう。

カスタマイズによりますがヘッダーの高さ分余白をいれてあげると良いです。

/* メインビジュアルの固定背景 */
.p-mainVisual__imgLayer {
  position: fixed;
  width: 100%;
  overflow: hidden;
  padding-top: 72px; /* ヘッダーの高さ*/
}

以上です。

最後に確認しましょう。

WAZAの有料記事のサブスクリプションも開始しました。

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。