こちらのページでは複数のセミナーをリストにまとめるテンプレートをご紹介しております。
数パターンご用意いたしましたので、写真素材や紹介文のボリュームに合わせて、使いたいものを選んでコピー&ペースト。
必要な部分を書き換えるだけで充実したページ内容となります。

サンプルページ (詳細ページの最後に入れるだけで、ショッピングサイトのオススメ商品のように関連セミナーを表示することができます)

テキストのみ

【表示サンプル】
関連のセミナーはこちら
  • 2/10 カメラセミナーIN東京 著名カメラマンによるセミナーが新登場!しっかり学びたい方にオススメ。詳細
  • 2/10 カメラセミナーIN東京 著名カメラマンによるセミナーが新登場!しっかり学びたい方にオススメ。詳細
  • 2/10 カメラセミナーIN東京 著名カメラマンによるセミナーが新登場!しっかり学びたい方にオススメ。詳細
<!--[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>

サムネイルあり

【表示サンプル】
関連のセミナーはこちら

カメラセミナーIN大阪

大人気のセミナーが大阪上陸!大阪スタートキャンペーン☆通常4,000円の所を半額2,000円で受講可能!

カメラセミナーIN大阪

大人気のセミナーが大阪上陸!大阪スタートキャンペーン☆通常4,000円の所を半額2,000円で受講可能!

カメラセミナーIN大阪

大人気のセミナーが大阪上陸!大阪スタートキャンペーン☆通常4,000円の所を半額2,000円で受講可能!

カメラセミナーIN大阪

大人気のセミナーが大阪上陸!大阪スタートキャンペーン☆通常4,000円の所を半額2,000円で受講可能!

<!--[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>

サムネイル中心

【表示サンプル】

2/10

カメラセミナー

2/10

カメラセミナー

2/10

カメラセミナー

2/10

カメラセミナー

2/10

カメラセミナー

2/10

カメラセミナー

<!--[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>