PRESS 2_001

横長のサムネイル設定でシンプルにきれいに並べるレイアウト

 
BiND Pressでは、画像に指定したサムネイルはテンプレートで指定した縦横比で自動的にトリミングされます。
最近の傾向としてサムネイルを横長にする傾向があると思い、横長の画像を想定したレイアウトパターンです。ここに正方形のような異なる縦横比の画像を指定すると、自動的に高さを上下カットしてトリミングされます。
画像は、600px × 375px のjpgに設定しています。
 
投稿のタイトルが小見出しで、リード文が本文の設定がdefaultですが、小見出しのサイズを小さくしてリード文の表示は無しにしました。
シンプルに見出しだけを見てもらって詳細はクリックした各投稿のページで見ていただくという前提です。
 
最新の４件を表示する設定なので、スマホでは２段で綺麗に収まります。
 
 

press2_001a

もう少し大きく表示したい時は３段組みにすることになりますが、スマホでは１段になり大きくスペースを取ります。重要な新商品のお知らせなどであれば大きく表示される１段レイアウトも意味があるのですが、ちょっとしたお知らせとしての利用の場合には１段レイアウトで大きくスペースを使うサムネイルなどは一工夫ほしい印象です。
 

press2_001b

パソコンで見ていると上の001aと同じですが、スマホでの見え方を変更したパターンがこちら。画像を左に小さく表示して文字を右に回り込みさせるパターンです。