2020年10月15日 / 最終更新日時 : 2020年10月15日 test HP制作関連

デザインパーツ①

このページでは、ページを制作する上でデザインを確認しながら、コピペでページが実装ができるようになっております。

上：デザイン、下：対象コードになります。

あとは自分のページに貼り付けて、文言を変更すれば完了です。

見出し

h1の見出し

<h1>h1の見出し</h1>

h2の見出し

<h2>h2の見出し</h2>

h3の見出し

<h3>h3の見出し</h3>

h4の見出し

<h4>h4の見出し</h4>
h5の見出し
<h5>h5の見出し</h5>
h5の見出し
<h6>h6の見出し</h6>

リスト

  • りんご
  • バナナ
  • いちご
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>いちご</li>
</ul>
  1. まずは、シャンプーをします。
  2. 髪を乾かします。
  3. カットします。
<ol>
<li>まずは、シャンプーをします。</li>
<li>髪を乾かします。</li>
<li>カットします。</li>
</ol>
シャンプー
髪を洗うことです。
カット
髪を切ることです。
マッサージ
血液の循環をよくし、神経を鎮め、また皮膚に弾力やつやを保たせるために、からだをさすったりもんだりすることです。
<dl>
<dt>シャンプー</dt>
<dd>髪を洗うことです。</dd>
<dt>カット</dt>
<dd>髪を切ることです。</dd>
<dt>マッサージ</dt>
<dd>血液の循環をよくし、神経を鎮め、また皮膚に弾力やつやを保たせるために、からだをさすったりもんだりすることです。</dd>
</dl>

リンク

詳しくはこちらからアクセスください！ 別窓にしたい場合は、こちら

<p>詳しくは<a href="https://www.google.com/">こちら</a>からアクセスください！ 別窓にしたい場合は、<a target="_blank" href="https://www.google.com/">こちら</a></p>

引用

“吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。”

ー 吾輩は猫である

<div class="well">
<blockquot>
<p style="margin-bottom:0;">“吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。”</p><small>ー 吾輩は猫である</small>
</blockquot>
</div>

テーブル

表の見出し 表の中身 表の中身
表の見出し 表の中身 表の中身
表の見出し 表の中身 表の中身 
<div class="table-responsive">
<table class="table">
<tr>
<th>表の見出し</th>
<td>表の中身</td>
<td>表の中身</td>
</tr>
<tr>
<th>表の見出し</th>
<td>表の中身</td>
<td>表の中身</td>
</tr>
<tr>
<th>表の見出し</th>
<td>表の中身</td>
<td>表の中身</td>
</tr>
</table>
</div>

テーブルを実装するには、こちらのページが便利です。→https://tabletag.net/ja/

ストライプテーブル

# コース名 料金
1 ヘアカット 5,000,000円
2 ヘアカット 5,000,000円
3 ヘアカット 5,000,000円
4 ヘアカット 5,000,000円 
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>コース名</th>
<th>料金</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>ヘアカット</td>
<td>5,000,000円</td>
</tr>
<tr>
<th scope="row">2</th>
<td>ヘアカット</td>
<td>5,000,000円</td>
</tr>
<tr>
<th scope="row">3</th>
<td>ヘアカット</td>
<td>5,000,000円</td>
</tr>
<tr>
<th scope="row">4</th>
<td>ヘアカット</td>
<td>5,000,000円</td>
</tr>
</tbody>
</table>
</div>

テーブルを実装するには、こちらのページが便利です。→https://tabletag.net/ja/

全部にボーダーがついたテーブル

# コース名 料金
1 ヘアカット 5,000,000円
2 シャンプー 30,000円 
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>コース名</th>
<th>料金</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>ヘアカット</td>
<td>5,000,000円</td>
</tr>
<tr>
<th scope="row">2</th>
<td>シャンプー</td>
<td>30,000円</td>
</tr>
</tbody>
</table>
</div>

テーブルを実装するには、こちらのページが便利です。→https://tabletag.net/ja/

このページでは、ページを制作する上でデザインを確認しながら、コピペでページが実装ができるようになっております。

上：デザイン、下：対象コードになります。

あとは自分のページに貼り付けて、文言を変更すれば完了です。

基礎編と比べ、ソースが少々長くなりますのでコピペミスや、誤ってタグを削除してしまわないように気を付けましょう。

2カラムボックス

ポイント1

私も事実何ともこの講演違いに対して事の時にしあっあり。

詳細はこちら

ポイント2

私も事実何ともこの講演違いに対して事の時にしあっあり。

詳細はこちら

<h2>2カラムボックス</h2>
<div class="row">
<div class="col-xs-6">
<div class="thumbnail">
<img src="https://placehold.jp/640x400.png" alt="">
<div class="caption">
<h3>ポイント1</h3>
<p>私も事実何ともこの講演違いに対して事の時にしあっあり。</p>
<p><a href="リンク先のURL" class="btn btn-primary" role="button">詳細はこちら</a></p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="thumbnail">
<img src="https://placehold.jp/640x400.png" alt="">
<div class="caption">
<h3>ポイント2</h3>
<p>私も事実何ともこの講演違いに対して事の時にしあっあり。</p>
<p><a href="リンク先のURL" class="btn btn-primary" role="button">詳細はこちら</a></p>
</div>
</div>
</div>
</div>

ポイント

  • リンク先のURLを変更する
  • 画像のパスのみ変更する（https://placehold.jp/242×200.png）の部分/画像の説明（alt）があれば入れる。
  • 文言を変える

3カラムボックス

ポイント1

私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。

詳細はこちら

ポイント2

私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。

詳細はこちら

ポイント3

私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。

詳細はこちら

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://placehold.jp/640x400.png" alt="">
<div class="caption">
<h3>ポイント1</h3>
<p>私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。</p>
<p><a href="リンク先のURL" class="btn btn-primary" role="button">詳細はこちら</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://placehold.jp/640x400.png" alt="">
<div class="caption">
<h3>ポイント2</h3>
<p>私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。</p>
<p><a href="リンク先のURL" class="btn btn-primary" role="button">詳細はこちら</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="https://placehold.jp/640x400.png" alt="">
<div class="caption">
<h3>ポイント3</h3>
<p>私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。</p>
<p><a href="リンク先のURL" class="btn btn-primary" role="button">詳細はこちら</a></p>
</div>
</div>
</div>
</div>

ポイント

  • リンク先のURLを変更する
  • 画像のパスのみ変更する（https://placehold.jp/242×200.png）の部分/画像の説明（alt）があれば入れる。
  • 文言を変える

注目パーツ

<div class="alert alert-success" role="alert">
よくやった！あなたは<a href="リンク先のURL" class="alert-link">この重要な警告メッセージ</a>を正常に読むことができます。
</div>

<div class="alert alert-info" role="alert">
注意喚起！この<a href="リンク先のURL" class="alert-link">アラートには注意</a>が必要ですが、それは重要ではありません。
</div>

<div class="alert alert-warning" role="alert">
警告！あなた自身をよく見て、あなたは<a href="リンク先のURL" class="alert-link">あまりにも良く見えていない。</a>
</div>

<div class="alert alert-danger" role="alert">
ああスナップ！ いくつか変更して、<a href="リンク先のURL" class="alert-link">もう一度送信</a>してみてください。
</div>

4カラム

<div class="row">
<div class="col-xs-6 col-md-3">
<a href="遷移先のURL" class="thumbnail"><img src="https://placehold.jp/420x410.png" alt=""></a>
</div>

<div class="col-xs-6 col-md-3">
<a href="遷移先のURL" class="thumbnail"><img src="https://placehold.jp/420x410.png" alt=""></a>
</div>

<div class="col-xs-6 col-md-3">
<a href="遷移先のURL" class="thumbnail"><img src="https://placehold.jp/420x410.png" alt=""></a>
</div>

<div class="col-xs-6 col-md-3">
<a href="遷移先のURL" class="thumbnail"><img src="https://placehold.jp/420x410.png" alt=""></a>
</div>
</div>

写真とテキストの組み合わせ

昔の人の言葉

私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。

<div class="media">
<div class="media-left" style="width:20%;">
<a href="リンク先URL"><img class="media-object" src="https://placehold.jp/120x120.png" alt=""></a>
</div>
<div class="media-body" style="width:80%;">
<h4 class="media-heading">昔の人の言葉</h4>
私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。
</div>
</div>

昔の人の言葉

私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。

<div class="media">
<div class="media-body" style="width:80%;">
<h4 class="media-heading">昔の人の言葉</h4>
私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。私も事実何ともこの講演違いに対して事の時にしあっあり。かく当時の教育屋も極めてこの話たないまでにあるて過ぎるたいには推測云うんですて、たったには続いたましますな。
</div>
<div class="media-right" style="width:20%;">
<a href="リンク先URL"><img class="media-object" src="https://placehold.jp/120x120.png" alt=""></a>
</div>
</div>

ポイント

画像をでかくしすぎるとスマートフォンでみたときに、読みずらくなるので最大 120×120くらいに収めるとよい。

64×64 で右左と組んでいくと会話風にもなる。

汎用リンク

リンクボタン１

リンクボタン2

リンクボタン3

リンクボタン4

リンクボタン5

<p><a href="#" class="btn btn-primary">リンクボタン１</a></p>

<p><a href="#" class="btn btn-success">リンクボタン2</a></p>

<p><a href="#" class="btn btn-info">リンクボタン3</a></p>

<p><a href="#" class="btn btn-warning">リンクボタン4</a></p>

<p><a href="#" class="btn btn-danger">リンクボタン5</a></p>

大リンクボタン１

大リンクボタン2

大リンクボタン3

大リンクボタン4

大リンクボタン5

<p><a href="#" class="btn btn-primary btn-lg">大リンクボタン１</a></p>

<p><a href="#" class="btn btn-success btn-lg">大リンクボタン2</a></p>

<p><a href="#" class="btn btn-info btn-lg">大リンクボタン3</a></p>

<p><a href="#" class="btn btn-warning btn-lg">大リンクボタン4</a></p>

<p><a href="#" class="btn btn-danger btn-lg">大リンクボタン5</a></p>

リンクボタン１

リンクボタン2

リンクボタン3

リンクボタン4

リンクボタン5

<p><a href="#" class="btn btn-block btn-primary">リンクボタン１</a></p>

<p><a href="#" class="btn btn-block btn-success">リンクボタン2</a></p>

<p><a href="#" class="btn btn-block btn-info">リンクボタン3</a></p>

<p><a href="#" class="btn btn-block btn-warning">リンクボタン4</a></p>

<p><a href="#" class="btn btn-block btn-danger">リンクボタン5</a></p>

大リンクボタン１

大リンクボタン2

大リンクボタン3

大リンクボタン4

大リンクボタン5

<p><a href="#" class="btn-lg btn btn-block btn-primary">大リンクボタン１</a></p>

<p><a href="#" class="btn-lg btn btn-block btn-success">大リンクボタン2</a></p>

<p><a href="#" class="btn-lg btn btn-block btn-info">大リンクボタン3</a></p>

<p><a href="#" class="btn-lg btn btn-block btn-warning">大リンクボタン4</a></p>

<p><a href="#" class="btn-lg btn btn-block btn-danger">大リンクボタン5</a></p>

文字色・背景色の変更

背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ１

背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ２

背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ３

背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ４

背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ５

<div class="bg-primary text-white" style="margin-bottom:10px;">
<p>背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ１</p>
</div>

<div class="bg-success text-white" style="margin-bottom:10px;">
<p>背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ２</p>
</div>

<div class="bg-info text-white" style="margin-bottom:10px;">
<p>背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ３</p>
</div>

