よくある質問: デザイン
レイアウト チュートリアル(CS-Cart3 ブロックマネージャー)
投稿者: 有水 孝美 on 2012年09月11日 07:40 PM

このチュートリアルでは、CS-Cart3.xにおいて基本的なページレイアウトの作成方法を説明します。

まず最初にショップの管理パネルにログインし、「デザイン>ブロック」に移動してください。
ブロックマネージャーに「デフォルト」ロケーションが表示されています。

『ロケーションの追加』ボタンをクリックしてください:

「ロケーションの追加」ダイアログが表示されます。(いくつかの必須項目があります)

『ディスパッチ』は特定の場所を処理するコントローラー(オプションでmodおよびアクション)を定義します。
(今回はレイアウトに専念するために、あらかじめ定義されたディスパッチを使用します。)

ドロップダウンメニューから『トップページ』を選択してください。
ディスパッチに「index」がセットされました。

これは、ブラウザからアクセスした次のURLを表示したときのロケーションを意味します:

http://yourshop.jp/index.php?dispatch=index

このURLにアクセスすることでいつでもロケーションのレイアウトを確認できます。

『名前』に「サンドボックス」と入力してください。
他の項目は空のまま「保存」をクリックしてください。


追加したロケーション(サンドボックス)が編集できる状態で表示されています。
(追加したロケーションはこのチュートリアルに最適なように空白状態となっています)


上下のコンテナ(「トップ」と「ボトム」)は操作できません。特定のロケーションで上下のコンテナを変更することは出来ませんので注意してください。
これはロケーションが「デフォルト」としてチェックされていないためです。

全てのロケーションはデフォルトのロケーションからトップとボトムコンテナの内容を継承します。
全てのロケーションはデフォルトとして設定することが出来ます。

★グリッド

ページのレイアウトは、グリッドの設定から始めます。
「グリッド」は固定幅で、ページ構造を定義します。

例として「Amazon.com」のようなセンターコンテナのレイアウトを作成してみます。
下の図は、Amazonのメインページのセンター部分は(960gsの原理では)12列で構成されていることが分かります。

基本的に2グリッド(カラム)構成で十分でしょう。
一つはメインコンテンツ(8グリッド)
もう一つは、広告や特別オファーを表示するサイドバー(2グリッド)

コンテナはデフォルトで16に分割されていますので「センター」コンテナの左下にある
『コンテナオプション』アイコンをクリックして『横幅』を16から12に変更して保存ボタンを押してください。

さらに先ほどの「コンテナオプション」アイコンの左側の【+】アイコンをクリックしてグリッドを追加していきます。
「横幅」に8を選択してください。残りのオプションはそのままで保存をクリックします。

幅8(グリッド)の新しいグリッドがワークスペースに表示されます。

二つ目のグリッドも同じよう作成してください。この時、横幅に4を設定するので追加した二つのグリッドは完全にスペースをカバーします。(8+4=12)


これでグリッドの説明はおしまい!簡単だったでしょ?

ブラウザで「http://yourshop.jp/index.php?dispatch=index」を表示してみましょう。
上下のコンテナはデフォルトから継承されていますが、コンテンツを定義していないのでセンター部分は空白のはずです。

ブロックを配置すればこれらにコンテンツを表示することが出来ます。

★ブロック

上の図のAmazonのページにあるのはわずか4種類のブロックです。

・商品ブロック(ベストセラーや、おすすめ商品など)
・カテゴリブロック(ブランドや種類別のリスト)
・バナーブロック(右側上部のバナー)
・HTMLブロック(複数のリンクを持つKindleの広告のような複雑な構造)

最初のグリッド(メインとなる横幅8のグリッド)にある【+】アイコンをクリックして『ブロックの追加』を選択します:



最初のHTMLブロックを作成してみましょう。
「ブロックの追加」ダイアログの『ブロックの追加』タブの中にHTMLブロックはあります。
このHTMLブロックはHTMLを直接記述することが出来るブロックです。

「ブロックの追加:HTMLブロック」ダイアログが表示されるので『一般』タブでこのブロックに任意の名前を付けてください。
さらに隣の『コンテンツ』タブで必要なHTMLコードを書いてコンテンツを作成してください。
保存をクリックするとこのブロックが最初のグリッドに表示されます。

さらに別のブロックを追加するにはもう一度【+】アイコンをクリックします。

次はベストセラー商品を横に4つ並ばせたいので、「商品」ブロックを追加します。(ベストセラーアドオンがインストールされていることを確認してください)
他と同様に「一般」タブで名前を付けます。(例:売れ筋商品)テンプレートは「グリッド」を選択してください。
『基本設定』リンクをクリックすると詳細設定が出来るので『一覧のカラム数』に4を入力してください。
さらに「コンテンツ」タブをクリックし『表示内容』は「ベストセラー」、上限は4を設定してください。

サイドバーとして使用するグリッドの【+】アイコンをクリックして「バナー」ブロックを追加してください。
バナーブロックは『コンテンツ』タブで表示形式を選択できるので、ここでは「手動」を選択して『+バナーの追加』リンクをクリックして
任意のバナーを追加してください。(バナーはあらかじめ登録しておく必要があります)

最後にサイドバーに電化製品の「カテゴリーブロック」を追加します。
再び、このグリッドの【+】アイコンをクリックし「カテゴリー」ブロックを選択します。
このように適切なテンプレートを選択し、グリッドに合わせたブロックでアイテムを並べていくことがコツです。

「ブロックの追加:カテゴリー」ダイアログが表示されるのでここでは
一般タブで『テンプレート』に「マルチカラム」を選択し、基本設定リンクをクリックして
詳細を表示して『一覧のカラム数』に「2」を設定してください。

次にコンテンツタブでは、『表示内容』に「ダイナミックツリー」を選択してください。
親カテゴリーには【PC・電化製品】を選択してください。

ブラウザで「http://yourshop.jp/index.php?dispatch=index」を表示してみましょう。
以下の図のようになっていますか?

このようにCS-Cart3ではページレイアウトが驚くほど簡単で直感的になりました!
レイアウトを定義し、複数のブロックを配置するだけでページが簡単に作れます。
色々なレイアウトにチャレンジしてください!

(0 投票する)
参考になった
参考にならなかった

コメント (0)
コメントの新規投稿
 
 
お名前:
メールアドレス:
コメント: