カラム背景いっぱいに画像を入れて、もう一方のカラムに余白を設けて文字情報

 
ウィンドウ幅いっぱいに使った時のポピュラーなレイアウト。一方のカラムには背景に画像を指定し、見出しを載せます。もう一方のカラムにはゆとりある余白を設けて文字情報を入れるというパターン。
ブロックを繰り返す時、画像の位置が互い違いになるように、反転のバリエーションとセットになります。

文字のカラムは「ブロック内コンテンツの横幅」よりも広がらない設定があり、余白をたっぷりと設定したほうが雰囲気がいいですが、タブレットでの表示をある程度考慮すると、文字数との兼ね合いによる調整が必要になります。
カラムに対して指定する背景画像は、CSSでの指定となります。

ポラーノの広場

LOREM IPSUM

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
 
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

あのイーハトーヴォのすきとおった風

夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

ポラーノの広場

LOREM IPSUM


  • 目次ブロックを利用し、カラムの背景画像として写真を指定しています。CSSのカラム背景は他のデータにインポートした時などデータはからになっていますので、新たにカラム背景に表示する画像を指定する必要があります。
  • 文字が入るほうのカラムにはmax-widthを指定することでウィンドウ幅いっぱいに広がらないようにしています。ブロック内コンテンツの幅(もしくは、コンテンツ幅)の寸法の半分を目安とした数字に修正してください。
  • 画像の上に乗る文字は白で設定しています。トーンの暗い背景画像をご利用ください。明るいトーンの画像を利用するときには、CSSでタイトル、リードの文字色を濃い色に変更してください。

Tablet View

SP View