コンテンツの配置エリアについて

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

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

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

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

例:左サイドバーの場合
block2

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

例:左サイドバーの場合

<!-- コンテンツトップ
============================================= -->
<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>
<!-- /コンテンツボトム ここまで -->