Upload
toshihiro-yoshiura
View
1.547
Download
1
Embed Size (px)
Citation preview
デザインカスタマイズの基礎
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
開発者向けサイトの充実
開発者向け向けセミナー
開発者向け合宿
ご静聴ありがとうございました。