デザインサンプル

Pocket

枠デザイン

グレー枠

グレーのわく
<div class="waku_gray">グレーのわく</div>

青枠

ブルーのわく
<div class="waku_blue">ブルーのわく</div>

グレー背景

グレーの背景
<div class="box_gray">グレーの背景</div>

赤枠

赤のわく
<div class="waku_red">赤のわく</div>

黄色の背景

黄色の背景
<div class="box_yellow">黄色の背景</div>

細めのグレー枠

細めのグレー
<div class="waku_gray1">細めのグレー</div>

青い枠で背景グレー

・SEO用記事
基本的にすべての記事はSEOを意識して作成されるべきだが、その中でも特にSEOを主目的とした記事。集客方法は様々あるが、SEOでのベース集客はサイトの費用対効果を最適化するために重要。
・ファン化記事
集めた人にサイトを認知させ、サイトのファンになってもらう記事。
・CV化記事
読者に対し、商品の購入など何かしらのActionを促す記事。
<dl class="dl_style1">
<dt>・SEO用記事</dt>
<dd>基本的にすべての記事はSEOを意識して作成されるべきだが、その中でも特にSEOを主目的とした記事。集客方法は様々あるが、SEOでのベース集客はサイトの費用対効果を最適化するために重要。</dd>
<dt>・ファン化記事</dt>
<dd>集めた人にサイトを認知させ、サイトのファンになってもらう記事。</dd>
<dt>・CV化記事</dt>
<dd>読者に対し、商品の購入など何かしらのActionを促す記事。</dd>
</dl>

青いテーブル

class=”table_blue”

左側① 右側①
左側② 右側②
<table class="table_blue">
<tr>
<th>左側①</th>
<td>右側①</td>
</tr>
<tr>
<th>左側②</th>
<td>右側②</td>
</tr>
</table>

赤いテーブル

class=”table_red”

左側① 右側①
左側② 右側②
<table class="table_red">
<tr>
<th>左側①</th>
<td>右側①</td>
</tr>
<tr>
<th>左側②</th>
<td>右側②</td>
</tr>
</table>

グレーテーブル

class=”table_gray”

左側① 右側①
左側② 右側②
<table class="table_gray">
<tr>
<th>左側①</th>
<td>右側①</td>
</tr>
<tr>
<th>左側②</th>
<td>右側②</td>
</tr>
</table>

セミナーテーブル

class=”seminar”

左側① 右側①
左側② 右側②
<table class="seminar">
<tr>
<th>左側①</th>
<td>右側①</td>
</tr>
<tr>
<th>左側②</th>
<td>右側②</td>
</tr>
</table>

ボタン

<div class="btn_blue"><a title="レポートダウンロード" href="http://promonista.com/file/report/seotrendreport_201801.pdf" onclick="ga('send', 'event', 'cv', 'article', '109seotrendreport',1);"> SEOトレンドレポートダウンロード</a></div>
Pocket