【SWELL】メインビジュアル画像を固定する

2025年2月8日2025年2月17日

当サイトでも使用しているWordPressテーマ「SWELL」の便利な機能のメインビジュアル画像設定の下にスクロールしても固定する設定方法です。

メインビジュアルの設定

外観＞カスタマイズ＞トップページ＞メインビジュアル＞メインビジュアルの高さ設定＞ウィンドウサイズにフィットさせる

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加。

/* メインビジュアル領域を固定 */
.p-mainVisual .p-mainVisual__imgLayer, /* メインビジュアル画像・動画 */
.p-mainVisual .c-filterLayer::before, .p-mainVisual .c-filterLayer::after, /* メインビジュアルフィルタ */
.p-mainVisual .swiper-wrapper /* スライド領域 */
{
	position: fixed;
}

/* デフォルトの余白を削除 */
.top #content {
	 padding-top: 0em; 
}
.l-content {
	 margin: 0 auto;
}

以上でメインビジュアル画像を固定する設定となります。