メインビジュアルを背景に固定して表示する – SWELLカスタマイズ

2022年2月28日

以前こちらのデモページをご紹介した際に、「背景画像を固定するにはどうしたらいいですか？」と何件かお問い合わせいただきました。

写真やイラストを背景に固定することで、ブログデザインではあまりみかけないので、他とは変わった印象を与えられます。コンテンツの少ないブログやポートフォリオサイトなどに向いてるかもしれませんね。

ということで、今回はこのデモページに実装したカスタマイズ内容と、他のバリエーションも合わせてご紹介します。

あらすじ

トップページの背景にメインビジュアルを固定して表示

以下のサンプルでは、独自の画像は指定せずにSWELL標準のランダム画像を使用して、表示するたびに違う画像を表示しています。

好みの写真がでるまでリロードしてます ^^;

※好みの画像が表示されるまでリロードしています

カスタマイズの大まかな内容としては、

「メインビジュアルの高さ設定」を「ウインドウサイズにフィットさせる」に設定。
CSSでメインビジュアルを固定し、画面上部にヘッダー、画面下部にフッターをそれぞれ固定。

また、このサンプルでは特定のジャンル（女の子の写真）をランダムで取得するようカスタマイズもしています。
詳しくは以下の記事でご紹介しています。

背景画像を固定する方法

背景画像を固定する方法としては、SWELL標準機能とあわせるといくつかの方法があります。

背景画像を固定するパターン

SWELL標準のランダム画像を固定

スライド画像（1枚）を固定

スライド画像（複数枚）を固定（スライドショー表示）

動画を固定

スライド画像とフルワイドブロックの背景画像を固定

ざっとあげるとこれくらいでしょうか。あと、カバーブロックに動画を設定してそれを固定したりすることもできそうです。

ちなみに、例ではトップページの構成はこうなっています。

メインビジュアルの下に、2つのフルワイドブロックを積み上げています。
フルワイドブロックは、「コンテンツサイズ」を「記事」に設定しています。

① SWELL標準のランダム画像を固定

まずは、先にご紹介した①を例に、固定表示するための基本的な設定からご説明します。

STEP

メインビジュアルの高さをウインドウサイズにフィットさせる

カスタマイザーの「トップページ＞メインビジュアル」より、「メインビジュアルの高さ設定」を「ウインドウサイズにフィットさせる」を選択

STEP

CSSでメインビジュアル領域を固定する

フルサイズにしたメインビジュアル領域を固定するCSSは以下の通りです。

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

これで、画像、動画、およびフィルタ処理の領域を固定します。

STEP

CSSでデフォルトの余白を削除

先ほどのキャプチャの赤色部分は、デフォルトで設定されている余白です。不要なのでCSSで削除します。

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

STEP

CSSでヘッダーとフッターを固定する

SWELLでは「ヘッダーの追従設定」で画面上部に追従するヘッダーを表示することができますが、今回は使用しません。

カスタマイザーの「ヘッダー＞■ヘッダーの追従設定」のチェックを外しておきます。

「■トップページでの特別設定＞ヘッダーの背景を透明にするかどうか」で、「する」を選択します。

以下のCSSでヘッダーを画面上部に、フッターを画面下部に固定します。

/* ヘッダーを固定 */
#header {
  position: fixed!important;
}
/* フッターを固定 */
.l-footer {
  position: fixed;
  z-index: 1;
  bottom: 0;
  width: 100%;
  background-color: transparent;
}

フッターは背景を透明にする設定がないので、background-color: transparent;で透明にしています。

STEP

フルワイドブロックの高さを調整

これまでの設定で基本設定は完了していますが、フルワイドブロックの「背景色」の「背景色の不透明度」を「0」にして確認すると、フルワイドブロックの余白が少なくて詰まった感じがします。

これだと、せっかくの背景画像がほぼ隠れてしまうので、フルワイドブロックの中身に関係なく、最低高さを多めに設定しておくといいカンジになります。ここはお好みでどうぞ。

/* フルワイドブロックの高さを調整 */
.swell-block-fullWide {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swell-block-fullWide:not(:last-child){
  min-height: 150vh;
}
.swell-block-fullWide__inner.l-article, .swell-block-fullWide__inner.l-container {
  width: 100%;
}

上記では、最後ではない :not(:last-child) フルワイドブロックの最小高さを min-height: 150vh; に設定し、display: flex;で子要素を上下左右中心に配置しています。

調整前

調整後

スクロール量は増えますが、余白を十分にとった方が映えますよね。

STEP

完成

ここまでのCSSを固定ページの「カスタムCSS＆JS＞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;
}
/* ヘッダーを固定 */
#header {
  position: fixed!important;
}
/* フッターを固定 */
.l-footer {
  position: fixed;
  z-index: 1;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,.0);
}
/* フルワイドブロックの高さを調整 ※不要なら以下削除 */
.swell-block-fullWide {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swell-block-fullWide:not(:last-child){
  min-height: 150vh;
}
.swell-block-fullWide__inner.l-article, .swell-block-fullWide__inner.l-container {
  width: 100%;
}

基本的な設定は以上です。ここからは、メインビジュアルに独自の画像を使ったカスタマイズをご紹介します。

なお、以下のデモではブログパーツを使って、メインビジュアルの中心にロゴ画像を置いてフェードインしています。
ブログパーツの使い方については、また別の機会にご説明できればと。