e工房フジサキWP制作代行

WP維持更新制作代行

開発実績一覧紹介

カテゴリー: フルワイド

フルワイド・ブロックで背景色付きの見出し設定とは?

フルワイド・ブロックで背景色付きの見出し設定とは?

フルワイド・ブロックを使用した見出し設定には、通常は背景画像を使うケースが主流ですが、画像ではなくて背景色を使う場合もあると思います。今回は、見出し設定に単なる背景色を使った事例を紹介します。
尚、背景画像を使う場合に、背景固定というオプションを良く使いますが、背景画像でなくて背景色設定の場合は、背景固定というオプションは機能しませんので要注意です。

SWELLのフルワイド・ブロック VS カバー・ブロック

SWELLのフルワイド・ブロック VS カバー・ブロック

SWELLで作成したフルワイドの実装例

Lighthouseで作成したカバーブロックの実装例

上記の2ツのサイトの共通点は、背景固定画像を所どころに配した一見するとLPページにも見える今流行りのWordPressページになっていると思います。ただ違うところは実装しているWPテーマだけです。

左側のページは、SWELLで作成した「藤心Online SWELL道場」(即ち当サイト)のトップページです。
右側のページは、サイト全体をElementorで作成した「WP試作見本サイト」の中で、唯一Elementorを使用せずGutenbergで作成したページとなっているところです。

SWELLでのトップページでは、フルワイド・ブロックで背景固定画像を実装し、Gutenbergページでは、カバー・ブロックで同じような機能を実装していることになります。