appeal_001

背景に画像を指定し、タイトルとリードの組み合わせ

 
大見出しとリード、本文の組み合わせ。ブロック背景に画像を入れてブロックを目立たせる設定。見栄えのインパクトが大切なブロックなので、CSSでパソコンとスマホでの改行位置の調整をしています。

appeal_001a

スマホでも中央揃えで、スマホのみ改行のCSSで調整したパターン

appeal_001b

背景画像が濃い部分と薄い部分が混在するようなとき、可読性を確保するために文字を太くしたり大きめのサイズ指定などの注意が必要です。このブロックではさらにtext-shadowで文字の周囲に白い線をいれています。