共通ページのテンプレートにはコンテンツを配置できるエリアが用意されています。

各コンテンツ（売れ筋商品やバナーなど）を表示したいエリア（メイン、サイドなど）内に配置することで、簡単にページレイアウトができるようになっています。

コンテンツを配置できるエリアは以下の６カ所です。

• コンテンツトップ: ヘッダー下に表示、フルワイド（画面端まで表示）
• メイントップ: コンテンツトップの下に表示、画面幅の90%で中央に配置
• メイン: メイントップの下に表示
• サイドバー: メインの隣に表示
• メインボトム: コンテンツボトムの上に表示、画面幅の90%で中央に表示
• コンテンツボトム: フッターの上に表示、フルワイド（画面端まで表示）

例：左サイドバーの場合

コードの貼付け場所は共通ページ内のコメントで以下の例のようにエリア名を記述しています。

例：左サイドバーの場合

<!-- コンテンツトップ
============================================= -->
<div class="ui-content-top">

</div>
<!-- /コンテンツトップ ここまで -->

<div class="container">
<div class="inner">

<!-- メイントップ
============================================= -->
<div class="ui-main-top">

</div>
<!-- /メイントップ ここまで -->

<div class="row">

<!-- メイン
============================================= -->
<div class="ui-main col col-lg-9 col-sm-12 col-xs-12 col-md-push-3">

</div>
<!-- /メイン ここまで -->

<!-- 左サイドバー
============================================= -->
<div class="ui-side col col-lg-3 col-sm-12 col-xs-12 col-md-pull-9">

</div>
<!-- /左サイドバー ここまで -->

</div><!-- /row -->

<!-- メインボトム
============================================= -->
<div class="ui-main-bottom">

</div>
<!-- /メインボトム ここまで -->

</div>
</div><!-- /container -->

<!-- コンテンツボトム
============================================= -->
<div class="ui-content-bottom">

</div>
<!-- /コンテンツボトム ここまで -->