ノンプログラミングでここまでできる！webデザイナーのためのcs-cartカスタマイズ講座...
Post on 02-Nov-2014
58 Views
Preview:
DESCRIPTION
TRANSCRIPT
WebデザイナーのためのCS-Cartカスタマイズ講座
ノンプログラミングでここまでできる！
2012年2月18日土曜日
自己紹介
山口 有由希福岡県在住、長崎県出身
フロッグマンオフィス所属福岡県でWebデザイナー
や ま ぐ ち ゆ う き
福岡からきました
2012年2月18日土曜日
本日の流れ✦カート、どうやって選んでますか？✦CS-Cartテンプレートデザインの基本✦CSSのみで本格カスタマイズ！✦よりリッチに。実装サンプル集✦デザイナーさんにおすすめのポイント✦まとめ
2012年2月18日土曜日
ショッピングカートどうやって選んでますか？
2012年2月18日土曜日
デザイナー
ショップオーナー
プログラマ
お客様
運営・管理しやすいのがいい
できるだけ簡単にデザインを適用したい
できるだけ完結に必要機能だけを短時間で開発したい
欲しい商品にできるだけ早くたどり着きたい
2012年2月18日土曜日
たとえばどんなことが求められるだろう？
2012年2月18日土曜日
お客様フレンドリー
2012年2月18日土曜日
欲しいものにたどり着きやすい
2012年2月18日土曜日
2012年2月18日土曜日
2012年2月18日土曜日
ショップオーナーフレンドリー
2012年2月18日土曜日
このカテゴリーのときだけ特定のバナーを出したい
2012年2月18日土曜日
一括でカテゴリーを変更したい
2012年2月18日土曜日
普通のページも作りたい
2012年2月18日土曜日
まとめて在庫数を更新したい
2012年2月18日土曜日
日頃の運用で出てくるこうだったらいいのにな…は基本機能でほぼ対応済み！
2012年2月18日土曜日
エンジニアフレンドリー
2012年2月18日土曜日
うちの在庫管理システムとうまく連携させたいんだけど…
2012年2月18日土曜日
ちょっと特殊な使い方をしたい
2012年2月18日土曜日
開発コストを抑えたい
2012年2月18日土曜日
基本の関数は揃ってます。必要な部分の処理を書くだけ！
2012年2月18日土曜日
デザイナーフレンドリー
2012年2月18日土曜日
作ったデザインを手軽に実装したい
2012年2月18日土曜日
クライアントからの細かな修正依頼に迅速に対応したい
2012年2月18日土曜日
テンプレートファイルを編集しなくても
思い通りのデザインを実現できる!
2012年2月18日土曜日
みんなにフレンドリーなショッピングカード
CS-Cartは
2012年2月18日土曜日
CS-Cartテンプレートデザインの基礎
2012年2月18日土曜日
自由にカスタマイズしたいけどたくさんのコードの入ったテンプレートファイルを編集するのはちょっと…
2012年2月18日土曜日
テンプレートファイルはさわらなくても大丈夫です！
2012年2月18日土曜日
でもテンプレートファイル編集しないと凝ったことは
できないんでしょう？
2012年2月18日土曜日
できます！！
2012年2月18日土曜日
CSSと管理画面からの編集のみで
カスタマイズしてみました
ということで
2012年2月18日土曜日
2012年2月18日土曜日
2012年2月18日土曜日
管理画面から増減可能
どこにでも増やせて自由に書き換えられるHTMLブロック
バナーも管理画面から追加・管理
2012年2月18日土曜日
まずは構造を整えよう
2012年2月18日土曜日
ブロック機能を使って各ページ必要な情報をレイアウトしていきます
2012年2月18日土曜日
2012年2月18日土曜日
自由にコンテンツを追加可能！
2012年2月18日土曜日
メイン画像のHTMLブロックやバナーのブロックも
作って配置していきます。
2012年2月18日土曜日
ロゴを変更しよう
2012年2月18日土曜日
2012年2月18日土曜日
CSSでカスタマイズしよう
2012年2月18日土曜日
テンプレートカスタマイズの基本
まずは
2012年2月18日土曜日
テンプレートカスタマイズの基本
✦テンプレートファイルの場所を知ろう！✦アップデートのときも安心なカスタマイズ方法
まずは
2012年2月18日土曜日
テンプレートファイルの場所を知ろう
2012年2月18日土曜日
skins -> basic -> customer
テンプレートのディレクトリ
テンプレートごとのディレクトリ
ショップ側のテンプレート
2012年2月18日土曜日
テンプレートファイルの場所を知ろう
skins -> basic -> customer
2012年2月18日土曜日
テンプレートファイルの場所を知ろう
skins -> basic -> customer
2012年2月18日土曜日
アップデートのときも安心なカスタマイズ方法
2012年2月18日土曜日
テンプレートファイルを退避させずそのまま
バージョンアップした。
2012年2月18日土曜日
差分の再適用がちょっと手間
2012年2月18日土曜日
2012年2月18日土曜日
skins -> basic -> customer
styles.css
styles.base.css
中身はからっぽに
2012年2月18日土曜日
こちらを編集していきます
2012年2月18日土曜日
Firebugを使おう！
2012年2月18日土曜日
2012年2月18日土曜日
http://h2ham.seesaa.net/article/154387441.html
わかりやすいFirebugの使い方の記事
2012年2月18日土曜日
テキストデータやコンテンツ幅の増減に対応したメニューや見出しの作成法
2012年2月18日土曜日
2012年2月18日土曜日
2012年2月18日土曜日
2012年2月18日土曜日
カテゴリ一覧のデザインもっとリッチにしたい。
2012年2月18日土曜日
2012年2月18日土曜日
2012年2月18日土曜日
HTMLブロックを使おう
2012年2月18日土曜日
2012年2月18日土曜日
バナーブロックを使おう
2012年2月18日土曜日
2012年2月18日土曜日
2012年2月18日土曜日
2012年2月18日土曜日
グローバルナビゲーションも同様にして
画像メニューにできます！
2012年2月18日土曜日
デザイナーさんにおすすめのポイント
2012年2月18日土曜日
jQueryのライトボックス埋め込むのが意外に面倒
2012年2月18日土曜日
画像はライトボックスでポップアップ
ポップアップの種類も管理画面から選べちゃう
2012年2月18日土曜日
基本設定 -> 表示設定
2012年2月18日土曜日
2012年2月18日土曜日
商品画像アップしちゃったあとだけど、もうちょっと大きく（小さく）
表示させた方がバランスよかった…！画像全部上げ直し？！
2012年2月18日土曜日
再アップ不要！設定値に合わせて
サムネイルを動的生成。キャッシュを作成するのでサーバーにもやさしい。
2012年2月18日土曜日
2012年2月18日土曜日
リアルタイムに変更可能！
2012年2月18日土曜日
画像の上げ直しをした場合などで以前のキャッシュが残っている場合
2012年2月18日土曜日
管理画面で
URLの後ろに
?ct
をつけてエンター！
2012年2月18日土曜日
キャッシュファイルがすべて削除されます！
2012年2月18日土曜日
テンプレートにベタ書きしちゃったHTMLの修正が
地味に面倒
2012年2月18日土曜日
テンプレートに直書きする必要なし！
ブロック追加で管理画面からラクラク編集！
2012年2月18日土曜日
地味に面倒な作業が不要に！デザインにたっぷり集中！
2012年2月18日土曜日
まとめ
2012年2月18日土曜日
✦デザインを適用しやすい扱いやすい構造設計
✦誰でもラクラク更新可能にする優しい管理画面
✦機能面も充実！かゆいところに手が届いてる！
2012年2月18日土曜日
ぜひ一度さわってみてください!!!
2012年2月18日土曜日
ありがとうございました！
@yuki930
ご質問などお気軽に。
2012年2月18日土曜日
top related