cs-cart デザインカスタマイズの基礎 2015/9/12
Post on 25-Jan-2017
1.544 Views
Preview:
TRANSCRIPT
デザインカスタマイズの基礎
CS-Cartセミナー in TOKYO 2015.9.12
自己紹介• 吉浦 寿洋（福岡県）
• 有限会社フロッグマンオフィス
• PHP（Wordpress/CS-Cart）
• CS-Cartデザインカスタマイズ歴・・・4年
• CS-Cartアドオン歴・・・・・・・・・1年
CS-Cartはカスタマイズ前提に作られているネットショップ構築パッケージです。
導入事例すでに多くのユーザー様が様々なサイトを運用中です。
DESIGN STORE TOKYO様インテリア・雑貨
StyleOrder様アパレル
ONLINE SHOP Floyd様雑貨・器・ギフト
Philip Morris様電子タバコ
3レベルのカスタマイズ方法
ショップオーナーさん向け管理パネルのみでカスタマイズ
ウェブデザイナーさん向け管理パネル+CSSでカスタマイズ（CSS/LESS）
フロントエンド・エンジニアさん向けアドオンを作ってカスタマイズ（PHP/Smarty）
ショップオーナーさん向け
1
1. ビジュアルエディター
2. レイアウトエディター
3. サードパーティー製のテーマを導入
1
ビジュアルエディターVisual Editor
起動方法
Demo
ビジュアルエディターでできること
• サイトロゴの変更
• フォントの変更
• カラーの変更
• 背景の変更
• （カスタムCSSの記述）
「選択するだけ」
+スタイルの保存
レイアウトエディターLayout Editor
Demo
商品詳細ロケーション
ここはレイアウトできない
メインコンテンツテンプレートで定義
レイアウトエディターでできること
• サイト構造のカスタマイズ2カラム/3カラム
• ロケーションの追加
• <title> <meta>の変更
• レイアウトのインポート/エクスポート
「サイトの骨格を定義する」「部品を配置する」
重要なキーワード
• ロケーション（ディスパッチ）…/index.php?dispatch=page.view..
• デフォルトロケーション
• グリッド・・・枠
• ブロック・・・グリッドの中に置く部品
サードパーティー製のテーマを導入
Themes
テーマの購入方法
• CS-Cartストア
• CS-Cart Marketplace（英語）
• Theme Forest（英語）
ウェブデザイナーさん向け
2
1. LESSを書こうどのファイルに書く？
2. レイアウトエディターを利用
3. BootstrapのScaffoldingが使える
2
スキャフォールディング2.3系
編集するLESSファイル
• /design /themes /responsive /css /addons /localization_jp
/styles.less
Demo
レイアウトエディターで グリッドやブロックにセレクターを足す
「ユーザー定義CSSクラス」に記入
Demo
BootstrapのScaffoldingが使えるスキャフォールディング
CS-CartはBootstrap2.3系が使用されています。
グリッドが書ける
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
HTMLブロックやコンテンツの本文に記述する
Responsive utility classes
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
「このブロックはスマホでは非表示にする」がこのCSSクラスだけで実現できる
Demo
フロントエンド・エンジニアさん向け
3
1. アドオンを書けば何でも出来る！
2. アドオンビルダーを使おう！
3. テーマもアドオンも販売可能！
3ほぼ
アドオンを書いて出来ること （テーマ関連）
• 独自LESS/JSファイルの読み込み テンプレートフック
• テンプレートのオーバーライド • 独自のブロックや関数 • 独自のディスパッチの作成
新しい「ロケーション」（レイアウト）
Demo
開発者向けサイトの充実
開発者向け向けセミナー
開発者向け合宿
ご静聴ありがとうございました。
top related