小見出しをCSSで画像に重ね、箇条書きにはFont Awesomeによるアイコンを付けています

 
3つの特徴をそれぞれ箇条書きで表したい時に使えそうなブロック。
トップページの目立つ場所ではBiNDで普通のリストにするとシンプルな黒丸で地味な印象になりがちなので、ブロック内にFont Awesomeのstyleを入れてあります。

あのイーハトーヴォのすきとおった風

百人一首

秋の田のかりほの庵の
春すぎて夏来にけらし
あしびきの山鳥の尾の

百人一首

秋の田のかりほの庵の
春すぎて夏来にけらし
あしびきの山鳥の尾の

百人一首

秋の田のかりほの庵の
春すぎて夏来にけらし
あしびきの山鳥の尾の

features_011a

箇条書きに改行が入る文字数に対応するため、リスト:記号で設定したバリエーション

あのイーハトーヴォのすきとおった風

百人一首

  • 秋の田のかりほの庵の秋の田のかりほの庵の
  • 春すぎて夏来にけらし
  • あしびきの山鳥の尾の

百人一首

  • 秋の田のかりほの庵の
  • 春すぎて夏来にけらし
  • あしびきの山鳥の尾の

百人一首

  • 秋の田のかりほの庵の
  • 春すぎて夏来にけらし春すぎて夏来にけらし
  • あしびきの山鳥の尾の


  • グラデーションの背景に背景を透明にした人物画像をSiGNで重ねていますので、グラデーションの色変更はもちろん、画像の差し替えもSiGNで可能です。
  • 箇条書き項目で改行が生じるときにはfeatures_011a(リスト)の使用がオススメです。
  • タブレットの時は、パソコンレイアウトのまま(横に3つ並ぶ)なので、1カラムあたりの幅が小さくなり改行ができやすくなりますので注意が必要です。

Tablet View


features_011
 

features_011a

SP View


features_011
 

features_011a