-
HTML素材①セミナーリスト
こちらのページでは複数のセミナーをリストにまとめるテンプレートをご紹介しております。
数パターンご用意いたしましたので、写真素材や紹介文のボリュームに合わせて、使いたいものを選んでコピー＆ペースト。
必要な部分を書き換えるだけで充実したページ内容となります。サンプルページ （詳細ページの最後に入れるだけで、ショッピングサイトのオススメ商品のように関連セミナーを表示することができます）
テキストのみ【表示サンプル】
関連のセミナーはこちら<!--[A]テキストのみ--> <div class="panel panel-default"> <div class="panel-heading">関連のセミナーはこちら</div> <ul class="panel-body list-group"> <li class="list-group-item col-xs-12"> <span class="btn btn-primary col-xs-12 col-md-1">★（１）日付★</span> <span class="col-xs-12 col-md-4" style="font-size:18px;"><strong>★（１）タイトル★</strong></span> <span>★（１）テキスト★<a href="★（１）詳細ページURL" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></span> </li> <li class="list-group-item col-xs-12"> <span class="btn btn-primary col-xs-12 col-md-1">★（２）日付★</span> <span class="col-xs-12 col-md-4" style="font-size:18px;"><strong>★（２）タイトル★</strong></span> <span>★（２）テキスト★<a href="★（２）詳細ページURL" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></span> </li> <li class="list-group-item col-xs-12"> <span class="btn btn-primary col-xs-12 col-md-1">★（３）日付★</span> <span class="col-xs-12 col-md-4" style="font-size:18px;"><strong>★（３）タイトル★</strong></span> <span>★（３）テキスト★<a href="★（３）詳細ページURL" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></span> </li> </ul></div>
サムネイルあり【表示サンプル】
関連のセミナーはこちら<!--[B]サムネイルあり--> <div class="panel panel-default"> <div class="panel-heading">関連のセミナーはこちら</div> <div class="panel-body"> <div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-4"><img src="★（１）画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★（１）タイトル★</strong></h3> <p>★（１）テキスト★</p> <div class="text-right"><a href="★（１）詳細ページURL" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-4"><img src="★（２）画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★（２）タイトル★</strong></h3> <p>★（２）テキスト★</p> <div class="text-right"><a href="★（２）詳細ページURL" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-4"><img src="★（３）画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★（３）タイトル★</strong></h3> <p>★（３）テキスト★</p> <div class="text-right"><a href="★（３）詳細ページURL" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> <div class="col-xs-12 col-md-6"> <div class="col-xs-12 col-md-4"><img src="★（４）画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★（４）タイトル★</strong></h3> <p>★（４）テキスト★</p> <div class="text-right"><a href="★（４）詳細ページURL" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div></div>
サムネイル中心【表示サンプル】
<!--[C]サムネイル中心--> <div> <div class="col-xs-6 col-md-2"> <div class="thumbnail"><img src="★（１）画像URL★" /> <div class="caption"> <h3><strong>★（１）日付★</strong></h3> <p>★（１）タイトルなどの見出し★</p> <div class="text-right"><a href="★（１）詳細ページURL★" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div> <div class="col-xs-6 col-md-2"> <div class="thumbnail"><img src="★（２）画像URL★" /> <div class="caption"> <h3><strong>★（２）日付★</strong></h3> <p>★（２）タイトルなどの見出し★</p> <div class="text-right"><a href="★（２）詳細ページURL★" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div> <div class="col-xs-6 col-md-2"> <div class="thumbnail"><img src="★（３）画像URL★" /> <div class="caption"> <h3><strong>★（３）日付★</strong></h3> <p>★（３）タイトルなどの見出し★</p> <div class="text-right"><a href="★（３）詳細ページURL★" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div> <div class="col-xs-6 col-md-2"> <div class="thumbnail"><img src="★（４）画像URL★" /> <div class="caption"> <h3><strong>★（４）日付★</strong></h3> <p>★（４）タイトルなどの見出し★</p> <div class="text-right"><a href="★（４）詳細ページURL★" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div> <div class="col-xs-6 col-md-2"> <div class="thumbnail"><img src="★（５）画像URL★" /> <div class="caption"> <h3><strong>★（５）日付★</strong></h3> <p>★（５）タイトルなどの見出し★</p> <div class="text-right"><a href="★（５）詳細ページURL★" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div> <div class="col-xs-6 col-md-2"> <div class="thumbnail"><img src="★（６）画像URL★" /> <div class="caption"> <h3><strong>★（６）日付★</strong></h3> <p>★（６）タイトルなどの見出し★</p> <div class="text-right"><a href="★（６）詳細ページURL★" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div> </div>