<div class="bg-warning text-white" style="margin-bottom:10px;">
<p>背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ４</p>
</div>

<div class="bg-danger text-white" style="margin-bottom:10px;">
<p>背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ、背景の色が変わるデザインパーツ５</p>
</div>

文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ１

文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ２

文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ３

文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ４

文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ５

<p class="text-primary">文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ１</p>

<p class="text-success">文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ２</p>

<p class="text-info">文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ３</p>

<p class="text-warning">文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ４</p>

<p class="text-danger">文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ、文字の色が変わるデザインパーツ５</p>

位置調整の変更

左寄せ

中央寄せ

右寄せ

<p style="text-align:left;">左寄せ</p>

<p style="text-align:center;">中央寄せ</p>

<p style="text-align:right;">右寄せ</p>

汎用リスト

  • リストアイテム１
  • リストアイテム２
  • リストアイテム３
<ul class="list-group list-group-flush">
<li class="list-group-item">リストアイテム１</li>
<li class="list-group-item">リストアイテム２</li>
<li class="list-group-item">リストアイテム３</li>
</ul>

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> リンク１</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> リンク３</a>
</li>
</ul>

<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> リンク</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> リンク２</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> リンク３</a>
</li>
</ul>

 

 

トップページ用3カラムメニュー1

<ul style="display:flex;list-style:none;flex-wrap:wrap;margin:0 -5px 20px; padding:0;">
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="border-radius:50%;max-width:100%;" src="https://placehold.jp/300x300.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">はじめての方へ</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="border-radius:50%;max-width:100%;" src="https://placehold.jp/300x300.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">5つのこだわり</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="border-radius:50%;max-width:100%;" src="https://placehold.jp/300x300.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">感想・口コミ</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="border-radius:50%;max-width:100%;" src="https://placehold.jp/300x300.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">メニュー・料金</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="border-radius:50%;max-width:100%;" src="https://placehold.jp/300x300.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">店舗検索</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="border-radius:50%;max-width:100%;" src="https://placehold.jp/300x300.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">ご予約はこちら</span></a></li>
</ul>

ポイント

  1. 必ず正方形の画像を用意する。
  2. 画像のURLを変更する。
  3. URL先を指定する。
  4. 3カラムになるので1行だけでよい場合は、<li>を3つ削除してください。

トップページ用3カラムメニュー2

<ul style="display:flex;list-style:none;flex-wrap:wrap;margin:0 -5px 20px; padding:0;">
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="max-width:100%;" src="https://placehold.jp/300x200.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">はじめての方へ</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="max-width:100%;" src="https://placehold.jp/300x200.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">5つのこだわり</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="max-width:100%;" src="https://placehold.jp/300x200.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">感想・口コミ</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="max-width:100%;" src="https://placehold.jp/300x200.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">メニュー・料金</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="max-width:100%;" src="https://placehold.jp/300x200.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">店舗検索</span></a></li>
<li style="width:33%;margin:0 auto 10px;text-align:center;"><a href="URL先を指定"><img style="max-width:100%;" src="https://placehold.jp/300x200.png" alt=""><span style="margin-top:5px; display:block;font-size: 12px;text-align:center;">ご予約はこちら</span></a></li>
</ul>

ポイント

  1. 必ずの大きさを揃えたものを用意する。
  2. 画像のURLを変更する。
  3. URL先を指定する。
  4. 3カラムになるので1行だけでよい場合は、<li>を3つ削除してください。

3カラムポイント

ポイント１

3人の講師が1ヶ月かけてWEB作成、運営、マーケティングのレッスンを行います。

ポイント2

適切な知識と技術、マニュアル、自分だけのオリジナルHPが手に入ります。

ポイント3

WEB上でのHP作成指導＆サポートのほかに、テレビ電話でのライティング＆マーケティングレッスンも行います。

<div class="prBlocks prBlocks-default row">
<article class="prBlock prBlock_lighnt col-sm-4">
<div class="prBlock_icon_outer" style="border: 1px solid #000;"><i style="color:#000" class="fa fa-scissors font_icon prBlock_icon"></i></div>
<h1 class="prBlock_title">ポイント１</h1>
<p class="prBlock_summary">3人の講師が1ヶ月かけてWEB作成、運営、マーケティングのレッスンを行います。</p>
</article>
<article class="prBlock prBlock_lighnt col-sm-4">
<div class="prBlock_icon_outer" style="border: 1px solid #000;"><i style="color:#000" class="fa fa-check-circle font_icon prBlock_icon"></i></div>
<h1 class="prBlock_title">ポイント2</h1>
<p class="prBlock_summary">適切な知識と技術、マニュアル、自分だけのオリジナルHPが手に入ります。</p>
</article>
<article class="prBlock prBlock_lighnt col-sm-4">
<div class="prBlock_icon_outer" style="border: 1px solid #000;"><i style="color:#000" class="fa fa-thumbs-o-up font_icon prBlock_icon"></i></div>
<h1 class="prBlock_title">ポイント3</h1>
<p class="prBlock_summary">WEB上でのHP作成指導＆サポートのほかに、テレビ電話でのライティング＆マーケティングレッスンも行います。</p>
</article>
</div>

ポイント

  1. border: 1px solid #000; の部分を自分のサイトにあった色にする。
  2. color:#000;の部分も自分のサイトにあった色にする。
  3. アイコンを選択する。fa-xxxxxxの部分だけ変更すれば変わります。
    以下のページから選択できます。
    The Icons

区切り線をいれたい場合

※) ↑この線です。

<hr />

アイコンを利用しよう！

このテーマでは様々なアイコンがご利用いただけます。

使い方はとっても簡単です。

  1. こちら にアクセスします。
  2. <span class="●● ●●" aria-hidden="true"></span>

    最初の●●が「glyphicon」後ろの●●が「glyphicon-アイコン名」を入れるだけで表示されます。

  3. あとは他のHTMLと組み合わせて完了！

