• HTML素材③講師詳細テンプレート

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

    実際にコピー&ペーストで作成した講師ページのサンプルがございますので、下記クリックしてご覧ください。

    例① サンプルページ

    例② サンプルページ

    プロフィール写真(大)&講師名

    【表示サンプル】

    Yamada Taroやまだ・たろう

    <!--[A]プロフィール写真(大)&講師名-->
    <div class="col-xs-12 col-md-6"><img src="★写真のURL★" class="img-responsive" /></div>
    <div class="col-xs-12 col-md-6" style="padding:10% 0;"><h2>★講師名★<small style="padding-left:10px;">★ヨミガナ★</small></h2></div>

    プロフィール写真(小)&講師名

    【表示サンプル】

    Yamada Taroやまだ・たろう

    <!--[B]プロフィール写真(小)&講師名-->
    <div class="col-xs-12 col-md-4"><img src="★写真のURL★" class="img-responsive" /></div>
    <div class="col-xs-12 col-md-8" style="padding:10% 0;"><h2>★講師名★<small style="padding-left:10px;">★ヨミガナ★</small></h2></div>

    講師名のみ ※写真なし

    【表示サンプル】

    Yamada Taro

    やまだ・たろう

    <!--[C]講師名のみ ※写真なし-->
    <div class="col-xs-12 col-md-12 text-center" style="background:url(http://) top left no-repeat; padding:30px 0px;">
    <h2>★講師名★<p class="small">★ヨミガナ★</p></h2></div>

    SNSリンク

    【表示サンプル】
     
    <!--[D]SNSリンク-->
    <div class="col-xs-12 col-md-12 text-right" style="font-size:18px;">
    <a href="★facebookのURL★" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
    <a href="★google+のURL★" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a>
    <a href="★twitterのURL★" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
    </div>

    テキスト

    【表示サンプル】

    1970年生まれ 東京都出身
    主な作品

    • 「●●●」●●出版社
    • 「▲▲1月号」▲▲社
    • 「○○○○写真集」○○出版社
    • 「月間▲▲▲」▲▲社(連載)   他多数

    日本を代表するカメラマンの一人。多くの雑誌にて特集を組まれており、海外での撮影経験も豊富。

     

    <!--[E]テキスト-->
    <div class="col-xs-12 col-md-12" style="margin:15px 0px;"><p>★経歴・紹介などテキスト★</p></div>

    囲み枠①

    【表示サンプル】

    カメラは誰でも楽しめるのが魅力です。一緒に楽しく学んでいきましょう!

    <!--[F]囲み枠①-->
    <div class="col-xs-12 col-md-12" style="background:url(http://eipo.jp/simple-1/files/teacherbg01.png); padding:10px; margin:15px 0px;">
    <p style="background-color:#ffffff; width:100%; padding:10px; margin:0px;">★囲み枠に入れたいテキスト★</p></div>

    囲み枠②

    【表示サンプル】

    カメラは誰でも楽しめるのが魅力です。一緒に楽しく学んでいきましょう!

    <!--[G]囲み枠②-->
    <div class="col-xs-12 col-md-12" style="background:url(http://eipo.jp/simple-1/files/teacherbg021.png); padding:10px; margin:15px 0px;">
    <p style="background-color:#ffffff; width:100%; padding:10px; margin:0px;">★囲み枠に入れたいテキスト★</p></div>

    写真&キャプション(1段に2枚)

    【表示サンプル】
    写真(1)キャプション
    写真(2)キャプション
    <!--[H]写真&キャプション(1段に2枚)-->
    <div class="col-xs-12 col-md-6"><img src="★写真(1)のURL★" class="img-responsive" />写真(1)キャプション</div>
    <div class="col-xs-12 col-md-6"><img src="★写真(2)のURL★" class="img-responsive" />写真(2)キャプション</div>

    写真&キャプション(1段に3枚)

    【表示サンプル】
    写真(1)キャプション
    写真(2)キャプション
    写真(3)キャプション
    <!--[I]写真&キャプション(1段に3枚)-->
    <div class="col-xs-12 col-md-4"><img src="★写真(1)のURL★" class="img-responsive" />写真(1)キャプション</div>
    <div class="col-xs-12 col-md-4"><img src="★写真(2)のURL★" class="img-responsive" />写真(2)キャプション</div>
    <div class="col-xs-12 col-md-4"><img src="★写真(3)のURL★" class="img-responsive" />写真(3)キャプション</div>

    写真&キャプション(1段に4枚)

    【表示サンプル】
    写真(1)キャプション
    写真(2)キャプション
    写真(3)キャプション
    写真(4)キャプション
    <!--[J]写真&キャプション(1段に4枚)-->
    <div class="col-xs-12 col-md-3"><img src="★写真(1)のURL★" class="img-responsive" />写真(1)キャプション</div>
    <div class="col-xs-12 col-md-3"><img src="★写真(2)のURL★" class="img-responsive" />写真(2)キャプション</div>
    <div class="col-xs-12 col-md-3"><img src="★写真(3)のURL★" class="img-responsive" />写真(3)キャプション</div>
    <div class="col-xs-12 col-md-3"><img src="★写真(4)のURL★" class="img-responsive" />写真(4)キャプション</div>