ノンプログラミングでここまでできる！WebデザイナーのためのCS-Cartカスタマイズ講座

WebデザイナーのためのCS-Cartカスタマイズ講座

ノンプログラミングでここまでできる！

2012年2月18日土曜日

自己紹介

山口有由希福岡県在住、長崎県出身

フロッグマンオフィス所属福岡県でWebデザイナー

やまぐちゆうき

福岡からきました


本日の流れ✦カート、どうやって選んでますか？✦CS-Cartテンプレートデザインの基本✦CSSのみで本格カスタマイズ！✦よりリッチに。実装サンプル集✦デザイナーさんにおすすめのポイント✦まとめ


ショッピングカートどうやって選んでますか？


デザイナー

ショップオーナー

プログラマ

お客様

運営・管理しやすいのがいい

できるだけ簡単にデザインを適用したい

できるだけ完結に必要機能だけを短時間で開発したい

欲しい商品にできるだけ早くたどり着きたい


たとえばどんなことが求められるだろう？


お客様フレンドリー


欲しいものにたどり着きやすい




ショップオーナーフレンドリー


このカテゴリーのときだけ特定のバナーを出したい


一括でカテゴリーを変更したい


普通のページも作りたい


まとめて在庫数を更新したい


日頃の運用で出てくるこうだったらいいのにな…は基本機能でほぼ対応済み！


エンジニアフレンドリー


うちの在庫管理システムとうまく連携させたいんだけど…


ちょっと特殊な使い方をしたい


開発コストを抑えたい


基本の関数は揃ってます。必要な部分の処理を書くだけ！


デザイナーフレンドリー


作ったデザインを手軽に実装したい


クライアントからの細かな修正依頼に迅速に対応したい


テンプレートファイルを編集しなくても

思い通りのデザインを実現できる!


みんなにフレンドリーなショッピングカード

CS-Cartは


CS-Cartテンプレートデザインの基礎


自由にカスタマイズしたいけどたくさんのコードの入ったテンプレートファイルを編集するのはちょっと…


テンプレートファイルはさわらなくても大丈夫です！


でもテンプレートファイル編集しないと凝ったことは

できないんでしょう？


できます！！


CSSと管理画面からの編集のみで

カスタマイズしてみました

ということで




管理画面から増減可能

どこにでも増やせて自由に書き換えられるHTMLブロック

バナーも管理画面から追加・管理


まずは構造を整えよう


ブロック機能を使って各ページ必要な情報をレイアウトしていきます



自由にコンテンツを追加可能！


メイン画像のHTMLブロックやバナーのブロックも

作って配置していきます。


ロゴを変更しよう



CSSでカスタマイズしよう


テンプレートカスタマイズの基本

まずは


テンプレートカスタマイズの基本

✦テンプレートファイルの場所を知ろう！✦アップデートのときも安心なカスタマイズ方法

まずは


テンプレートファイルの場所を知ろう


skins -> basic -> customer

テンプレートのディレクトリ

テンプレートごとのディレクトリ

ショップ側のテンプレート








アップデートのときも安心なカスタマイズ方法


テンプレートファイルを退避させずそのまま

バージョンアップした。


差分の再適用がちょっと手間




styles.css

styles.base.css

中身はからっぽに


こちらを編集していきます


Firebugを使おう！



http://h2ham.seesaa.net/article/154387441.html

わかりやすいFirebugの使い方の記事


テキストデータやコンテンツ幅の増減に対応したメニューや見出しの作成法





カテゴリ一覧のデザインもっとリッチにしたい。




HTMLブロックを使おう



バナーブロックを使おう





グローバルナビゲーションも同様にして

画像メニューにできます！


デザイナーさんにおすすめのポイント


jQueryのライトボックス埋め込むのが意外に面倒


画像はライトボックスでポップアップ

ポップアップの種類も管理画面から選べちゃう


基本設定 -> 表示設定



商品画像アップしちゃったあとだけど、もうちょっと大きく（小さく）

表示させた方がバランスよかった…！画像全部上げ直し？！


再アップ不要！設定値に合わせて

サムネイルを動的生成。キャッシュを作成するのでサーバーにもやさしい。



リアルタイムに変更可能！


画像の上げ直しをした場合などで以前のキャッシュが残っている場合


管理画面で

URLの後ろに

?ct

をつけてエンター！


キャッシュファイルがすべて削除されます！


テンプレートにベタ書きしちゃったHTMLの修正が

地味に面倒


テンプレートに直書きする必要なし！

ブロック追加で管理画面からラクラク編集！


地味に面倒な作業が不要に！デザインにたっぷり集中！


まとめ


✦デザインを適用しやすい扱いやすい構造設計

✦誰でもラクラク更新可能にする優しい管理画面

✦機能面も充実！かゆいところに手が届いてる！


ぜひ一度さわってみてください!!!


ありがとうございました！

@yuki930

ご質問などお気軽に。


Documents

ノンプログラミングでここまでできる！WebデザイナーのためのCS-Cartカスタマイズ講座