Tablet View

features_002

features_002a

features_002b
SP View

features_002

features_002a

features_002b
パソコンは4カラム、スマホでは2カラムの基本的な設定
サムネイル画像と見出しのみの一覧表示。カラムはwidth設定はなしの4分割。スマホレイアウトでは2列表示で、カラムのpaddingに上下余白を設定。
画像は、サイズ:幅640px、BulkResizeの画質85で処理したものを配置しています。
ブロックデザインを「アルバム」にしています。文字が中央揃えになります。
ブロックデザインを「アルバム」にして、文字表記をコメントに入力することでマウスオーバー時に表示されます。
スマホではマウスオーバーがないためコメントが表示されないため、スマホ時のみ画像下に文字で表示されるようにCSSで設定しています。また、ブロックへ適用されるDRESSで画像コメントに対する文字サイズ・文字色、太さを設定しています。
吾輩は犬である
吾輩は犬である
吾輩は猫である
吾輩は猫である
吾輩も猫である
吾輩も猫である
吾輩も犬である
吾輩も犬である