文字の装飾

文字色を赤色に変更することができます。
文字色をオレンジ色に変更することができます。
文字色を緑色に変更することができます。
文字色を黒色に変更することができます。
文字を太文字にする
文字に黄色のマーカーをつけることができます。
文字に取り消し線を引く
文節単位での引用文がここに入ります。段落単位での引用は下の方を参照してください。

<span class="red">文字色を赤色に変更することができます。</span>
<span class="orange">文字色をオレンジ色に変更することができます。</span>
<span class="green">文字色を緑色に変更することができます。</span>
<span class="black">文字色を黒色に変更することができます。</span>
<span class="b">文字を太文字にする</span>
文字に<span class="line-yellow">黄色のマーカー</span>をつけることができます。
<span class="del">文字に取り消し線を引く</span>
<q>文節単位での引用文がここに入ります。段落単位での引用は下の方を参照してください。</q>

『文字の色の意味について』
黒の太字→ソフトな強調
赤→否定、危険
オレンジ→強調
グリーン→例示(成分名など)
青→リンク色と勘違いされるため使いません。

文字サイズ変更

文字サイズ1.2倍
文字サイズ1.3倍
文字サイズ1.4倍
文字サイズを小さく表示

<span class="f12em">文字サイズ1.2倍</span>
<span class="f13em">文字サイズ1.3倍</span>
<span class="f14em">文字サイズ1.4倍</span>
<span class="small">文字サイズを小さく表示</span>

文字の装飾を組み合わせて使用した例

文字色を赤色に太く大きく変更することができます。
文字色をオレンジ色に太く大きく変更することができます。
文字色を緑色に太く大きく変更することができます。
文字色を黒色に太く大きく変更することができます。

<span class="red b f12em">文字色を赤色に太く大きく変更することができます。</span>
<span class="orange b f12em">文字色をオレンジ色に太く大きく変更することができます。</span>
<span class="green b f12em">文字色を緑色に太く大きく変更することができます。</span>
<span class="black b f12em">文字色を黒色に太く大きく変更することができます。</span>

↑サイトに用意しているボタンからマークアップすると、これで挿入されます。

文字の前に矢印マークがつき、記事の遷移を示します。

<p class="link-next"><a href="URL">リンク先の(次の)記事はこちらへ</a></p>
<p class="link-back"><a href="URL">以前の記事はこちらへ</a></p>

文字の横位

左寄せ

中央

右寄せ

<p class="al-l">左寄せ</p>
<p class="al-c">中央</p>
<p class="al-r">右寄せ</p>

中央寄せ以外はあまり使いません。

注意書き(注釈)

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

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

リスト

順不同リスト

  • リストが入ります
  • リストが入ります
  • リストが入ります

順番があるリスト

  1. リストが入ります
  2. リストが入ります
  3. リストが入ります

チェックリスト

  • リストが入ります
  • リストが入ります
  • リストが入ります

見た目変更なしリスト

  • リストが入ります
  • リストが入ります
  • リストが入ります

番号アイコンリスト

  1. リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。
  2. リストが入ります
  3. リストが入ります
  4. リストが入ります
  5. リストが入ります
  6. リストが入ります
  7. リストが入ります
  8. リストが入ります
  9. リストが入ります
  10. リストが入ります
<ul>
	<li>リストが入ります</li>
	<li>リストが入ります</li>
	<li>リストが入ります</li>
</ul>


<ol>
	<li>リストが入ります</li>
	<li>リストが入ります</li>
	<li>リストが入ります</li>
</ol>


<ul class="check-list">
	<li>リストが入ります</li>
	<li>リストが入ります</li>
	<li>リストが入ります</li>
</ul>


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


<ol class="list_style02">
<li>リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。リストが入ります。</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
<li>リストが入ります</li>
</ol>

記述リスト

記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。
<dl class="dl_style01">
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd>
</dl>

<dl class="dl_style02">
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
</dl>


『記述リストの使い方』

別名「定義タグ」とも言います。A=Bというときに使います。 

使い方の例は以下の通り

