cs-cart デザインカスタマイズの基礎 2015/9/12
TRANSCRIPT
![Page 1: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/1.jpg)
デザインカスタマイズの基礎
CS-Cartセミナー in TOKYO 2015.9.12
![Page 2: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/2.jpg)
自己紹介• 吉浦 寿洋(福岡県)
• 有限会社フロッグマンオフィス
• PHP(Wordpress/CS-Cart)
• CS-Cartデザインカスタマイズ歴・・・4年
• CS-Cartアドオン歴・・・・・・・・・1年
![Page 3: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/3.jpg)
CS-Cartはカスタマイズ前提に作られているネットショップ構築パッケージです。
![Page 4: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/4.jpg)
導入事例すでに多くのユーザー様が様々なサイトを運用中です。
![Page 5: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/5.jpg)
DESIGN STORE TOKYO様インテリア・雑貨
![Page 6: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/6.jpg)
![Page 7: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/7.jpg)
![Page 8: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/8.jpg)
StyleOrder様アパレル
![Page 9: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/9.jpg)
![Page 10: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/10.jpg)
![Page 11: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/11.jpg)
![Page 12: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/12.jpg)
ONLINE SHOP Floyd様雑貨・器・ギフト
![Page 13: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/13.jpg)
![Page 14: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/14.jpg)
![Page 15: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/15.jpg)
![Page 16: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/16.jpg)
Philip Morris様電子タバコ
![Page 17: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/17.jpg)
![Page 18: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/18.jpg)
![Page 19: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/19.jpg)
3レベルのカスタマイズ方法
ショップオーナーさん向け管理パネルのみでカスタマイズ
ウェブデザイナーさん向け管理パネル+CSSでカスタマイズ(CSS/LESS)
フロントエンド・エンジニアさん向けアドオンを作ってカスタマイズ(PHP/Smarty)
![Page 20: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/20.jpg)
ショップオーナーさん向け
1
![Page 21: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/21.jpg)
1. ビジュアルエディター
2. レイアウトエディター
3. サードパーティー製のテーマを導入
1
![Page 22: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/22.jpg)
ビジュアルエディターVisual Editor
![Page 23: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/23.jpg)
![Page 24: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/24.jpg)
起動方法
![Page 25: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/25.jpg)
Demo
![Page 26: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/26.jpg)
ビジュアルエディターでできること
• サイトロゴの変更
• フォントの変更
• カラーの変更
• 背景の変更
• (カスタムCSSの記述)
「選択するだけ」
+スタイルの保存
![Page 27: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/27.jpg)
レイアウトエディターLayout Editor
![Page 28: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/28.jpg)
![Page 29: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/29.jpg)
Demo
![Page 30: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/30.jpg)
商品詳細ロケーション
ここはレイアウトできない
メインコンテンツテンプレートで定義
![Page 31: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/31.jpg)
レイアウトエディターでできること
• サイト構造のカスタマイズ2カラム/3カラム
• ロケーションの追加
• <title> <meta>の変更
• レイアウトのインポート/エクスポート
![Page 32: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/32.jpg)
「サイトの骨格を定義する」「部品を配置する」
![Page 33: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/33.jpg)
重要なキーワード
• ロケーション(ディスパッチ)…/index.php?dispatch=page.view..
• デフォルトロケーション
• グリッド・・・枠
• ブロック・・・グリッドの中に置く部品
![Page 34: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/34.jpg)
サードパーティー製のテーマを導入
Themes
![Page 35: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/35.jpg)
![Page 36: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/36.jpg)
![Page 37: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/37.jpg)
テーマの購入方法
• CS-Cartストア
• CS-Cart Marketplace(英語)
• Theme Forest(英語)
![Page 38: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/38.jpg)
ウェブデザイナーさん向け
2
![Page 39: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/39.jpg)
1. LESSを書こうどのファイルに書く?
2. レイアウトエディターを利用
3. BootstrapのScaffoldingが使える
2
スキャフォールディング2.3系
![Page 40: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/40.jpg)
編集するLESSファイル
• /design /themes /responsive /css /addons /localization_jp
/styles.less
![Page 41: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/41.jpg)
Demo
![Page 42: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/42.jpg)
レイアウトエディターで グリッドやブロックにセレクターを足す
![Page 43: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/43.jpg)
「ユーザー定義CSSクラス」に記入
![Page 44: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/44.jpg)
Demo
![Page 45: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/45.jpg)
BootstrapのScaffoldingが使えるスキャフォールディング
CS-CartはBootstrap2.3系が使用されています。
![Page 46: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/46.jpg)
グリッドが書ける
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
HTMLブロックやコンテンツの本文に記述する
![Page 47: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/47.jpg)
Responsive utility classes
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
「このブロックはスマホでは非表示にする」がこのCSSクラスだけで実現できる
![Page 48: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/48.jpg)
Demo
![Page 49: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/49.jpg)
フロントエンド・エンジニアさん向け
3
![Page 50: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/50.jpg)
1. アドオンを書けば何でも出来る!
2. アドオンビルダーを使おう!
3. テーマもアドオンも販売可能!
3ほぼ
![Page 51: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/51.jpg)
アドオンを書いて出来ること (テーマ関連)
• 独自LESS/JSファイルの読み込み テンプレートフック
• テンプレートのオーバーライド • 独自のブロックや関数 • 独自のディスパッチの作成
新しい「ロケーション」(レイアウト)
![Page 52: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/52.jpg)
Demo
![Page 55: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/55.jpg)
開発者向けサイトの充実
開発者向け向けセミナー
開発者向け合宿
![Page 56: CS-Cart デザインカスタマイズの基礎 2015/9/12](https://reader031.vdocuments.pub/reader031/viewer/2022020213/5887939d1a28ab5b1a8b5787/html5/thumbnails/56.jpg)
ご静聴ありがとうございました。