CS-Cartのページレイアウトは「グリッド」と「ブロック」で構成されています。
グリッド :
ブロックを配置する「枠」のようなもの。横幅を1～16の間で指定できます。（16が最大）
グリッドの中に子要素となるグリッドを配置することもできます。
ブロック :
ショップページに表示する具体的な内容を定義したもの。
「ショップロゴ」や「検索バー」のように固定的な内容を表示するブロックに加え、管理者が表示内容を自由に定義できる「HTMLブロック」などがあります。
グリッドとブロックを組み合わせることにより、複雑なページレイアウトも簡単に実現できます。
本記事ではトップページを2カラムに変更する方法を説明します。
STEP01.
管理画面にログインし、画面右上のメニューから
デザイン -> レイアウト
に移動します。
STEP02.
トップページ
タブをクリックし、トップページのレイアウトページに移動します。
STEP03.
変更前の状態のレイアウトです。グリッド幅に最大値である「16」が指定されています。
そのため、トップページ画面は以下のように1カラム構成となっています。
STEP04.
グリッドを追加してみましょう。
【コンテンツ】の左下にカーソルを当てるとメニューが表示されます。左端の【＋】マークをクリックし、グリッドの追加画面を開きます。
横幅を指定します。
今回は左4：右12のレイアウトにします。横幅を4とします。
同様に、右カラムとなる横幅12のグリッドも作成します。
グリッドが追加されました。
STEP05.
グリッドの中にブロックを配置します。
メインとなる横幅12のグリッドには、現在配置されているブロックを移動させ、サイドバーとなる横幅4のグリッドには新しいブロックを配置しましょう。
ブロックはドラッグ＆ドロップで移動ができます。
続いて、新しいブロックを追加します。
追加した横幅4のブロックの左下にカーソルを当てるとメニューが表示されます。左端の【＋】マークをクリックし、ブロックの追加画面を開きます。
使用できるブロックの一覧画面が開きます。
追加したいブロックを選択しましょう。
この例では【最近見た商品】を追加します。
ブロックが追加されました。
ショップ画面を確認すると、以下のように表示されます。
