デザイン

賢威7のテンプレートを利用してアフィリエイトサイトを構築する際の応用例を紹介します。標準のCSSを少しカスタマイズして応用する方法になります。

記事のレイアウトを活用する方法をまとめています。アフィリエイトサイトなどを構築する際に参考にしてください。

この記事は定期的に応用例を追加する予定です。


記事レイアウト

1カラムの記事にサブメニューを表示する

1カラムの記事レイアウトで右側にサブメニューを表示する応用例です。

固定ページまたはランディングページを利用する場合、記事のレイアウトを1カラムに設定した上で、その中にカラムを分割して利用すると様々なレイアウトのページを作成できます。

右側のサブメニューは「共通コンテンツ」機能を利用すると効率的にパーツを管理できます。

利点
  1. 1カラムにサブメニューを表示できる。
  2. 特集記事を階層的に作る際に役立つ。
  3. ブログ読者はサブメニューを利用して記事を順番に読める。
レイアウト見本

アイキャッチ画像

記事本文エリア
右側マージン60px
右側サブメニュー
(共通コンテンツ)

<p class="al-c">アイキャッチ画像</p>
<div class="col4-wrap">
<div class="col col_3of4 m0-l">
<div class="m60-r">
<!-- Main Area start -->

記事本文

<!-- Main Area end -->
</div>
</div>
<div class="col m0-l">

共通コンテンツ

</div>
</div>
<h4 class="m10-t">サブメニュー</h4>
<ul class="m20-l">
<li><a href="#">特集 TOP</a></li>
<li>分類</li>
<li style="list-style-type: none">
<ul class="m20-l">
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
</ul>
</li>
<li>分類</li>
<li style="list-style-type: none">
<ul class="m20-l">
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
</ul>
</li>
<li>分類</li>
<li style="list-style-type: none">
<ul class="m20-l">
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
<li class="small"><a href="#">特集ページ</a></li>
</ul>
</li>
</ul>
参考 左側サブメニュー

アイキャッチ画像

左側サブメニュー
(共通コンテンツ)
記事本文エリア
左側マージン60px

<p class="al-c">アイキャッチ画像</p>
<div class="col4-wrap">
<div class="col m0-r">

共通コンテンツ

</div>
<div class="col col_3of4 m0-r">
<div class="m60-l">
<!-- Main Area start -->

記事本文

<!-- Main Area end -->
</div>
</div>
</div>

リストの目次

2段組のリストを目次として利用する

1カラムの記事レイアウトを2分割して、2段組のリストを目次として利用する応用例です。
特集ページの目次の役割として活用できます。

レイアウト見本

<div class="col2-wrap">
<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>
</div>

<div class="col2-wrap">
<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>
</div>

3段組のリストを目次として利用する

1カラムの記事レイアウトを3分割して、3段組のリストを目次として利用する応用例です。
特集ページの目次の役割として活用できます。

レイアウト見本

<div class="col3-wrap">

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

</div>

<div class="col3-wrap">

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

<div class="col p40-r">
<h3>見出し</h3>
<ul>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
<li><a href="#">特集ページ</a></li>
</ul>
</div>

</div>

以上