appeal_001

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

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

Lorem ipsum

いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

CONCEPT

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

Lorem ipsum

いまこの暗い巨きな石の建物の
なかで考えていると、
みんなむかし風の
なつかしい青い幻燈のように思われます。

CONCEPT

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

Lorem ipsum

いまこの暗い巨きな石の建物のなかで考えていると、
みんなむかし風のなつかしい青い幻燈のように思われます。

CONCEPT

パソコンでは中央揃えで、スマホでは左寄せとし、スマホでは改行をなしにして連続した文章となるようにCSSでコントロールしています。（appeal_001、appeal_001b）
パソコン・スマホいずれも中央揃えとし、スマホの時に不自然な位置で改行されないようにCSSでコントロールしています。（appeal_001a）
背景画像は通常の画像を指定すると、カラム１に対して設定してある半透明の黒と重なりトーンを暗くした画像になるように設定してあります。（appeal_001）