賢威8のカスタマイズ

賢威7のカスタマイズを体系的にまとめました。
当サイトで使用している賢威7はスタンダード版です。
それぞれの項目下記にコードをつけたので、コピペして使えます。

スポンサードリンク

見出し

h2

<h2>h2</h2>

h3

<h3>h3</h3>

h4

<h4>h4</h4>
h5
<h5>h5</h5>

賢威6.2まではサイトタイトルがh1、記事タイトルがh2でしたが
賢威7からは記事タイトルがh1になったので、本文見出しはh2から使える事になりました。

テキスト系

文字色を変える

文字色を赤色

<span class="red">文字色を赤色</span>

文字にマーカーをひく

黄色の背景色

<span class="box-yellow">黄色の背景色</span>

リスト表示

ulリスト

  • リストが入ります。
  • リストが入ります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。
<ul>
<li>リストが入ります。</li>
<li>リストが入ります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。</li>
</ul>

olリスト

  1. リストが入ります。
  2. リストが入ります。
<ol>
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ol>

横並び

  • リストが入ります。
  • リストが入ります。
<ul class="inline">
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ul>

注意書き

※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。

<p class="note"><small>※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。</small></p>

テーブル

ふつうのテーブル

項目名項目名
項目名が入ります項目内容項目内容
項目名が入ります項目内容項目内容
項目名が入ります項目内容項目内容
<div class="table-scroll">
<table style="width: 500px;">
<thead>
<tr>
<th></th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>
</div>

比較用のテーブル

項目内容項目内容項目内容
項目名が入ります項目内容項目内容項目内容
項目名が入ります項目内容項目内容項目内容
項目名が入ります項目内容項目内容項目内容
項目名が入ります項目内容項目内容項目内容
<table class="table-comparison">
<thead>
<tr>
 
<th class="w25"></th>
<th class="w25">項目内容</th>
<th class="highlight w25"><span class="f12em">項目内容</span></th>
<th class="w25">項目内容</th>
 
</tr>
</thead>
<tfoot>
<tr>
 
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
 
</tr>
</tfoot>
<tbody>
<tr>
 
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
 
</tr>
<tr>
 
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
 
</tr>
<tr>
 
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tbody>
 
</table>

引用

ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。

<blockquote>
<p>ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。<br>
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。<br>
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。<br>
ここに引用文が入ります。ここに引用文が入ります。</p>
<p class="link-ref"><cite>引用元: <a class="outbound" href="https://www.google.co.jp/" target="_blank">参照記事のタイトル</a></cite></p>
</blockquote>

チェックリスト

小さめのチェックリスト

  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
<ul class="check-list">
	<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li>チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
	<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

大きめのチェックリスト

  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
<ul class="check-list-l">
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

画像アイコン呼び出し

小アイコン

ポイント

<p class="icon-point">ポイント</p>

注意

<p class="icon-caution">注意</p>

NEW

<p class="icon-new">NEW</p>

初心者

<p class="icon-wakaba">初心者</p>

別ウインドウ

<p class="icon-blank">別ウインドウ</p>

矢印上

<p class="icon-arrow-t">矢印上</p>

矢印右

<p class="icon-arrow-r">矢印右</p>

矢印下

<p class="icon-arrow-b">矢印下</p>

矢印左

<p class="icon-arrow-l">矢印左</p>

ダウンロード

<p class="icon-dl">ダウンロード</p>

PDF

<p class="icon-pdf">PDF</p>

ZIP

<p class="icon-zip">ZIP</p>

メール

<p class="icon-mail">メール</p>

ショッピングカート

<p class="icon-cart">ショッピングカート</p>
<p class="icon-search">虫眼鏡</p>

ホーム

<p class="icon-home">ホーム</p>

フォルダ

<p class="icon-folder">フォルダ</p>

時計

<p class="icon-time">時計</p>

カレンダー

<p class="icon-calendar">カレンダー</p>

ビル

<p class="icon-building">ビル</p>

マップ

<p class="icon-map">マップ</p>

大アイコン

ポイント

<p class="icon-point-l">ポイント</p>

注意

<p class="icon-caution-l">注意</p>

NEW

<p class="icon-new-l">NEW</p>

初心者

<p class="icon-wakaba-l">初心者</p>

別ウインドウ

<p class="icon-blank-l">別ウインドウ</p>

矢印上

<p class="icon-arrow-t-l">矢印上</p>

矢印右

<p class="icon-arrow-r-l">矢印右</p>

矢印下

<p class="icon-arrow-b-l">矢印下</p>

矢印左

<p class="icon-arrow-l-l">矢印左</p>

ダウンロード

<p class="icon-dl-l">ダウンロード</p>

PDF

<p class="icon-pdf-l">PDF</p>

ZIP

<p class="icon-zip-l">ZIP</p>

メール

<p class="icon-mail-l">メール</p>

ショッピングカート

<p class="icon-cart-l">ショッピングカート</p>

虫眼鏡

<p class="icon-search-l">虫眼鏡</p>

ホーム

<p class="icon-home-l">ホーム</p>

フォルダ

<p class="icon-folder-l">フォルダ</p>

時計

<p class="icon-time-l">時計</p>

カレンダー

<p class="icon-calendar-l">カレンダー</p>

ビル

<p class="icon-building-l">ビル</p>

マップ

<p class="icon-map-l">マップ</p>

コンバージョンボタン

<div class="al-c m20">
<a href="#" class="btn btn-green"><span class="">公式サイトはコチラ</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-blue"><span class="">公式サイトはコチラ</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-orange"><span class="">公式サイトはコチラ</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-red"><span class="">公式サイトはコチラ</span></a>
</div>

透過ボックス

サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。

<div class="transparent-panel-wrap">
<div class="transparent-panel">
<p>サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。</p>
</div>
</div>

ランキング表示

  1. 項目名などが入ります

    keni

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  2. 項目名などが入ります

    keni

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。

  3. 項目名などが入ります

<ol class="ranking-list ranking-list01">
 	<li class="rank01">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="keni" width="200" height="200" /></div>
<p class="rank-desc"><span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。</p>
</li>
 	<li class="rank02">
<h4 class="rank-title">項目名などが入ります</h4>
<div class="rank-thumb"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="keni" width="200" height="200" /></div>
<p class="rank-desc"><span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。<span class="wp_keywordlink_affiliate"><a title="View all posts in ランキング" target="_blank">ランキング</a></span>に関する説明文が入ります。</p>
</li>
 	<li class="rank10">
<p class="rank-title">項目名などが入ります</p>
</li>
</ol>

商品レビュー

  1. 商品1

    項目名などが入ります

    価格5.0
    使用感3.5
    効果4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. 商品2

    項目名などが入ります

    価格5.0
    使用感3.5
    効果4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. 商品3

    項目名などが入ります

    価格5.0
    使用感3.5
    効果4.0
    価格:
    2,000円(税込)
    容量:
    100ml

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

<ol class="ranking-list comparative-list02">
 
<li class="rank01 on-image">
<div class="rank-thumb"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="商品1" width="330" height="248"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<table class="review-table">
<tr>
<th class="w40">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table>
<div class="item-data">
<dl>
 <dt>価格:</dt>
 <dd><span class="red f12em">2,000円</span><small>(税込)</small></dd>
</dl>
<dl>
 <dt>容量:</dt>
 <dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</li>
 
<li class="rank02 on-image">
<div class="rank-thumb"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="商品2" width="330" height="248"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<table class="review-table">
<tr>
<th class="w40">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table>
<div class="item-data">
<dl>
 <dt>価格:</dt>
 <dd><span class="red f12em">2,000円</span><small>(税込)</small></dd>
</dl>
<dl>
 <dt>容量:</dt>
 <dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</li>
 
<li class="rank03 on-image">
<div class="rank-thumb"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="商品3" width="330" height="248"></div>
<h4 class="rank-title">項目名などが入ります</h4>
<table class="review-table">
<tr>
<th class="w40">価格</th>
<td><span class="star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="star40">4.0</span></td>
</tr>
</table>
<div class="item-data">
<dl>
 <dt>価格:</dt>
 <dd><span class="red f12em">2,000円</span><small>(税込)</small></dd>
</dl>
<dl>
 <dt>容量:</dt>
 <dd>100ml</dd>
</dl>
</div>
<div class="rank-desc">
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
<p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p>
</div>
<div class="review-desc">
<h5 class="review-desc-title">管理人のレビュー</h5>
<p>管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p>
</div>
<p class="al-r"><a class="btn btn-detail" href="#"><span>商品詳細を見る</span></a></p>
</li>
 
</ol>

多段カラム

テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
テキストが入ります。
<div class="col4-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
<div class="col4-wrap">
<div class="col col_2of4">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
<div class="col4-wrap">
<div class="col col_3of4">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
 
<div class="col3-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
<div class="col3-wrap">
<div class="col col_2of3">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>
 
<div class="col2-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>

画像とテキスト

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

<div class="col-wrap col3-wrap col-onimage">
<div class="col m20-b border">
<a href="#">
<img class="w100" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="お客様4" width="242" height="176">
</a>
<p class="text-onimage"><a href="#">テキスト</a></p>
</div>
<div class="col m20-b border">
<a href="#">
<img class="w100" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="お客様5" width="242" height="176">
</a>
<p class="text-onimage"><a href="#">テキスト</a></p>
</div>
<div class="col m20-b border">
<a href="#">
<img class="w100" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="お客様6" width="242" height="176">
</a>
<p class="text-onimage"><a href="#">テキスト</a></p>
</div>
</div>
  
  
<div class="col-wrap col3-wrap col-onimage02">
<div class="col m20-b border" style="background-image: url(http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>
<div class="col m20-b border" style="background-image: url(http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>
<div class="col m20-b border" style="background-image: url(http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png);">
<a href="./customer/">
<p class="text-onimage">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</a>
</div>
</div>

Q&A

ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
<dl class="qa-list">
<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
  
<dt>ここには質問文が入ります。</dt>
<dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>

フロー図

  1. 手続きの流れに関する文章が入ります

    流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

  2. 手続きの流れに関する文章が入ります

    流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。

  3. 手続きの流れに関する文章が入ります

<ol class="flow-chart">
<li>
<div class="process-box rc12">
<p class="f12em b m0-b">手続きの流れに関する文章が入ります</p>
<p class="m0-b">流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p>
</div>
</li>
<li>
<div class="process-box rc12">
<p class="f12em b m0-b">手続きの流れに関する文章が入ります</p>
<p class="m0-b">流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。流れに関する詳細文章が入ります。</p>
</div>
</li>
<li>
<div class="process-box rc12 end">
<p class="f12em b m0-b">手続きの流れに関する文章が入ります</p>
</div>
</li>
</ol>

画像加工

k
ノーマル
k
影付き
k
影付き2
k
囲み線(1px)
k
角丸
k
k
写真風
<div class="col2-wrap al-c">
<div class="col">
<figure>
<img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="k" width="300" height="300">
<figcaption class="al-c">ノーマル</figcaption>
</figure>
</div>
<div class="col" style="border:0;">
<figure>
<img class="shadow" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="k" width="300" height="300">
<figcaption class="al-c">影付き</figcaption>
</figure>
</div>
</div>
  
<div class="col2-wrap al-c">
<div class="col" style="border:0;">
<figure>
<img class="shadow02" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="k" width="300" height="300">
<figcaption class="al-c">影付き2</figcaption>
</figure>
</div>
<div class="col">
<figure>
<img class="outline" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="k" width="300" height="300">
<figcaption class="al-c">囲み線(1px)</figcaption>
</figure>
</div>
</div>
  
<div class="col2-wrap al-c">
<div class="col" style="border:0;">
<figure>
<img class="rc12" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="k" width="300" height="300">
<figcaption class="al-c">角丸</figcaption>
</figure> 
</div>
<div class="col">
<figure>
<img class="circle" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="k" width="300" height="300">
<figcaption class="al-c">円</figcaption>
</figure>
</div>
</div>
  
<div class="col2-wrap al-c">
<div class="col" style="border:0;">
<figure>
<img class="frame" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" alt="k" width="300" height="300">
<figcaption class="al-c">写真風</figcaption>
</figure>
</div>
</div>

人物紹介

登場人物A
登場人物A
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物B
登場人物B
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物C
登場人物C
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
<div class="cast-box">
  
<dl class="cast">
<dt class="cast-name">登場人物A</dt>
<dd class="cast-headshot"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" width="100" height="100" alt="登場人物A"></dd>
<dd class="cast-profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>
  
<dl class="cast">
<dt class="cast-name">登場人物B</dt>
<dd class="cast-headshot"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" width="100" height="100" alt="登場人物B"></dd>
<dd class="cast-profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>
  
<dl class="cast">
<dt class="cast-name">登場人物C</dt>
<dd class="cast-headshot"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" width="100" height="100" alt="登場人物C"></dd>
<dd class="cast-profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>
</div>

吹き出し

登場人物A登場人物A

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

登場人物B登場人物B

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

<div class="chat-l">
<div class="talker"><b><img class="circle" alt="登場人物A" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png">登場人物A</b></div>
<div class="bubble-wrap">
<div class="bubble rc8">
<div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div>
</div>
</div>
</div>
<div class="chat-r">
<div class="talker"><b><img class="circle" alt="登場人物B" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png">登場人物B</b></div>
<div class="bubble-wrap">
<div class="bubble rc8"><div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div>
</div>
</div>
登場人物A登場人物A

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

登場人物B登場人物B

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

<div class="talker"><b><img alt="登場人物A" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png">登場人物A</b></div>
<div class="bubble-wrap">
<div class="bubble">
<div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div>
</div>
</div>
</div>
<div class="chat-r">
<div class="talker"><b><img alt="登場人物B" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png">登場人物B</b></div>
<div class="bubble-wrap">
<div class="bubble"><div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div>
</div>
</div>
登場人物A

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

登場人物B

ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。

<div class="chat-l">
<div class="talker"><b><img alt="登場人物A" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png"></b></div>
<div class="bubble-wrap">
<div class="bubble">
<div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div>
</div>
</div>
</div>
<div class="chat-r">
<div class="talker"><b><img alt="登場人物B" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png"></b></div>
<div class="bubble-wrap">
<div class="bubble"><div class="bubble-in">
<p>ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。ここにセリフが入ります。</p>
</div></div>
</div>
</div>

お客様の声

お客様1

ご職業:ネットショップ制作 ご購入年:2013年

ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。

お客様2

ご職業:ネットショップ制作 ご購入年:2013年

ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。

<div class="voice-box rc8">
<div class="voice">
<div class="voice-headshot left"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" width="100" height="100" alt="お客様1"></div>
<div class="voice-content">
<p class="b">ご職業:ネットショップ制作 ご購入年:2013年</p>
<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。</p>
</div>
</div>
</div>
 
<div class="voice-box rc8">
<div class="voice">
<div class="voice-headshot right"><img src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png" width="100" height="100" alt="お客様2"></div>
<div class="voice-content">
<p class="b">ご職業:ネットショップ制作 ご購入年:2013年</p>
<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。</p>
</div>
</div>
</div>

吹き出し付き

登場人物3登場人物3

ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入ります

ご職業:ネットショップ制作 ご購入年:2013年

登場人物4登場人物4

ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入ります

ご職業:ネットショップ制作 ご購入年:2013年

<div class="chat-l">
<div class="talker"><b><img class="circle" alt="登場人物3" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png">登場人物3</b></div>
<div class="bubble-wrap">
<div class="bubble rc8 m10-b">
<div class="bubble-in b-arw20">
<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入ります</p>
</div>
</div>
<p class="al-r fl-c">ご職業:ネットショップ制作 ご購入年:2013年</p>
</div>
</div>
 
<div class="chat-r">
<div class="talker"><b><img class="circle" alt="登場人物4" src="http://3bice.com/wp-content/uploads/2016/09/apple-touch-icon.png">登場人物4</b></div>
<div class="bubble-wrap">
<div class="bubble rc8 m10-b">
<div class="bubble-in b-arw20">
<p>ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。<br>
ここにお客様のご感想が入りますここにお客様のご感想が入ります</p>
</div>
</div>
<p class="fl-c">ご職業:ネットショップ制作 ご購入年:2013年</p>
</div>
</div>