SlideShare a Scribd company logo
1 of 91
Download to read offline
ノンプログラミングでここまでできる!



          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日土曜日
わかりやすいFirebugの使い方の記事




      http://h2ham.seesaa.net/article/154387441.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日土曜日
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日土曜日

More Related Content

Viewers also liked

WordPressテーマの作り方
WordPressテーマの作り方WordPressテーマの作り方
WordPressテーマの作り方YUKI YAMAGUCHI
 
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?Kentaro Ohkouchi
 
CSCart4のHands-onセミナー 20140118
CSCart4のHands-onセミナー 20140118CSCart4のHands-onセミナー 20140118
CSCart4のHands-onセミナー 20140118Toshihiro Yoshiura
 
CS-Cartセミナー東京 20151128
CS-Cartセミナー東京 20151128CS-Cartセミナー東京 20151128
CS-Cartセミナー東京 20151128Toshihiro Yoshiura
 
Azure上でec cubeを運用するポイント
Azure上でec cubeを運用するポイントAzure上でec cubeを運用するポイント
Azure上でec cubeを運用するポイントMakoto Nishimura
 
Xamarin入門(技術というより心構え編)
Xamarin入門(技術というより心構え編)Xamarin入門(技術というより心構え編)
Xamarin入門(技術というより心構え編)Makoto Nishimura
 
2016年11月.NETラボLT:超余談ゲームプラットフォームの話
2016年11月.NETラボLT:超余談ゲームプラットフォームの話2016年11月.NETラボLT:超余談ゲームプラットフォームの話
2016年11月.NETラボLT:超余談ゲームプラットフォームの話Makoto Nishimura
 
デザイナー視点から見たWeb開発する人々
デザイナー視点から見たWeb開発する人々デザイナー視点から見たWeb開発する人々
デザイナー視点から見たWeb開発する人々Miho Matsui
 
スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告Taisuke Fukuno
 
Followership
FollowershipFollowership
FollowershipAireyno
 
水平思考のススメ
水平思考のススメ水平思考のススメ
水平思考のススメKeisuke Oohata
 
なぜ今デザイナーにプログラミングなのか?
なぜ今デザイナーにプログラミングなのか?なぜ今デザイナーにプログラミングなのか?
なぜ今デザイナーにプログラミングなのか?Taisuke Fukuno
 
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】Tsuyoshi Kaneko
 
モバイルネイティブ世代の台頭で変わるコミュニケーションの形
モバイルネイティブ世代の台頭で変わるコミュニケーションの形モバイルネイティブ世代の台頭で変わるコミュニケーションの形
モバイルネイティブ世代の台頭で変わるコミュニケーションの形美帆 江藤
 
これを読めば箱根駅伝が楽しくなる!
これを読めば箱根駅伝が楽しくなる!これを読めば箱根駅伝が楽しくなる!
これを読めば箱根駅伝が楽しくなる!Noriyuki Nonomura
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIHideki Akiba
 
「おもしろい」の社会実装のために
「おもしろい」の社会実装のために「おもしろい」の社会実装のために
「おもしろい」の社会実装のためにShoji Komai
 
SaCSS vol.68 効率化という病気にかかった男の末路
SaCSS vol.68 効率化という病気にかかった男の末路SaCSS vol.68 効率化という病気にかかった男の末路
SaCSS vol.68 効率化という病気にかかった男の末路Atsushi Handa
 

Viewers also liked (20)

Osc2010fukuoka
Osc2010fukuokaOsc2010fukuoka
Osc2010fukuoka
 
WordPressテーマの作り方
WordPressテーマの作り方WordPressテーマの作り方
WordPressテーマの作り方
 
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
俺、エバンジェリストだけど、 EC-CUBEについて何か聞きたいことある?
 
CSCart4のHands-onセミナー 20140118
CSCart4のHands-onセミナー 20140118CSCart4のHands-onセミナー 20140118
CSCart4のHands-onセミナー 20140118
 
CS-Cartセミナー東京 20151128
CS-Cartセミナー東京 20151128CS-Cartセミナー東京 20151128
CS-Cartセミナー東京 20151128
 
CS-CART addon
CS-CART addonCS-CART addon
CS-CART addon
 
Azure上でec cubeを運用するポイント
Azure上でec cubeを運用するポイントAzure上でec cubeを運用するポイント
Azure上でec cubeを運用するポイント
 
Xamarin入門(技術というより心構え編)
Xamarin入門(技術というより心構え編)Xamarin入門(技術というより心構え編)
Xamarin入門(技術というより心構え編)
 
