HOME > PRESS > PRESS1 > PRESS1_001

PRESS1

press1_001

[%new:New%] 

[%article_date_notime_dot%]

[%title%]

press1_001a

[%new:New%] 

[%article_date_notime_dot%]

[%title%]

press1_001b

[%new:New%] 

[%article_date_notime_dot%]

[%title%]

Default

[%new:New%] [%article_date_notime_dot%]

[%title%]

[%lead%]

[%category%]

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

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

press1_001a

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

press1_001b

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