CS-Cart3のWebデザイナー向けテンプレート作成講座「市販のテンプレート構造を見てみよう！」に参加しました

この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

INDEX

1. CS-Cartについて
2. 今回の勉強会について
3. 市販のデザインテンプレート
4. 標準のテンプレート「ベーシック」
5. オリジナルテンプレートを作るのって面倒くさい？
6. オリジナルテンプレートのアップロード場所
7. スキンセレクタで作成したオリジナルテンプレートに切り替えると
8. 実際に作ってみよう！
9. CS-Cartのスタイルシート
10. 独自のCSSの読み込み方
11. パッケージング
12. ブロックをエクスポート
13. 勉強会の様子
14. まとめ

1. CS-Cartについて

CS-Cartについては、以前当ブログに記事を書いておりますので良ければこちらもご覧ください。

2. 今回の勉強会について

CS-Cartマーケットで販売されております、CS-Cart3向けのデザインテンプレートの構造を見ながら、テンプレート制作の方法を学ぶといった趣旨でした。

当日お話頂いた内容は以下の通り。

市販テンプレートの中身
CS-Cartのテンプレート構造
実際に作ってみよう！
市販テンプレートのインストール方法
パッケージング

今回もCS-Cartを優しく教えて下さったのは、フロッグマンオフィス代表の吉浦さん。

電子書籍サービスHonYeah!

フロッグマンオフィスさんと言えば、最近CS-Cartを使った電子書籍サービスを公開されましたね！

HonYeah! : 印税率80%以上の電子書籍販売プラットフォーム

3. 市販のテンプレート

先ずはCS-Cartマーケットに、どんなデザインテンプレートがあるか見てみましょう。

アパレル

トイストア

ファッション

ファニチャーストア

ペットショップ

ヘルス

スキューバ

ウォッチ

バッグショップ

テクノロジーストア

4. 標準のテンプレート「ベーシック」

ベーシック

5. オリジナルテンプレートを作るのって面倒くさい？

ベーシックと市販のテンプレートで見た目が随分違います。

ではオリジナルテンプレートを作るからと言ってテンプレートファイルを沢山用意する必要があるのかというとそうではなく、実は市販のテンプレートも部品となるテンプレートファイル（.tplファイル）はなんとたったの数個だったりします。

ではどのように作成するかというと、やはりCSSが重要になってきます。

6. オリジナルテンプレートのアップロード場所

作成したオリジナルテンプレートは [CS-Cartのインストールディレクトリ]/var/skins_repository にアップロードします。

フリー版のディレクトリ構造を覗いてみると標準テンプレートの「basic」があります。

7. スキンセレクタで作成したオリジナルテンプレートに切り替えると

var/skins_repository/[作成したオリジナルテンプレートのフォルダ名] から skins/[作成したオリジナルテンプレートのフォルダ名] にファイルがコピーされます。

この時になんと足りないファイルは標準テンプレートの「basic」の var/skins_repository/basic からコピーして skins/[作成したオリジナルテンプレートのフォルダ名]配下に配置してくれます。

まとめると

改造したいもの/新たに追加したいものだけを自作すれば良い。
必要なテンプレートは決まっているのでbasicをよく観察する。
後はCSSで割りとなんとかなる。

8. 実際に作ってみよう！

ディレクトリ名を決める

var/skins_repository の下に mentai というオリジナルのフォルダを作成しました。

manifest.iniの作成

var/skins_repository/mentai の下に manifest.ini というファイルを作成します。
※このファイルはUTF-8（BOMなしで作成しておきましょう）

manifest.iniの中身

description = "Mentai skin"
admin = "N"
customer = "Y"

[Customer_logo]
filename = "logo.png"
width = 176
height = 42

[Mail_logo]
filename = "invoice_logo.png"
width = 176
height = 42

[Admin_logo]
filename = "logo.png"
width = 115
height = 20

[Gift_certificate_logo]
filename = "gift_cert_logo.png"
width = 176
height = 42

manifest.iniの書き方

customer_screenshot.pngの配置

var/skins_repository/mentai の下に customer_screenshot.png というファイルを作成します。
スキンセレクタで表示される画像で、横幅300px以上 で作っておくと良いです。

WordPressのテーマでいう、screenshot.pngです。

スキンセレクタでオリジナルテンプレートを選択

作成したテンプレートの集合体をCS-Cartでは スキン と呼びます。
スキンセレクタで、作成したオリジナルテンプレートのスキン mentai を選択出来るようになるので、選択して保存を押下します。

[CS-Cartのインストールディレクトリ]/skins の下に mentai がコピーされ、足りないファイルは basic からコピーされています。

9. CS-Cartのスタイルシート

skins/mentai/customer/base.css・・・CS-Cartの基本的な構造が書いてある
skins/mentai/customer/styles.css・・・basicのデザインが書いてる

この２つのCSSはバージョンアップで変更される可能性があり、マージなど面倒になる可能性もあるので基本は触らないこととします。

10. 独自のCSSの読み込み方

少し階層が深くなるのですが var/skins_repository/mentai/customer/addons の下に　my_changes フォルダを作成して、その中にhooks フォルダ、hooksの下に index フォルダを作成して styles.post.tpl というファイルを作成します。

var/skins_repository/mentai/customer/addons/my_changes/hooks/index/styles.post.tpl

<link href="{$config.skin_path}/addons/my_changes/styles.base.css" rel="stylesheet" type="text/css" />

これでショップページでmy_changes フォルダ内の styles.base.css というCSSファイルを読み込んでくれるようになります。

ただし skins_repository に置いたファイルはスキンを選択しなおさないと新たにコピーされないのでご注意ください。

11. パッケージング

変更したファイルのみ /var/skins_repository/mentai/に入れる。
配置したブロックをエクスポート （XMLファイルです）
取説などを書いてZIPに固める
CS-Cartマーケットに登録申請

オリジナルテンプレートの作成が完了したらパッケージとしてまとめて配布出来るようにしましょう。

12. ブロックをエクスポート

管理画面よりメニューの デザイン → ブロック を選択します。

ブロックの管理で変更したブロック構造を ロケーションのエクスポート よりXMLファイルとして吐き出します。
オリジナルのテンプレートに含めて置くと、デフォルトのブロック構造を指定出来て便利です。

13. 勉強会の様子

CS-Cartについて熱く語る吉浦さん。

参加者（僕）に優しく教えて下さっている吉浦さん。

遅れて登場のデザイナーYUKIさん。

時にはこんな無茶ぶりをする吉浦さん（※実話です）。

14. まとめ

本当はスタティックテンプレートの作成や多言化の話もあったのですが、~~書き疲れた~~長くなったので今回はこのへんで。

テンプレートファイルをほとんど作成しなくてもCSSとブロックの管理でかなりいろいろなことが出来るので、デザイナーの方もカスタマイズしやすいかもしれません。

今後、アドオン作成講座やテンプレートカスタマイズ、テーマコンテストも予定しているCS-Cartに注目ですね。