リンゴ
赤くて甘みがある。英語で表記するとApple
スイカ
大きくて緑色で甘い。種がある。英語で表記するとWaterMelon
オレンジ
橙色で酸味がある。ビタミンCがたっぷり。英語で表記するとOrange

テーブル

標準テーブル

項目名 項目名
項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容

シンプルなテーブル

項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容
項目名が入ります 項目内容 項目内容
<table summary="ここにサマリーを記載">
<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>


<table summary="ここにサマリーを記載">
<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 class="table-scroll small">
ここにテーブルを入れます。
</div>

引用

blockquote

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

<blockquote>
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。
</blockquote>

画像や文章の引用元を示す

<a href="https://pharol.co.jp/wp-content/uploads/2018/08/logo-sumple.png"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/logo-sumple.png" alt="" width="1200" height="446" class="aligncenter size-full wp-image-224" /></a>
<p class="link-ref"><cite>引用元: <a href="https://www.google.co.jp/" target="_blank">参照記事のタイトル</a></cite></p>

2つを組み合わせたもの(文章の引用時に使います)

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

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

引用はかなり使うと思います!しっかりとマークアップ方法をチェックするように!

小さなアイコン

  • ポイント
  • 注意
  • 別ウインドウ
  • 矢印上
  • 矢印右
  • 矢印下
  • 矢印左
  • ダウンロード
  • PDF
  • ZIP
  • メール
  • ショッピングカート
  • 虫眼鏡
  • ホーム
  • フォルダ
  • 時計
  • カレンダー
  • ビル
  • マップ
  • NEW
  • 初心者マーク
<li><span class="icon_point color01"></span> ポイント</li>
<li><span class="icon_caution color01"></span> 注意</li>
<li><span class="icon_blank color01"></span> 別ウインドウ</li>
<li><span class="icon_arrow_up color01"></span> 矢印上</li>
<li><span class="icon_arrow_right color01"></span> 矢印右</li>
<li><span class="icon_arrow_down color01"></span>  矢印下</li>
<li><span class="icon_arrow_left color01"></span> 矢印左</li>
<li><span class="icon_download color01"></span> ダウンロード</li>
<li><span class="icon_pdf color01"></span> PDF</li>
<li><span class="icon_zip color01"></span> ZIP</li>
<li><span class="icon_mail color01"></span> メール</li>
<li><span class="icon_cart color01"></span> ショッピングカート</li>
<li><span class="icon_search color01"></span> 虫眼鏡</li>
<li><span class="icon_home color01"></span> ホーム</li>
<li><span class="icon_folder color01"></span> フォルダ</li>
<li><span class="icon_time color01"></span> 時計</li>
<li><span class="icon_calendar color01"></span> カレンダー</li>
<li><span class="icon_building color01"></span> ビル</li>
<li><span class="icon_map color01"></span> マップ</li>
<li><span class="icon_new color01"></span> NEW</li>
<li><span class="icon_beginner color01"></span> 初心者マーク</li>

ボタン

<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_orange"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>


<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_bluegreen"><span class="icon_arrow_s_right"></span>送信内容を確認する</a>
</div>

多段カラム(モバイル時には解除されます。)

4カラム

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

3カラム

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

2カラム

テキストが入ります。
テキストが入ります。
<h4>4カラム</h4>
<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_3of4">
テキストが入ります。
</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>


<h4>3カラム</h4>
<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>


<h4>2カラム</h4>
<div class="col2-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>

ボタンと多段カラムの組み合わせ

<div class="col2-wrap">

<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_orange"><span class="icon_arrow_s_right"></span>商品のレビュー記事</a>
</div>
</div>

<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_bluegreen"><span class="icon_arrow_s_right"></span>公式サイトはこちら</a>
</div>
</div>

</div>

Q&A

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

アコーディオン

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

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

ステップチャート

スタイル1

  1. 流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。
  2. 流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。
  3. 流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。
  4. 流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。

