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

当ページのリンクには広告が含まれています。
初心者ブロガー

サイト型トップページでページをスクロールしている途中に背景画像が固定されているサイトを見かけるんだけど設定方法を教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • 背景画像をスクロール時に固定して表示させる方法
本記事の内容

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

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

固定背景

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

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

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

合わせて読みたい記事

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

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

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

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

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

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

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

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

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

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

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

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

  • 背景効果から「固定背景」or「パララックス効果をつける」を有効化します。 ※下記画像では「固定背景」を有効化しています。

プレビュー画面で確認

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

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

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

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

  • 高さ:「200px」にします。

プレビュー画面で確認

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

以上で解説を終わります。

本記事が読者の疑問を解決する役に立つと幸いです。

また、今回の記事を参考にしつつ色々と触ってみることで実装の幅を増やして頂ければと思います。

最後まで読んで頂きありがとうございました。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容