カラムの背景に色をつけて、数字を強調したデザイン
 
大きめな文字サイズの数字背景を角丸にして、画像に重ねました。カラムごとの本文の文字数によるリンクボタンのズレを防ぐために、リンクデザイン内に記述を入れています。

吾輩は猫である

吾輩は猫である。名前はまだ無い。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
 

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

 


  • リード、小見出し、本文の色はCSS(DRESS版はDRESS)で設定しています。
  • 「READ MORE」の上にからの改行がいくつか入っています。BiNDupの挙動として複数の改行がないと縦位置合わせが機能しないため数行の改行を入れてありますが、本文と「READ MORE」がひっついてしまうようでしたら更に改行を増やしてみてください。
  • カラムに対して背景色、内余白、角丸などの設定をしています。
  • 画像はCSSで角丸(上のみ)処理されますので、通常の横長写真で配置して大丈夫です。

Tablet View

SP View