Thumbnails(サムネイル)

外枠付きのサムネイル表示を行います。
また、説明文やボタンをセットで表示するカスタム表示もあるので、商品メニューのようなコンテンツも作成できます。

サンプル01-サムネイル表示

コーディング

 枠付きでサムネイル表示を行います
  03行目
   サムネイル表示する画像ファイルのリンクに.thumbnailを指定します
   マウスオーバーするとフォーカス表示されます

サンプル02-カスタム表示

Thumbnail label

サムネイルカスタム表示です ヘッダ・説明文・ボタンなどをセットで表示することができます

Button Button

Thumbnail label

外枠は表示するコンテンツの高さに自動的に調整されます

Button Button

コーディング

 枠内に画像・タイトル・説明文・ボタン等を表示します
  03-15行目
   カスタム表示するコンテンツを.thumbnailで囲みます
  05-14行目
   画像以外のコンテンツ(タイトル・説明文・ボタン等)を.captionで囲みます

サンプル03-メモや注意点

メモや注意点

 ・.thumbnailで表示される画像は自動的に縮小されますが、これはサムネイルを表示する領域の横幅を基準に縮小されます
  また外枠は表示される領域の内側に決まった余白で描画されています
  なのでサムネイルを表示する領域が元画像の横幅より大きい場合、上記1つ目のサムネイルのように枠と画像が不自然に表示されてしまいます
  外枠の仕様なので間違いではありませんが見栄えがよくありません
  横幅を指定できる.row.col-xxを使用して、綺麗に見れるように配置してください

 ・外枠をフォーカス表示したくない場合には、<a>ではなく<span><div>を使用してください
  上記2つ目のサムネイルには<span>を使用しているのでフォーカスが表示されません