-
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">★(1)日付★</span> <span class="col-xs-12 col-md-4" style="font-size:18px;"><strong>★(1)タイトル★</strong></span> <span>★(1)テキスト★<a href="★(1)詳細ページ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">★(2)日付★</span> <span class="col-xs-12 col-md-4" style="font-size:18px;"><strong>★(2)タイトル★</strong></span> <span>★(2)テキスト★<a href="★(2)詳細ページ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">★(3)日付★</span> <span class="col-xs-12 col-md-4" style="font-size:18px;"><strong>★(3)タイトル★</strong></span> <span>★(3)テキスト★<a href="★(3)詳細ページ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="★(1)画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★(1)タイトル★</strong></h3> <p>★(1)テキスト★</p> <div class="text-right"><a href="★(1)詳細ページ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="★(2)画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★(2)タイトル★</strong></h3> <p>★(2)テキスト★</p> <div class="text-right"><a href="★(2)詳細ページ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="★(3)画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★(3)タイトル★</strong></h3> <p>★(3)テキスト★</p> <div class="text-right"><a href="★(3)詳細ページ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="★(4)画像URL★" class="img-responsive"></div> <div class="col-xs-12 col-md-8"><h3><strong>★(4)タイトル★</strong></h3> <p>★(4)テキスト★</p> <div class="text-right"><a href="★(4)詳細ページ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="★(1)画像URL★" /> <div class="caption"> <h3><strong>★(1)日付★</strong></h3> <p>★(1)タイトルなどの見出し★</p> <div class="text-right"><a href="★(1)詳細ページ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="★(2)画像URL★" /> <div class="caption"> <h3><strong>★(2)日付★</strong></h3> <p>★(2)タイトルなどの見出し★</p> <div class="text-right"><a href="★(2)詳細ページ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="★(3)画像URL★" /> <div class="caption"> <h3><strong>★(3)日付★</strong></h3> <p>★(3)タイトルなどの見出し★</p> <div class="text-right"><a href="★(3)詳細ページ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="★(4)画像URL★" /> <div class="caption"> <h3><strong>★(4)日付★</strong></h3> <p>★(4)タイトルなどの見出し★</p> <div class="text-right"><a href="★(4)詳細ページ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="★(5)画像URL★" /> <div class="caption"> <h3><strong>★(5)日付★</strong></h3> <p>★(5)タイトルなどの見出し★</p> <div class="text-right"><a href="★(5)詳細ページ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="★(6)画像URL★" /> <div class="caption"> <h3><strong>★(6)日付★</strong></h3> <p>★(6)タイトルなどの見出し★</p> <div class="text-right"><a href="★(6)詳細ページURL★" target="_blank"><i class="fa fa-arrow-right"></i>詳細</a></div> </div> </div> </div> </div>