HOME > PRESS2_001

PRESS 2_001

press2_001

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

[%title%]

press2_001a

サムネイルを大きめに表示したい時や、投稿タイトルの文字数が多くなるべく改行させたくないような時。

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

[%title%]

press2_001b

スマホ表示で画像を小さく左に表示し、文字情報を回り込みに設定

[%new:New%] 

[%article_date_notime_dot%]

[%title%]

Default

記事インデックス:フロート(3段)設定のデフォルト設定

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

[%title%]

[%article_short_40%]

 

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

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

press2_001a

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

press2_001b

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