HOME > PRESS > PRESS1 > PRESS1_003

PRESS1

press1_003



[%new:New%]

[%title%]

[%article_data_notime_dot%]
[%lead%]


press1_003a



[%new:New%]

[%title%]

[%article_data_notime_dot%]
[%lead%]


Default


[%title%]

[%new:New%] [%article_data_notime_dot%]

[%lead%]



一覧に表示したい文字数が多く001では可動性が悪い時におすすめ

BiND Pressで一覧に文字を表示させたいとき、本文の頭から文字数を指定するなどができません。一覧にちょっとした説明などを文章で表示したいときには、リードに記載して一覧にはリードを表示させる。という方法で対応することになると思います。
そのように一覧に文字情報をある程度表示させたいとき、文字数によっては横並びのレイアウト(001)は可読性が悪くなるというか、文字数の違いによってきれいに並ばなくなることが気になります。そのようなときにはこのレイアウトがおすすめです。
 
サムネイル画像のサイズを2:1のワイドな画像としたブロックデザインで、投稿タイトルとリードを表示する設定です。投稿タイトルとリード文の文字数によって改行されたり、サムネイル画像の下端を超えて文字(リード)が表示されるなどの状態を参考としてみてください。
このブロックデザインでは右にFacebookのPagePluginを表示させる設定にしていますが、ブロックレイアウトをプレーンの1段にして、PagePlugin(分割のマークも)を削除してもレイアウトは保たれます。
 

press1_003a

サムネイル画像をもう少し大きく表示したい時には幅いっぱいにする方がスッキリします。このブロックデザインではCSSで画像に対してfloat設定とwidth設定をしています。
パソコンレイアウトでは画像の幅を300pxにしてfloat:left、スマホでは幅を100%にしてfloat:none;にしています。