appeal_013

01

Lorem ipsum five stars

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

appeal_013a

02

Lorem ipsum five stars

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

縦横写真と見出しのインデックスに使えそうな変化あるレイアウト

 
見出しと写真数枚の組み合わせで変化ある印象のレイアウト。写真をあえて縦長・横長の組み合わせとして、縦長写真を見出しのある上側にずらしています。
縦長写真を左、横長写真を右としたレイアウトで、横長写真側の上に見出しをレイアウトし、若干縦長写真に重なるように設定しています。
 
見出し部はスマホでは中央寄せとなり、数字は単独で一番上に表示される設定です。また、スマホでの写真の表示も幅いっぱいにせず、左右に分かれるようなレイアウトとしています。
 

appeal_013a

縦長写真を右、横長写真を左となるように位置を逆にしたバリエーション。013と交互になるように使うことで、変化のある印象となります。