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

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

例① サンプルページ

例② サンプルページ

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

【表示サンプル】

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>