2016年11月.NETラボLT:超余談ゲームプラットフォームの話
2016年11月.NETラボLT:超余談ゲームプラットフォームの話2016年11月.NETラボLT:超余談ゲームプラットフォームの話
2016年11月.NETラボLT:超余談ゲームプラットフォームの話
 
デザイナー視点から見たWeb開発する人々
デザイナー視点から見たWeb開発する人々デザイナー視点から見たWeb開発する人々
デザイナー視点から見たWeb開発する人々
 
スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告スポーツ選手の眼を盗む - ウェアラブル実証実験報告
スポーツ選手の眼を盗む - ウェアラブル実証実験報告
 
Followership
FollowershipFollowership
Followership
 
水平思考のススメ
水平思考のススメ水平思考のススメ
水平思考のススメ
 
なぜ今デザイナーにプログラミングなのか?
なぜ今デザイナーにプログラミングなのか?なぜ今デザイナーにプログラミングなのか?
なぜ今デザイナーにプログラミングなのか?
 
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】
 
モバイルネイティブ世代の台頭で変わるコミュニケーションの形
モバイルネイティブ世代の台頭で変わるコミュニケーションの形モバイルネイティブ世代の台頭で変わるコミュニケーションの形
モバイルネイティブ世代の台頭で変わるコミュニケーションの形
 
これを読めば箱根駅伝が楽しくなる!
これを読めば箱根駅伝が楽しくなる!これを読めば箱根駅伝が楽しくなる!
これを読めば箱根駅伝が楽しくなる!
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 
「おもしろい」の社会実装のために
「おもしろい」の社会実装のために「おもしろい」の社会実装のために
「おもしろい」の社会実装のために
 
SaCSS vol.68 効率化という病気にかかった男の末路
SaCSS vol.68 効率化という病気にかかった男の末路SaCSS vol.68 効率化という病気にかかった男の末路
SaCSS vol.68 効率化という病気にかかった男の末路
 

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

第7回ゆるふわ勉強会
第7回ゆるふわ勉強会第7回ゆるふわ勉強会
第7回ゆるふわ勉強会horike37
 
Sacss WordPress Special with Fireworks
Sacss WordPress Special with FireworksSacss WordPress Special with Fireworks
Sacss WordPress Special with FireworksYUKI YAMAGUCHI
 
WordPress+不動産プラグイン活用例
WordPress+不動産プラグイン活用例WordPress+不動産プラグイン活用例
WordPress+不動産プラグイン活用例加藤 貴一
 
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!YUKI YAMAGUCHI
 
20120215 jquery in wordpress cafe
20120215 jquery in wordpress cafe20120215 jquery in wordpress cafe
20120215 jquery in wordpress cafeKenichi Ohwada
 
スマホデザインパターン なう
スマホデザインパターン なうスマホデザインパターン なう
スマホデザインパターン なうAndroid UI勉強会
 
グリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべてグリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべてKoichiro Ohba
 
Agile Shibuya github_enterprise
Agile Shibuya github_enterpriseAgile Shibuya github_enterprise
Agile Shibuya github_enterpriseKoichiro Ohba
 
デブサミ関西2012 B-3
デブサミ関西2012 B-3デブサミ関西2012 B-3
デブサミ関西2012 B-3Koichi Sakata
 

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

第7回ゆるふわ勉強会
第7回ゆるふわ勉強会第7回ゆるふわ勉強会
第7回ゆるふわ勉強会
 
Sacss WordPress Special with Fireworks
Sacss WordPress Special with FireworksSacss WordPress Special with Fireworks
Sacss WordPress Special with Fireworks
 
WordPress+不動産プラグイン活用例
WordPress+不動産プラグイン活用例WordPress+不動産プラグイン活用例
WordPress+不動産プラグイン活用例
 
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
WordCamp Tokyo 2012 画像のアップロード&アイキャッチ画像をしっかり理解しよう!
 
20120215 jquery in wordpress cafe
20120215 jquery in wordpress cafe20120215 jquery in wordpress cafe
20120215 jquery in wordpress cafe
 
スマホデザインパターン なう
スマホデザインパターン なうスマホデザインパターン なう
スマホデザインパターン なう
 
グリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべてグリーを支えるソーシャルコーディングのすべて
グリーを支えるソーシャルコーディングのすべて
 
Agile Shibuya github_enterprise
Agile Shibuya github_enterpriseAgile Shibuya github_enterprise
Agile Shibuya github_enterprise
 
デブサミ関西2012 B-3
デブサミ関西2012 B-3デブサミ関西2012 B-3
デブサミ関西2012 B-3
 
Osc2012tokyo timing
Osc2012tokyo timingOsc2012tokyo timing
Osc2012tokyo timing
 

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