• HTML素材①セミナーリスト

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

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

    テキストのみ

    【表示サンプル】
    関連のセミナーはこちら
    • 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>