【SWELL】背景画像をスクロール時に固定して表示させる方法

こういった悩みにお答えします。

是非、最後までご覧ください。

【SWELL】背景画像をスクロール時に固定して表示させる方法

まずは完成型をご覧ください。

固定背景

パララックス効果をつける

「パララックス効果をつける」とどうなるのか：スクロールに合わせて背景画像が動きます。

ここから先の解説では今回の記事用に用意したサイト型トップページを使用しています。

※下記記事から「サイト型トップページ」の作り方が方法が分かります。

あわせて読みたい

【SWELL】記事一覧を固定ページで作成【カスタム投稿にも対応】 SWELLで記事一覧を固定ページで作成する方法を知りたいですか？本記事では、デフォルト投稿タイプで記事一覧を固定ページで作成する方法からカスタム投稿タイプで記事一覧を固定ページで作成する方法まで解説しています。SWELLで記事一覧を固定ページで作成する方法を知りたい方は是非ご覧ください。

SWELLブロックのフルワイドを用いて背景画像をスクロール時に固定して表示させる

新着記事または人気記事のフルワイドをクリックします。

「オプション」＞「後に追加」を選択します。

新着記事の下に「段落」が追加されました。

段落をクリックして、「ブロック挿入ツールを切り替え」＞「SWELLブロック」＞「フルワイド」を選択します。

フルワイドが挿入されました。

見出しをクリックして、「オプション」＞「削除」で見出しを削除します。

見出しが削除されました。

フルワイドをクリックして、「設定」＞「ブロック」＞「背景画像の設定」＞「メディアから選択」から画像を挿入します。

フルワイドをクリックして、「設定」＞「ブロック」＞「背景画像の設定」を選択します。

プレビュー画面で確認

背景画像にもっと高さがほしい場合は「スペーサー」を使用します。

段落をクリックして、「ブロック挿入ツールを切り替え」＞「ブロック」＞「デザイン」＞「スペーサー」を選択します。

スペーサーが挿入されました。

スペーサーをクリックして、「設定」＞「ブロック」＞「設定」を選択します。

プレビュー画面で確認

背景画像の縦幅が高くなりました。

今回は以上です。