CS-Cartのレイアウトについて

デザイン

CS-Cartのレイアウトは、グリッドとブロックで構成されています。

「グリッド」はブロックを配置する「枠」のようなもので、横幅を1～16の数の間で指定できます。
「ブロック」は、ブロックテンプレートとして作成されている「ロゴ」や「お知らせ」など、固定的な内容を表示するブロックに加えてサイトの管理者が管理画面から表示内容を自由に入力できる「HTMLブロック」「Smarty対応HTMLブロック」などがあります。

グリッド・ブロックについては、管理画面 → デザイン → レイアウト画面上でドラッグアンドドロップするだけで、グリッド・ブロックの位置を変更することが出来ます。(グリッドの位置変更に関しては、同じコンテナ内でのみ行えます。)
※CS-Cartのレイアウトグリッドは、CSSフレームワークである「Bootstrap 2.3」に準拠しています。Bootstrapについての詳しい情報はBootstrap公式サイトをご確認ください。

レイアウトのプロパティについて

上記で、「グリッド」は1〜16の数の間で横幅を指定できると書きましたが、このグリッドの幅の最大値は、管理画面から変更することが可能です。その他にもグリッドレイアウトの横幅を固定にするのか、可変にするのか、全幅にするのか。また特定のレイアウトの横幅を指定している時のみ、横幅の最大・最小幅(px)の設定をおこなうことも可能です。

管理画面 → デザイン → レイアウト画面右側にある「レイアウトの切り替え」項目の「メイン」にカーソルを重ねてください。そうすると、歯車マークが出てきます。この歯車マークをクリックすると、メニューが表示されるのでその中から「プロパティ」を選択してください。

そうしますと上記のようにプロパティの設定画面が表示されます。次は、このプロパティ内で設定できる各項目について説明していきます。

プロパティ：グリッド数について

「グリッド数」の指定については、12と16のどちらかを選択する形になっています。このグリッド数というのは、グリッドの幅の最大値を指定する項目となっています。デフォルトではグリッド数は「16」に設定してありますが、12と16。ではどういった場合に「12」に設定をしたほうがいいのか、例を一つあげてみます。

上図のようにサイトのレイアウト内に3カラムで構成されている箇所がある場合。且つ、その3カラムが「商品ブロック」ではなく別の要素である場合には、グリッド数を12にしたほうが何かと便利です。

レイアウトを構成して行く際に土台となるのがグリッドなのですが、例えばこのグリッドで3カラムを作ろうとした場合にグリッド数が16だと、

16は3では割り切れないため、上図のように「余り」が発生してしまいます。

では、グリッド数が「12」の場合はどうでしょう。12は3で割り切れるので、

このように、余りが発生することなくぴったりはまります。

グリッド数を「16」に設定していると、細かく横幅の指定がおこなえるので便利な面ももちろんありますが、サイトを構成しているカラム数が割り切れない数だった場合には注意が必要です。

また途中までグリッド数を「16」でレイアウトを作り込んでいって、途中で「12」に変更してしまうとレイアウトが崩れてしまいます。12以上で指定していた箇所を改めて全て指定し直さなければいけなくなるので注意が必要です。CS-Cartでサイトを構築する最初の段階でレイアウトのグリッド数を12にするのか16にするのか、しっかり考えてから作り始める必要があります。

プロパティ：グリッドレイアウトの横幅について

「グリッドレイアウトの横幅」の指定については、
・固定幅
・可変幅 (デフォルト値)
・全幅表示
の3種類から選択することができるようになっています。

固定幅について

「固定幅」に関しては設定するとその名の通り幅が固定されるレイアウト、ではなく「最大幅」「最小幅」が設定されなくなるレイアウトになります。デフォルトで選択されている「可変幅」では幅の最大値・最小値を設定することができますが、固定幅にすると最大・最小幅は設定することができなくなります。

「固定幅」設定時の最大幅は「1175px」で固定となり、それ以上・以下に設定することはできません。なので幅を自由に指定したいという場合には「可変幅」を選択する必要があります。

可変幅について

この「可変幅」については、CS-Cartのインストール時、デフォルトの状態で設定されているものとなります。可変幅に設定すると、幅の最大・最小幅を設定することができるようになります。

全幅表示について

「全幅表示」については、設定をするとサイト幅がブラウザ幅100%になります。フルスクリーンのサイトを作るには重宝する設定です。「全幅表示」に設定をすると、幅の最大・最小幅は設定できません。