スタイル2

  1. 流れに関する文章が入ります。流れに関する文章が入ります。
  2. 流れに関する文章が入ります。流れに関する文章が入ります。
  3. 流れに関する文章が入ります。流れに関する文章が入ります。
  4. 流れに関する文章が入ります。流れに関する文章が入ります。
<ol class="step-chart step-chart_style01">
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
</ol>


<ol class="step-chart step-chart_style02">
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
<li>
<div class="process-box">
流れに関する文章が入ります。流れに関する文章が入ります。
</div>
</li>
</ol>

タブメニュー

  • メニュー1メニュー1メニュー1メニュー1メニュー1メニュー1
  • メニュー2
  • メニュー3
  • コンテンツ1が入ります。コンテンツ1が入ります。
  • コンテンツ2が入ります。コンテンツ2が入ります。
  • コンテンツ3が入ります。コンテンツ3が入ります。
<div class="tab-box">
	<ul class="tab-menu">
		<li class="tab-menu_select"><div><span>メニュー1メニュー1メニュー1メニュー1メニュー1メニュー1</span></div></li>
		<li class=""><div><span>メニュー2</span></div></li>
		<li class=""><div><span>メニュー3</span></div></li>
	</ul>
	<ul class="tab-conts">
		<li style="">
			コンテンツ1が入ります。コンテンツ1が入ります。
		</li>
		<li style="display: none;">
			コンテンツ2が入ります。コンテンツ2が入ります。
		</li>
		<li style="display: none;">
			コンテンツ3が入ります。コンテンツ3が入ります。
		</li>
	</ul>
</div>

枠を付ける

ここにコンテンツが入ります。

ここにコンテンツが入ります。

ここにコンテンツが入ります。

ここにコンテンツが入ります。

ここにタイトル

ここにコンテンツが入ります。

ここにタイトル

ここにコンテンツが入ります。

ここにタイトル

ここにコンテンツが入ります。

ここにタイトル

ここにコンテンツが入ります。

ここにタイトル

ここにコンテンツが入ります。


box class="box_style01"]ここにコンテンツが入ります。[/box]

box class="box_style02"]ここにコンテンツが入ります。[/box]

box class="box_style03"]ここにコンテンツが入ります。[/box]

box class="box_style04"]ここにコンテンツが入ります。[/box]

box class="box_style_blue" title="ここにタイトル"]ここにコンテンツが入ります。[/box]

box class="box_style_pink" title="ここにタイトル"]ここにコンテンツが入ります。[/box]

box class="box_style_yellow" title="ここにタイトル"]ここにコンテンツが入ります。[/box]

box class="box_style_orange" title="ここにタイトル"]ここにコンテンツが入ります。[/box]

box class="box_style_green" title="ここにタイトル"]ここにコンテンツが入ります。[/box]

