共通ページのテンプレートにはコンテンツを配置できるエリアが用意されています。
各コンテンツ(売れ筋商品やバナーなど)を表示したいエリア(メイン、サイドなど)内に配置することで、簡単にページレイアウトができるようになっています。
コンテンツを配置できるエリアは以下の6カ所です。
- コンテンツトップ: ヘッダー下に表示、フルワイド(画面端まで表示)
- メイントップ: コンテンツトップの下に表示、画面幅の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>
<!-- /コンテンツボトム ここまで -->