動画

実装例

押したくなるボタン

<p><a href="#" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span> 押したくなるボタン</a></p>

ポイント的な見出し

<h3><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> ポイント的な見出し</h3>

センスが問われますが、何かの文章やリンクなどと組み合わせるとよく見えます。

※ The Icons も同じようにご利用可能です。どちらかお好きな方で構いません。

VK All in One Expansion(プラグイン)を有効化することで使えるデザインパーツ

プロフィール設定

ご挨拶

株式会社D.M.Yは、企業理念として徹底した顧客目線をかかげております。

これは過去に利益優先でモノ作りをしていた結果、倒産寸前まで落ち込んだ苦い経験を糧に、企業はお客様のためにあるものというしごく当たり前の事に立ち返って、改めて理念として掲げました。

その結果、紆余曲折はありましたがお客様からの共感も数多くいただきまして今に至っております。

これに甘えること無く、今後も変わらず徹底した顧客目線でお客様の求めるもの・お困りごとに徹底してお応えしていける企業であるよう社員一丸となって取り組んで参ります。

株式会社D.M.Y
代表取締役社長 JUN
<div class="widget widget_pudge">
<div class="widget_pageContent">
<p class="lead"><span class="veu_leadTxt">ご挨拶</span></p>
<p><img style="max-width:180px;width:180px;" class="alignright wp-image-833" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/06/sample.png" />株式会社D.M.Yは、企業理念として徹底した顧客目線をかかげております。</p>
<p>これは過去に利益優先でモノ作りをしていた結果、倒産寸前まで落ち込んだ苦い経験を糧に、企業はお客様のためにあるものというしごく当たり前の事に立ち返って、改めて理念として掲げました。</p>
<p>その結果、紆余曲折はありましたがお客様からの共感も数多くいただきまして今に至っております。</p>
<p>これに甘えること無く、今後も変わらず徹底した顧客目線でお客様の求めるもの・お困りごとに徹底してお応えしていける企業であるよう社員一丸となって取り組んで参ります。</p>
<div style="text-align: right;">株式会社D.M.Y</div>
<div style="text-align: right;">代表取締役社長 JUN</div>
</div>
</div>

ポイント

  1. 大きめの画像を用意し、max-width:180px;width:180px;こちらで横幅を指定する。
  2. 画像のパスを変更する。/文言を変える。

リンクボックス

会社概要

弊社の所在地・連絡先、その他基本情報についてはこちらをご覧ください。

詳しくはこちら

 

採用情報

一緒に働く仲間を募集しています！やる気があれば未経験でも大歓迎です。

詳しくはこちら

 

<div class="veu_childPage_list">
<a href="#URL" class="childPage_list_box"><div class="childPage_list_box_inner"><h3 class="childPage_list_title">会社概要</h3><div class="childPage_list_body"><img width="150" height="150" src="https://placehold.it/300x300/009a57/fff" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><p class="childPage_list_text">弊社の所在地・連絡先、その他基本情報についてはこちらをご覧ください。</p><span class="childPage_list_more btn btn-primary btn-xs">詳しくはこちら</span></div></div></a>
<a href="#URL" class="childPage_list_box"><div class="childPage_list_box_inner"><h3 class="childPage_list_title">採用情報</h3><div class="childPage_list_body"><img width="150" height="150" src="https://placehold.it/300x300/009a57/fff" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><p class="childPage_list_text">一緒に働く仲間を募集しています！やる気があれば未経験でも大歓迎です。</p><span class="childPage_list_more btn btn-primary btn-xs">詳しくはこちら</span></div></div></a>
</div><!-- [ /.childPage_list ] -->

ポイント

  1. URL先変える。
  2. 画像のパスを変更する。/文言を変える。

リードテキスト

文章の始まりなどに使える。

<p class="veu_leadTxt">文章の始まりなどに使える。</p>

よくあるご質問

質問1
回答回答回答回答回答回答
質問2
回答回答回答回答回答回答
質問3
回答回答回答回答回答回答
質問4
回答回答回答回答回答回答
質問5
回答回答回答回答回答回答
質問6
回答回答回答回答回答回答
<dl class="veu_qaItem">
<dt>質問1</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>
<dl class="veu_qaItem">
<dt>質問2</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>
<dl class="veu_qaItem">
<dt>質問3</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>
<dl class="veu_qaItem">
<dt>質問4</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>
<dl class="veu_qaItem">
<dt>質問5</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>
<dl class="veu_qaItem">
<dt>質問6</dt>
<dd>回答回答回答回答回答回答</dd>
</dl>

手順などを説明したりするもの。

お電話
まずはお気軽のお問い合わせください。
ご予約
施術可能な日をお伝えください。
ご来店
笑顔でお迎えします。
お支払い
現金のみのお支払いとなります。
<div>

<div class="veu_flowBox">
<dl>
<dt>お電話</dt>
<dd>まずはお気軽のお問い合わせください。</dd>
</dl>
</div>
<div class="veu_flowBox">
<dl>
<dt>ご予約</dt>
<dd>施術可能な日をお伝えください。</dd>
</dl>
</div>
<div class="veu_flowBox">
<dl>
<dt>ご来店</dt>
<dd>笑顔でお迎えします。</dd>
</dl>
</div>
<div class="veu_flowBox">
<dl>
<dt>お支払い</dt>
<dd>現金のみのお支払いとなります。</dd>
</dl>
</div>

</div>

お問い合わせエリア

お気軽にお問い合わせください。000-000-0000受付時間 9:00 – 18:00 [ 土日・祝日除く ]

お問い合わせはこちら お気軽にお問い合わせください。

<div class="widget widget_vkexunit_contact_section">
<div class="veu_contact">
<section class="veu_contact veu_contentAddSection">
<div class="contact_frame">
<p class="contact_txt">
<span class="contact_txt_catch">お気軽にお問い合わせください。</span><span class="contact_txt_tel veu_color_txt_key">000-000-0000</span><span class="contact_txt_time">受付時間 9:00 - 18:00 [ 土日・祝日除く ]</span>
</p>
<a href="#URL" class="btn btn-primary btn-lg contact_bt"><span class="contact_bt_txt"><i class="fa fa-envelope-o"></i> お問い合わせはこちら <i class="fa fa-arrow-circle-o-right"></i></span><span class="contact_bt_subTxt">お気軽にお問い合わせください。</span></a>
</div>
</section>
</div>
</div>

ポイント

  1. お問い合わせフォームのURLを設定する。
  2. 電話番号/文言を変更する。

販売促進をするようなエリア

シンプルでカスタマイズしやすいエリア

サンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすと
サンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすと
詳しくはこちら

<section class="veu_cta">
<h1 class="cta_title">シンプルでカスタマイズしやすいエリア</h1>
<div class="cta_body">
<div class="cta_body_image cta_body_image_right">
<a href="#URL" target="_blank"><img src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/06/sample.jpg"></a>
</div>
<div class="cta_body_txt image_exist">サンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすと<br>
サンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすと<br><br>
サンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすとサンプルてきすと</div>
<div class="cta_body_link"><a href="#URL" class="btn btn-primary btn-block btn-lg" target="_blank">詳しくはこちら</a>
</div></div>
</section>

ポイント

  1. URL先変える。
  2. 画像のパスを変更する。/文言を変える。

マルチカラム → スマホ時 1カラム（グリッド システム）

12
1
11
2
10
3
9
4
8
5
7
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
<div class="row">
<div class="col-sm-12"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">12</span></div>
</div>

<div class="row">
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">1</span></div>
<div class="col-sm-11"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">11</span></div>
</div>

<div class="row">
<div class="col-sm-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">2</span></div>
<div class="col-sm-10"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">10</span></div>
</div>

<div class="row">
<div class="col-sm-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-sm-9"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >9</span></div>
</div>

<div class="row">
<div class="col-sm-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
<div class="col-sm-8"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >8</span></div>
</div>

<div class="row">
<div class="col-sm-5"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >5</span></div>
<div class="col-sm-7"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >7</span></div>
</div>

<div class="row">
<div class="col-sm-6"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >6</span></div>
<div class="col-sm-6"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >6</span></div>
</div>

<div class="row">
<div class="col-sm-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
<div class="col-sm-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
<div class="col-sm-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
</div>

<div class="row">
<div class="col-sm-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-sm-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-sm-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-sm-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
</div>

<div class="row">
<div class="col-sm-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-sm-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-sm-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-sm-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-sm-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-sm-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
</div>

<div class="row">
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-sm-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
</div>

ポイント

  1. グリッドシステムは、12カラムを利用して形成されております。
    ※ 1列の合計が12になるようになっております。
  2. スマホ時に横並びを解除したい場合はこちらの、コードをお使いください。
    rowのdivの中のクラスが「col-sm-数字」になっているのに注目！
  3. 中にかいてあるspanタグはレイアウトがわかりやすいようにいれておりますが、こちらは削除してお使いいただければと思います。

マルチカラム → スマホ時そのまま維持（グリッド システム）

12
1
11
2
10
3
9
4
8
5
7
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1

<div class="row">
<div class="col-xs-12"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">12</span></div>
</div>

<div class="row">
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">1</span></div>
<div class="col-xs-11"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">11</span></div>
</div>

<div class="row">
<div class="col-xs-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">2</span></div>
<div class="col-xs-10"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;">10</span></div>
</div>

<div class="row">
<div class="col-xs-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-xs-9"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >9</span></div>
</div>

<div class="row">
<div class="col-xs-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
<div class="col-xs-8"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >8</span></div>
</div>

<div class="row">
<div class="col-xs-5"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >5</span></div>
<div class="col-xs-7"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >7</span></div>
</div>

<div class="row">
<div class="col-xs-6"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >6</span></div>
<div class="col-xs-6"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >6</span></div>
</div>

<div class="row">
<div class="col-xs-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
<div class="col-xs-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
<div class="col-xs-4"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >4</span></div>
</div>

<div class="row">
<div class="col-xs-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-xs-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-xs-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
<div class="col-xs-3"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >3</span></div>
</div>

<div class="row">
<div class="col-xs-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-xs-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-xs-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-xs-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-xs-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
<div class="col-xs-2"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >2</span></div>
</div>

<div class="row">
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
<div class="col-xs-1"><span style="background-color: #ccc; color: #fff; text-align:center; padding: 10px; display:block; border-radius: 4px; margin-bottom: 10px;" >1</span></div>
</div>

ポイント

  1. グリッドシステムは、12カラムを利用して形成されております。
    ※ 1列の合計が12になるようになっております。
  2. スマホ時にレイアウトを保持したい場合はこちらの、コードをお使いください。
    rowのdivの中のクラスが「col-xs-数字」になっているのに注目！
  3. 中にかいてあるspanタグはレイアウトがわかりやすいようにいれておりますが、こちらは削除してお使いいただければと思います。

プローフィール / 従業員

安室 奈美恵

日本の歌手、ダンサー。本名同じ。身長は158cm、血液型はO型。沖縄県那覇市出身。愛称は安室ちゃん。所属レコード会社はavex、レーベルはDimension Point。所属事務所はstella 88。

2017年9月16日、デビュー25周年を迎えたが、直後の同年9月20日、「ファンの皆様へ」というタイトルで、翌2018年9月16日を以って芸能界を引退することを、所属事務所の公式Webサイト上で発表した。

性格

リーダー的存在。血液型O型。外見は子供の域を超えており、小学1年生にしてすでに下の毛・胸毛・ヒゲが生え揃っている。リーダー養成施設「リーダー保育園」で一番リーダー的だった者に贈呈される「リーダーバッジ」を肌身離さず付けている。8回もの転校を経て、ポッポ小1年2組に転入した。

影響力

  • 1996年 – 1997年、茶髪のロングヘアー・ミニスカート・細眉・厚底ブーツなどといった彼女のファッションスタイルや髪型、メイクなどに憧れる若い女性たち、いわゆる”アムラー”が大量発生した「アムラー・ブーム」を巻き起こし、社会現象となった
  • ミリオンヒット作を次々と世に送り出し、1997年には10代シンガーとしては日本の音楽史上初となるシングル・アルバム総売上げ2000万枚突破を記録。
  • 2008年7月にリリースされたベストアルバム『BEST FICTION』で、史上初となる10代・20代・30代の3つの世代でのミリオンを達成し、再び返り咲いた（詳しくは#2005 – 2011年 : ソロデビュー10周年を参考）。後にこの記録は、2017年11月リリースのベストアルバム『Finally』（40代）で更新された。
  • ファン層に関しては、20代から30代後半までの半数がターゲットとなっていたが、現在では、老若男女問わず幅広い世代からの支持を獲得している。また、2008年のブレイク以降、邦楽女性ソロアーティストのトータルセールスとしては唯一の年間TOP10位入りを果たしてる。近年のライブでは毎年開催されるほどチケットは即売され、現在でも非常に入手困難な為、プラチナ化となっている。

メッセージ

父親も祖父も金足農野球部出身。祖父は自宅近くで梨を育て、父親は秋田市内の企業に勤務しています。進学にしても学歴を身に付けるより、吉田のプロ入りの夢を実現するために必要な過程という意味合いが強い。プロ側の高い評価が分かれば、間違いなくプロ入りしますよ。希望球団以外の指名なら八戸学院大に進学させる絵図を描いているプロ球団があるというウワサもありましたけど、ドラフト下位の選手ならともかく、これだけ評価が上がった以上、一本釣りは不可能ですから

HTML

<div class="row">
    <div class="col-sm-4">
      <p style="text-align: center;"><img class="media-object" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/06/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-06-27-13.46.28.png" alt=""></p>
    </div>

    <div class="col-sm-8">
      <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 安室 奈美恵</h3>
      <p style="margin-bottom:20px;">日本の歌手、ダンサー。本名同じ。身長は158cm、血液型はO型。沖縄県那覇市出身。愛称は安室ちゃん。所属レコード会社はavex、レーベルはDimension Point。所属事務所はstella 88。</p>
      <p style="margin-bottom:20px;">2017年9月16日、デビュー25周年を迎えたが、直後の同年9月20日、「ファンの皆様へ」というタイトルで、翌2018年9月16日を以って芸能界を引退することを、所属事務所の公式Webサイト上で発表した。 </p>

      <h4>性格</h4>
      <p style="margin-bottom:20px;">リーダー的存在。血液型O型。外見は子供の域を超えており、小学1年生にしてすでに下の毛・胸毛・ヒゲが生え揃っている。リーダー養成施設「リーダー保育園」で一番リーダー的だった者に贈呈される「リーダーバッジ」を肌身離さず付けている。8回もの転校を経て、ポッポ小1年2組に転入した。</p>

      <h4>影響力</h4>
      <ul style="font-size: 14px;">
      <li>1996年 - 1997年、茶髪のロングヘアー・ミニスカート・細眉・厚底ブーツなどといった彼女のファッションスタイルや髪型、メイクなどに憧れる若い女性たち、いわゆる"アムラー"が大量発生した「アムラー・ブーム」を巻き起こし、社会現象となった</li>
      <li>ミリオンヒット作を次々と世に送り出し、1997年には10代シンガーとしては日本の音楽史上初となるシングル・アルバム総売上げ2000万枚突破を記録。</li>
      <li>2008年7月にリリースされたベストアルバム『BEST FICTION』で、史上初となる10代・20代・30代の3つの世代でのミリオンを達成し、再び返り咲いた（詳しくは#2005 - 2011年 : ソロデビュー10周年を参考）。後にこの記録は、2017年11月リリースのベストアルバム『Finally』（40代）で更新された。</li>
      <li>ファン層に関しては、20代から30代後半までの半数がターゲットとなっていたが、現在では、老若男女問わず幅広い世代からの支持を獲得している。また、2008年のブレイク以降、邦楽女性ソロアーティストのトータルセールスとしては唯一の年間TOP10位入りを果たしてる。近年のライブでは毎年開催されるほどチケットは即売され、現在でも非常に入手困難な為、プラチナ化となっている。</li>
      </ul>

      <h4>メッセージ</h4>
      <p>父親も祖父も金足農野球部出身。祖父は自宅近くで梨を育て、父親は秋田市内の企業に勤務しています。進学にしても学歴を身に付けるより、吉田のプロ入りの夢を実現するために必要な過程という意味合いが強い。プロ側の高い評価が分かれば、間違いなくプロ入りしますよ。希望球団以外の指名なら八戸学院大に進学させる絵図を描いているプロ球団があるというウワサもありましたけど、ドラフト下位の選手ならともかく、これだけ評価が上がった以上、一本釣りは不可能ですから</p>

    </div>
  </div>

評価・口コミ

画像をクリックすることで口コミに移動します。

HTML

<div class="row">
  <div class="col-xs-4">
  <a href="#msg01" class="thumbnail"><img src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
  </div>
  <div class="col-xs-4">
  <a href="#msg02" class="thumbnail"><img src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
  </div>
  <div class="col-xs-4">
  <a href="#msg03" class="thumbnail"><img src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
  </div>
</div>

<div class="row">
  <div class="col-xs-4">
  <a href="#msg04" class="thumbnail"><img src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
  </div>
  <div class="col-xs-4">
  <a href="#msg05" class="thumbnail"><img src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
  </div>
  <div class="col-xs-4">
  <a href="#msg06" class="thumbnail"><img src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
  </div>
</div>

A・Nさん

初めてでも安心して利用できました！サラサラになって嘘みたいです。またよろしくお願いします！

N・Aさん

ライザップに通って半年が経ちますが会う人会う人髪をほめてくれるのでいつも楽しい気持ちで過ごせています。

A・Nさん

初めてでも安心して利用できました！サラサラになって嘘みたいです。またよろしくお願いします！

N・Aさん

ライザップに通って半年が経ちますが会う人会う人髪をほめてくれるのでいつも楽しい気持ちで過ごせています。

A・Nさん

初めてでも安心して利用できました！サラサラになって嘘みたいです。またよろしくお願いします！

N・Aさん

ライザップに通って半年が経ちますが会う人会う人髪をほめてくれるのでいつも楽しい気持ちで過ごせています。

HTML

<div id="msg01" style="padding:10px 0;"></div>
  <div class="media">
    <div class="media-left" style="width:20%;">
    <a href="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png"><img class="media-object" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
    </div>
    <div class="media-body" style="width:80%;">
    <h4 class="media-heading">A・Nさん</h4>
    <p>初めてでも安心して利用できました！サラサラになって嘘みたいです。またよろしくお願いします！</p>
    </div>
  </div>

  <div id="msg02" style="padding:10px 0;"></div>
  <div class="media">
    <div class="media-body" style="width:80%;">
    <h4 class="media-heading">N・Aさん</h4>
    <p>ライザップに通って半年が経ちますが会う人会う人髪をほめてくれるのでいつも楽しい気持ちで過ごせています。</p>
    </div>
    <div class="media-right" style="width:20%;">
    <a href="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png"><img class="media-object" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
    </div>
  </div>

  <div id="msg03" style="padding:10px 0;"></div>
  <div class="media">
    <div class="media-left" style="width:20%;">
    <a href="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png"><img class="media-object" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
    </div>
    <div class="media-body" style="width:80%;">
    <h4 class="media-heading">A・Nさん</h4>
    <p>初めてでも安心して利用できました！サラサラになって嘘みたいです。またよろしくお願いします！</p>
    </div>
  </div>

  <div id="msg04" style="padding:10px 0;"></div>
  <div class="media">
    <div class="media-body" style="width:80%;">
    <h4 class="media-heading">N・Aさん</h4>
    <p>ライザップに通って半年が経ちますが会う人会う人髪をほめてくれるのでいつも楽しい気持ちで過ごせています。</p>
    </div>
    <div class="media-right" style="width:20%;">
    <a href="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png"><img class="media-object" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
    </div>
  </div>

  <div id="msg05" style="padding:10px 0;"></div>
  <div class="media">
    <div class="media-left" style="width:20%;">
    <a href="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png"><img class="media-object" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
    </div>
    <div class="media-body" style="width:80%;">
    <h4 class="media-heading">A・Nさん</h4>
    <p>初めてでも安心して利用できました！サラサラになって嘘みたいです。またよろしくお願いします！</p>
    </div>
  </div>

  <div id="msg06" style="padding:10px 0;"></div>
  <div class="media">
    <div class="media-body" style="width:80%;">
    <h4 class="media-heading">N・Aさん</h4>
    <p>ライザップに通って半年が経ちますが会う人会う人髪をほめてくれるのでいつも楽しい気持ちで過ごせています。</p>
    </div>
    <div class="media-right" style="width:20%;">
    <a href="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png"><img class="media-object" src="https://dmy.biyoshi-academy.com/wp-content/uploads/2018/08/kuchikomi1.png" alt=""></a>
    </div>
  </div>

おまじないコード（JavaScript）

<div>
<script>
jQuery('a[href^="#"]').click(function(){
const speed = 500;
const headHeight = jQuery(".siteHeadContainer").height();
const href= jQuery(this).attr("href");
const target = jQuery(href == "#" || href == "" ? 'html' : href);
const position = target.offset().top;
jQuery("html, body").animate({scrollTop:position - headHeight - 10}, speed, "swing");
return false;
});
</script>
</div>

ポイント

こちらのコードを投稿の一番最後に張り付けることで、ページ内リンクの移動にアニメーションがつきます。

またLightning Themeのテーマ自体が、ヘッダーが追従型のためページ内リンクを飛ばしたときにずれてしまうのも防げます！

ページ内遷移の方法

  1. href=”#●●” と指定する。
  2. ページ内の任意の箇所にidを指定する。 id=”●●”

ご予約フォーム

[contact-form-7 id=”462″ title=”テスト”]

（例）contactform7 内のHTML

WordPressプラグインのContact Form 7を使用します。

<!-- contactform7 内のHTML -->
<table class="table table-bordered table-striped table-contactform7">
  <tr>
  <th><span style="display: inline-block; background: #ff4444; color:#fff; padding: 2px 5px; font-size: 10px;margin: 0 10px 5px 0;">必須</span><span style="display: inline-block; font-size: 14px; position:relative;top: 2px;">お名前</span></th>
  <td>[text* your-name akismet:author watermark"例：山田　太郎"] </td>
  </tr>
  <tr>
  <th><span style="display: inline-block; background: #ff4444; color:#fff; padding: 2px 5px; font-size: 10px;margin: 0 10px 5px 0;">必須</span><span style="display: inline-block; font-size: 14px; position:relative;top: 2px;">メールアドレス</span></th>
  <td>[email* your-email akismet:author_email watermark"例：×××@×××.com"]</td>
  </tr>
  <tr>
  <th><span style="display: inline-block; background: #ff4444; color:#fff; padding: 2px 5px; font-size: 10px;margin: 0 10px 5px 0;">必須</span><span style="display: inline-block; font-size: 14px; position:relative;top: 2px;">お電話番号</span></th>
  <td>[text* text-17 watermark"例：0952-60-6240"]</td>
  </tr>

  <tr>
  <th><span style="display: inline-block; background: #ff4444; color:#fff; padding: 2px 5px; font-size: 10px;margin: 0 10px 5px 0;">必須</span><span style="display: inline-block; font-size: 14px; position:relative;top: 2px;">ご予約日</span></th>
  <td>[date* booking-date date-format:mm/dd/yy placeholder"クリックして日付を選択"]</td>
  </tr>

  <tr>
  <th><span style="display: inline-block; background: #ff4444; color:#fff; padding: 2px 5px; font-size: 10px;margin: 0 10px 5px 0;">必須</span><span style="display: inline-block; font-size: 14px; position:relative;top: 2px;">時刻</span></th>
  <td>[select* booking-time include_blank "09:00～" "10:00～" "11:00～" "12:00～" "13:00～" "14:00～" "15:00～" "16:00～" "17:00～" "18:00～"]</td>
  </tr>

  <tr>
  <th><span style="display: inline-block; background: #ff4444; color:#fff; padding: 2px 5px; font-size: 10px;margin: 0 10px 5px 0;">必須</span><span style="display: inline-block; font-size: 14px; position:relative;top: 2px;">メニュー内容</span></th>
  <td>[radio radio-256 use_label_element "カット" "カラー" "パーマ" "カット＋カラー" "カット+パーマ"]</td>
  </tr>
  <tr>
  <th><span style="display: inline-block; background: #ff4444; color:#fff; padding: 2px 5px; font-size: 10px;margin: 0 10px 5px 0;">必須</span><span style="display: inline-block; font-size: 14px; position:relative;top: 2px;">メッセージ本文</span></th>
  <td class="message-100">[textarea* your-message watermark"ご相談事項や注意事項など"]</td>
  </tr>
</table>

<p style="margin-bottom: 0;" class="text-xs-center">[submit class:btn class:btn-success class:btn-lg "予約する"]</p>
<p style="color:red;font-size: 14px;">PCメール受信拒否設定しておりますとこちらからの返信が届かない場合がございます。24時間以内に返信がない場合はお手数ですがLINEよりご連絡お願いいたします。</p>

追加CSS

こちらのデザインを利用される場合は、以下のCSSをすべてコピーし、「カスタイマイズ」→「追加CSS」に貼り付けてください。

ある程度CSSの知識がある方は、ご自身でカスタムして頂いても構いません。

label{
display: block;
font-weight: normal;
}

button, html input[type=button],
input[type=reset],
input[type=submit]{
width: 100%;
margin: 0 auto;
display: block;
}

input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time]{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: rgb(85, 85, 85);
background-color: rgb(255, 255, 255);
background-image: none;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

.table tbody tr td .form-control,
.table tbody tr th .form-control,
.table td .form-control,
.table th .form-control,
.table thead tr td .form-control,
.table thead tr th .form-control,
table tbody tr td .form-control,
table tbody tr th .form-control,
table td .form-control,
table th .form-control,
table thead tr td .form-control,
table thead tr th .form-control{
max-width: 100%;
}

@media screen and (max-width: 640px) {
  .table.table-bordered.table-striped.table-contactform7 th,
  .table.sp_brake th{
  display: block !important;
  }
  .table.table-bordered.table-striped.table-contactform7 td,
  .table.sp_brake td{
  display: block !important;
  }
}

メールサンプル

メールのメッセージ本文（例）

差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:

●お名前
[your-name]

●アドレス
[your-email]

●電話番号
[text-17]

●予約希望日
[booking-date]

●予約時間
[booking-time]

●メニュー内容
[radio-256]

●メッセージ内容
[your-message]

--
このメールは 美容師WEB集客スクール DMY (https://dmy.biyoshi-academy.com) のお問い合わせフォームから送信されました

メニュー

カット（シャンプー・ブロー込み）
巻き髪仕上げは別途料金がかかります。		 ￥6,480～￥10,800
※スタイリストによって料金が異なります。
前髪カット ￥1,620
パーマ（特殊パーマは除きます） ￥7,560～￥16,200
ポイント ￥3,240～
ストレート（縮毛矯正）スタンダードコース ￥21,600～
ストレート（縮毛矯正）プレミアムコース ￥25,920～
ポイントストレート ￥6,480～
パーマオフ ￥6,480～￥12,960
エアウェーブ ￥12,960～
クリップカール ￥12,960～
デジタルパーマ ￥12,960～

HTML

<table class="table sp_brake">
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">カット（シャンプー・ブロー込み）<br>巻き髪仕上げは別途料金がかかります。</th>
<td style="text-align: right;">￥6,480～￥10,800 <br><small>※スタイリストによって料金が異なります。</small></td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">前髪カット</th>
<td style="text-align: right;">￥1,620</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">パーマ（特殊パーマは除きます）</th>
<td style="text-align: right;">￥7,560～￥16,200</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">ポイント</th>
<td style="text-align: right;">￥3,240～</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">ストレート（縮毛矯正）スタンダードコース</th>
<td style="text-align: right;">￥21,600～</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">ストレート（縮毛矯正）プレミアムコース</th>
<td style="text-align: right;">￥25,920～</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">ポイントストレート</th>
<td style="text-align: right;">￥6,480～</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">パーマオフ</th>
<td style="text-align: right;">￥6,480～￥12,960</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">エアウェーブ</th>
<td style="text-align: right;">￥12,960～</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">クリップカール</th>
<td style="text-align: right;">￥12,960～</td>
</tr>
<tr>
<th style="background-color: #F5F5F5; font-size: 14px;">デジタルパーマ</th>
<td style="text-align: right;">￥12,960～</td>
</tr>
</table>

Follow me!

カテゴリー
HP制作関連

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

HP制作関連

前の記事

HPのアニメーション設定方法
2020年10月15日
HP制作関連

次の記事

デザインパーツ②
2020年10月15日