↑これの先頭に[をつけてください。

お客様の声

〇〇様台北市 女性 ご職業:〇〇ご購入年:〇〇年
お客様1
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
△△様北海道 女性 ご職業:△△ご購入年:△△年
お客様2
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
□□様東京都 男性 ご職業:□□ご購入年:□□年
お客様3
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
<div class="voice-box voice_styl01">

<dl class="voice">
<dt class="voice_title">
<span class="voice_name">〇〇様</span><span class="voice_job">台北市 女性 ご職業:〇〇</span><span class="voice_career">ご購入年:〇〇年</span>
</dt>
<dd class="voice_headshot"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/voice1.png" alt="お客様1"></dd>
<dd class="voice_cont">
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
</dd>
</dl>

</div>

<div class="voice-box voice_styl02">

<dl class="voice">
<dt class="voice_title">
<span class="voice_name">△△様</span><span class="voice_job">北海道 女性 ご職業:△△</span><span class="voice_career">ご購入年:△△年</span>
</dt>
<dd class="voice_headshot"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/voice2.jpg" alt="お客様2"></dd>
<dd class="voice_cont">
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
</dd>
</dl>

</div>


<div class="voice-box voice_styl03">

<dl class="voice">
<dt class="voice_title">
<span class="voice_name">□□様</span><span class="voice_job">東京都 男性 ご職業:□□</span><span class="voice_career">ご購入年:□□年</span>
</dt>
<dd class="voice_headshot"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/voice03.png" alt="お客様3"></dd>
<dd class="voice_cont">
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
ここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入りますここにお客様のご感想が入ります。
</dd>
</dl>

</div>

商品の紹介部分の口コミの部分などにつかってください!

登場人物紹介

登場人物A
登場人物A
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物B
登場人物B
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
登場人物C
登場人物C
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
<div class="cast-box">
<div class="box_inner">
	
<dl class="cast">
<dt class="cast_name">登場人物A</dt>
<dd class="cast_headshot"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/cast01.png" alt="登場人物A"></dd>
<dd class="cast_profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

<dl class="cast">
<dt class="cast_name">登場人物B</dt>
<dd class="cast_headshot"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/cast02.png" alt="登場人物B"></dd>
<dd class="cast_profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

<dl class="cast">
<dt class="cast_name">登場人物C</dt>
<dd class="cast_headshot"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/cast03.png" alt="登場人物C"></dd>
<dd class="cast_profile">
ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。
</dd>
</dl>

</div>
</div>

あまり使いません。登場人物がある記事に使います。

口コミにはこちらは使わないでください。

ランキング

シンプルなランキング

  1. ランキング1

    項目名などが入ります

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

    項目名などが入ります

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

    項目名などが入ります

    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
<ol class="ranking-list">
<li class="ranking-list_item ranking-list_item_hasimage">
<div class="rank_thumb"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/rank01.jpg" alt="ランキング1" width="200" height="200"></div>
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>

<div class="col2-wrap">
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style02"><span class="icon_arrow_s_right"></span>商品のレビュー記事</a>
</div>
</div>
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>公式サイトはこちら</a>
</div>
</div>
 
</div>

</li>
  
<li class="ranking-list_item ranking-list_item_hasimage">
<div class="rank_thumb"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/rank02.jpg" alt="ランキング2" width="200" height="200" class="aligncenter size-full wp-image-283" /></div>
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>

<div class="col2-wrap">
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style02"><span class="icon_arrow_s_right"></span>商品のレビュー記事</a>
</div>
</div>
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>公式サイトはこちら</a>
</div>
</div>
 
</div>

</li>
  
<li class="ranking-list_item ranking-list_item_hasimage">
<div class="rank_thumb"><img src="https://pharol.co.jp/wp-content/uploads/2018/08/rank03.jpg" alt="ランキング3" width="200" height="200" class="aligncenter size-full wp-image-284" /></div>
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>

<div class="col2-wrap">
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style02"><span class="icon_arrow_s_right"></span>商品のレビュー記事</a>
</div>
</div>
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>公式サイトはこちら</a>
</div>
</div>
 
</div>

</li>

<li class="ranking-list_item ranking-list_item_hasimage">
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>


</li>

<li class="ranking-list_item ranking-list_item_hasimage">
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div>


</li>

<li class="ranking-list_item ranking-list_item_hasimage">
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
</div>


</li>

<li class="ranking-list_item ranking-list_item_hasimage">
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
</div>


</li>

<li class="ranking-list_item ranking-list_item_hasimage">
<h3 class="rank_title title_no-style">項目名などが入ります</h3>
<div class="rank_desc">
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
</div>


</li>
 
</ol>

レビューランキング

  1. 商品名が入ります(メーカー名)

    価格:
    2,000円(税込)
    容量:
    100ml
    価格 5.0
    使用感 3.5
    効果 4.0
    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

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

  2. 商品名が入ります(メーカー名)

    価格:
    2,000円(税込)
    容量:
    100ml
    価格 5.0
    使用感 3.5
    効果 4.0
    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
    管理人のレビュー

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

  3. 商品名が入ります(メーカー名)

    価格:
    2,000円(税込)
    容量:
    100ml
    価格 5.0
    使用感 3.5
    効果 4.0
    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
    管理人のレビュー

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

<ol class="ranking-list comparative-list">

<li class="ranking-list_item ranking-list_item_hasimage">

<div class="rank_thumb">
<img src="https://pharol.co.jp/wp-content/uploads/2018/08/rank01.jpg" alt="" width="330" height="330" class="aligncenter size-full wp-image-282" />
</div>

<div class="item-data_outer">
<h3 class="rank_title title_no-style">商品名が入ります(メーカー名)</h3>
<div class="item-data">
<dl>
	<dt>価格:</dt>
	<dd><span class="red f12em">2,000円</span><span class="small">(税込)</span></dd>
</dl>
<dl>
	<dt>容量:</dt>
	<dd>100ml</dd>
</dl>
</div>
<table class="review-table">
<tbody><tr>
<th>価格</th>
<td><span class="review_star star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="review_star star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="review_star star40">4.0</span></td>
</tr>
</tbody></table>

</div>

<div class="rank_desc">
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
</div>
<div class="review_desc">
<h4 class="review_desc_title title_no-style">管理人のレビュー</h4>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
</div>

<div class="col2-wrap">
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style02"><span class="icon_arrow_s_right"></span>商品のレビュー記事</a>
</div>
</div>
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>公式サイトはこちら</a>
</div>
</div>
 
</div>

</li>


<li class="ranking-list_item ranking-list_item_hasimage">
<div class="rank_thumb">
<img src="https://pharol.co.jp/wp-content/uploads/2018/08/rank02.jpg" alt="" width="330" height="330" class="aligncenter size-full wp-image-283" />
</div>

<div class="item-data_outer">
<h3 class="rank_title title_no-style">商品名が入ります(メーカー名)</h3>
<div class="item-data">
<dl>
	<dt>価格:</dt>
	<dd><span class="red f12em">2,000円</span><span class="small">(税込)</span></dd>
</dl>
<dl>
	<dt>容量:</dt>
	<dd>100ml</dd>
</dl>
</div>
<table class="review-table">
<tbody><tr>
<th>価格</th>
<td><span class="review_star star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="review_star star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="review_star star40">4.0</span></td>
</tr>
</tbody></table>
</div>

<div class="rank_desc">
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
</div>
<div class="review_desc">
<h5 class="review_desc_title title_no-style">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
</div>

<div class="col2-wrap">
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style02"><span class="icon_arrow_s_right"></span>商品のレビュー記事</a>
</div>
</div>
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>公式サイトはこちら</a>
</div>
</div>
 
</div>


</li>


<li class="ranking-list_item ranking-list_item_hasimage">
<div class="rank_thumb">
<img src="https://pharol.co.jp/wp-content/uploads/2018/08/rank03.jpg" alt="" width="330" height="330" class="aligncenter size-full wp-image-284" />
</div>

<div class="item-data_outer">
<h3 class="rank_title title_no-style">商品名が入ります(メーカー名)</h3>

<div class="item-data">
<dl>
	<dt>価格:</dt>
	<dd><span class="red f12em">2,000円</span><span class="small">(税込)</span></dd>
</dl>
<dl>
	<dt>容量:</dt>
	<dd>100ml</dd>
</dl>
</div>

<table class="review-table">
<tbody><tr>
<th>価格</th>
<td><span class="review_star star50">5.0</span></td>
</tr>
<tr>
<th>使用感</th>
<td><span class="review_star star35">3.5</span></td>
</tr>
<tr>
<th>効果</th>
<td><span class="review_star star40">4.0</span></td>
</tr>
</tbody></table>

</div>

<div class="rank_desc">
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
</div>
<div class="review_desc">
<h5 class="review_desc_title title_no-style">管理人のレビュー</h5>
管理人のレビューが入ります。管理人のレビューが入ります。
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
</div>

<div class="col2-wrap">
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style02"><span class="icon_arrow_s_right"></span>商品のレビュー記事</a>
</div>
</div>
 
<div class="col">
<div class="al-c m20">
<a href="#" class="btn dir-arw_r btn_style03"><span class="icon_arrow_s_right"></span>公式サイトはこちら</a>
</div>
</div>
 
</div>


</li>
</ol>

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします