悩む人サイト型トップページでページをスクロールしている途中に背景画像が固定されているサイトを見かけるんだけど設定方法を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 背景画像をスクロール時に固定して表示させる方法
是非、最後までご覧ください。
本記事の内容
【SWELL】背景画像をスクロール時に固定して表示させる方法
まずは完成型をご覧ください。
固定背景
パララックス効果をつける
「パララックス効果をつける」とどうなるのか：スクロールに合わせて背景画像が動きます。
ここから先の解説では今回の記事用に用意したサイト型トップページを使用しています。
※ 下記記事から「サイト型トップページ」の作り方が方法が分かります。
あわせて読みたい
【SWELL】記事一覧を固定ページで作成【カスタム投稿にも対応】
SWELLで記事一覧を固定ページで作成する方法を知りたいですか？本記事では、デフォルト投稿タイプで記事一覧を固定ページで作成する方法からカスタム投稿タイプで記事一覧を固定ページで作成する方法まで解説しています。SWELLで記事一覧を固定ページで作成する方法を知りたい方は是非ご覧ください。
SWELLブロックのフルワイドを用いて背景画像をスクロール時に固定して表示させる
新着記事または人気記事のフルワイドをクリックします。
「オプション」＞「後に追加」を選択します。
新着記事の下に「段落」が追加されました。
段落をクリックして、「ブロック挿入ツールを切り替え」＞「SWELLブロック」＞「フルワイド」を選択します。
フルワイドが挿入されました。
見出しをクリックして、「オプション」＞「削除」で見出しを削除します。
見出しが削除されました。
フルワイドをクリックして、「設定」＞「ブロック」＞「背景画像の設定」＞「メディアから選択」から画像を挿入します。
フルワイドをクリックして、「設定」＞「ブロック」＞「背景画像の設定」を選択します。
- 背景効果から「固定背景」or「パララックス効果をつける」を有効化します。 ※下記画像では「固定背景」を有効化しています。
プレビュー画面で確認
背景画像にもっと高さがほしい場合は「スペーサー」を使用します。
段落をクリックして、「ブロック挿入ツールを切り替え」＞「ブロック」＞「デザイン」＞「スペーサー」を選択します。
スペーサーが挿入されました。
スペーサーをクリックして、「設定」＞「ブロック」＞「設定」を選択します。
- 高さ：「200px」にします。
プレビュー画面で確認
背景画像の縦幅が高くなりました。
今回は以上です。