パソコンは4カラム、スマホでは2カラムの基本的な設定

 
サムネイル画像と見出しのみの一覧表示。カラムはwidth設定はなしの4分割。スマホレイアウトでは2列表示で、カラムのpaddingに上下余白を設定。
画像は、サイズ:幅640px、BulkResizeの画質85で処理したものを配置しています。

吾輩は犬である

吾輩は猫である

吾輩は猫である

吾輩は犬である

features_002a

ブロックデザインを「アルバム」にしています。文字が中央揃えになります。

features_002b

ブロックデザインを「アルバム」にして、文字表記をコメントに入力することでマウスオーバー時に表示されます。
スマホではマウスオーバーがないためコメントが表示されないため、スマホ時のみ画像下に文字で表示されるようにCSSで設定しています。また、ブロックへ適用されるDRESSで画像コメントに対する文字サイズ・文字色、太さを設定しています。

吾輩は犬である

吾輩は犬である

吾輩は猫である

吾輩は猫である

吾輩も猫である

吾輩も猫である

吾輩も犬である

吾輩も犬である


  • 本文、小見出しのサイズ・色は指定していません。サイト全体のDRESSでの設定が反映されますが、任意に指定したいときにはfeatures_002のCSSに指定してください。
  • 画像の下に余白(margin-bottom)を設定し、見出しとの間に余白を設定しています。
  • スマホではカラムに対して余白(padding)を設定し、下に並ぶカラム間の間が開くようにしています。
  • 画像は幅640pxの画像を配置しています。
  • スマホで横2列並びとしています。写真下の見出しが短めの時にオススメ。

Tablet View


features_002
 

features_002a
 

features_002b

SP View


features_002
 

features_002a
 

features_002b