「ECキャンパス」は全国のネットショップを運営する店長さんに学びの場となるWEBキャンパスを提供します。「売上を伸ばしたいけどやり方がわからない」「セミナーに参加したいけど高い」「地方なのでまわりに相談する人がいない」といったお悩みを解決します。共通の悩みを持った仲間と学び、助け合い、ノウハウを共有し、それぞれの目標に向かってがんばって行きましょう！ http://ec-campus.tv/

1. カスタマイズスクール - 第１期生 vol.1 基礎知識編 」
「
講師：株式会社 paperboy&co. 運営支援グループ マネージャー 山下 諭
https://www.facebook.com/grape.ceo
目 次
Part １．イントロダクション （15 分）
Chapter1-1．本講座の目的・コール
Chapter1-2．全５回の概要
Chapter1-3．編集環境・使用ソフト・アカウント準備
Part ２．テンプレートを徹底解説 （45 分）
Chapter2-1．他社サービスとの違い
Chapter2-2．テンプレートの仕組み・構造
Chapter2-3．独自タグについて
Part ３．テンプレートエンジン Smarty とは （45 分）
Chapter3-1．Smarty って何？
Chapter3-2．非プログラマーが押さえるポイント
Chapter3-3．カスタマイズによく使用する変数・構文
Part ４．カスタマイズ事例紹介 （15 分）
Part ５．質疑応答 （30 分）
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-1-

2. 【Part1】イントロダクション（15 分）
Chapter1-1．本講座の目的・ゴール
• 目的はショップ運営の業務効率化
• 技術者養成講座ではない
• ショップオーナーは仕組みとコツを掴む
• プロの WEB デザイナーは理解のスピードを短縮
• WEB デザインの知識のみでフルカスタマイズすると・・・
■心構え
• トライ＆エラー
• 細かいことは気にしない
• 割り切りも大切
Chapter1-2．全５回講義の内容〜基礎知識から魔改造まで〜
■第１回：基礎知識の習得（←今回）
カラーミーショップでテンプレートを編集する前に知るべき内容を学びます。座学メイン。
■第２回：トップページ編
ネットショップの顔となるトップページを実際のソースコードを編集しながら学びます。
共通ページとトップページを押さえればテンプレート編集の７割程度理解できます。
■第３回：商品ページ編
商品ページは商品の数だけページが出力されます。カテゴリーやグループによって表示方法を変えたり、
話題の商品をソーシャル拡散したり、商品ページ特有のカスタマイズ方法を学びます。
■第４回：上級編
Smarty の構文を応用したワンランク上のカスタマイズ方法を伝授。
■第５回：魔改造・認定試験編
もはや達人芸や芸術の粋に達している魔改造の事例とその方法をご紹介。
テンプレートマスター認定試験と認定証授与。
-2-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止

3. 【Part1】イントロダクション（15 分）
Chapter1-3．編集環境・使用ソフト・アカウントの準備
■編集環境・使用ソフト
• 使用ブラウザ：Google Chrome を推奨
http://www.google.com/intl/ja/chrome/browser/
→メリット：動作が軽い、ソースコードが見やすい
※管理画面を操作できればどれでも大丈夫
■編集方法は２通り
• 管理画面での直接編集
→すぐに反映される／ちょっとした編集／上級者向け
• テキストエディタ等で編集し管理画面にコピー＆ペースト
→メリット：色付け／入力補助／行番号
→デメリット：コピー＆ペーストの手間
• テキストエディタ
Win：TeraPad ／秀丸／サクラエディタ／ etc
Mac：CotEditor ／ mi ／ etc
■特典
• カラーミーショップのテストアカウントを発行
• 有料テンプレートは購入済の状態
ファッション（ホワイト）http://sample38.shop-pro.jp/
• Facebook ブループに招待（アンケートにご記入ください）
• アーカイブ視聴として EC キャンパス１ヶ月優待（既存ユーザーには 1980pt 付与）
https://ec-campus.tv/sessions/new
会員登録後、会員 No. をアンケートにご記入ください
• すべて受講すると認定証を進呈
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-3-

4. 【Part ２】カラーミーショップのテンプレートを徹底解説（45 分）
Chapter2-1．他社サービスとの違い・採用メリット
■ ASP 比較の場合 ：レイアウト固定型／管理画面で編集
高い←カスタマイズ性→低い
MakeShop ＞ ショップサーブ ＞ FutureShop2 ＞ おちゃのこネット
• メリット：レイアウトやボタン画像など専門知識がなくても編集できる。
• デメリット：編集できない箇所が多い。id や class が固定で CSS での編集も制限が多い。
■オープンソースの場合 ：テンプレートファイル型／ .tpl といったファイルを直接編集
例）
EC-CUBE ／ osCommerce ／ Zen Cart
• メリット：フルカスマイズ可能
• デメリット：高度な専門知識が必須
■カラーミーショップ ：ASP でフルカスタマイズ可能な唯一のサービス
• メリット：オープンソースと同等のカスタマイズ性、if 分の活用により独自の応用が可能
• デメリット：初心者向けでありながら、カスタマイズが難しい
-4-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止

5. 【Part ２】カラーミーショップのテンプレートを徹底解説（45 分）
Chapter2-2．テンプレートの仕組み・構造
■基本テンプレート
No
名前
説明
HTML
CSS
◯
◯
1
共通
ショップ画面で共通に表示さ
れる部分です。
2
トップ
ショップのトップ画面です。
◯
◯
3
商品一覧
商品一覧の表示画面です。
◯
◯
4
商品詳細
商品の詳細画面です。
◯
◯
5
特定商取引
特定商取引についての画面で
す。
◯
◯
6
商品検索結果
商品検索結果の表示画面です。
◯
◯
7
オプション在庫
値段表
オプションの在庫と値段の表
です。
◯
◯
8
プライバシー
ポリシー
プライバシーポリシーについ
ての画面です。
◯
◯
9
お問合せ
お問合せの画面です。
10
マイアカウント
会員ログイン
マイアカウントの画面です。
11
友達に教える
お友達に教えるクリック時に
表示されるメール送信画面で
す。
◯
12
メルマガ登録・解除
メ ル マ ガ へ の 登 録・ 解 除 画 面
です。
◯
13
レビュー
レ ビ ュ ー の 投 稿・ 閲 覧 画 面 で
す。
記事
◯
主要テンプレート
その他テンプレート
◯
◯
共有 SSL ページ
CSS のみ編集可
【重要】編集時にこれだけは気をつけよう
• 編集時はテンプレートを複製
• 1 箇所修正して更新→プレビューで確認
• 「もとに戻す」ボタンの活用
• タイムアウト時間
Chapter2-3．独自タグにつて
■独自タグとは
カラーミーショップ固有の変数
例）<{$shop_name}> と書くと「ほげほげショップ」と出力される
• 独自タグ一覧
http://shop-pro.jp/manual/?mode=menu_06_02_01
• 未公開の独自タグ
ページング（ページャー）
メルマガ登録・解除
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-5-

6. 【Part ３】テンプレートエンジン Smarty とは？（45 分）
Chapter3-1．Smarty って何だろう？
Smarty は、主に PHP アプリケーションで使用されるテンプレートエンジンである。テンプレート自体の
キャッシュ機能を有している。現在では PHP の多くの Web アプリケーションフレームワークでデフォル
トのテンプレートエンジンとして採用されている。
（引用：Wikipedia）
$smarty->assign(" 変数名 "," 値 ")
図版引用：＠ IT
■要するに・・・
• カラーミーショップのシステムは PHP でできている
• PHP 用のテンプレートエンジンが Smarty（2.6 系）
• システムとデザインを切り離して管理できる
Chapter3-2．非プログラマーが押さえるポイント
■肩の力を抜きましょう
• ゼロから書けなくてぜんぜん OK
• コピー＆ペーストとその応用
• 記述方法より意味を理解しておこう
-6-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止

7. 【Part ３】テンプレートエンジン Smarty とは？（45 分）
Chapter3-3．カスマイズによく使用する変数・構文
■変数： <{$ 変数名 }>
例：<{$item}>
※ {$ 変数名 } こちらの記述が一般的だがカラーミーショップではコードの書きやすさに配慮して
<{$ 変数名 }> という記述になります
※デリミター：区切り文字、山括弧・中括弧
■配列： {$ 配列変数名 [ インデックス番号 ]}
例：<{$item[0]}>
■連想配列： <{$ 配列変数名 . キー名 }>
例：<{$item.name}>
■条件分岐：
<{if 条件式 }> 条件式が真 (true) の時に実行される処理 <{/if}>
・比較演算子
== 等しい != 等しくない > 左が大きい >= 左が大きいか等しい
< 右が大きい <= 右が大きいか等しい
・論理演算子
&&：共に TRUE ／ || ：どちらかが TRUE
・偽の時の処理
<{else}>：条件式が偽 (false) の時に実行される処理
・複数の条件分岐
<{if 条件式 1}> 条件式 1 が真 (true) の時に実行される処理
<{elseif 条件式 2}> 条件式 1 が偽 (false) で条件式 2 が真 (true) の時に実行される処理
<{else}> 全ての条件式が偽 (false) の時に実行される処理
<{/if}>
例：
<{if $sample == 10}> ほげほげ
<{elseif $sample > 5}> ほげほげ２
<{else}> ほげほげ３
<{/if}>
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-7-

8. 【Part ３】テンプレートエンジン Smarty とは？（45 分）
■繰り返し
<{section name=section 名 loop= ループ回数 }>
繰り返し処理の中で行う処理
<{/section}>
例）
<{section name=num loop=$recommend}>
<{$recommend[num].name}>
<{/section}>
（※ foreach はなぜか使いません）
■修飾子
<{$ 変数名 | 修飾子名 }>
<{$ 変数名 | 修飾子名 1| 修飾子名 2} >
<{$ 変数名 | 修飾子名 : パラメータ }>
<{$ 変数名 | 修飾子名 : パラメータ 1: パラメータ 2} >
参考：http://www.phpbook.jp/smarty/modifier/
■テンプレートの読み込み
<{include file=' テンプレートファイル '} >
・共通テンプレートの場合
<{include file = $file_name}>
http://hogehoge.com の場合→「２．トップページ」テンプレを読み込み
http://hogehoge.com/?mode=f1 の場合→「フリーページ１」を読み込み
■コメント
<{* コメントは HTML に出ないのでメモとして使います *}>
※これらコメントは誰でも見れるのでちょっとはずかしい…
<!--HTML のコメント -->
/*CSS のコメント */
//JavaScript のコメント
-8-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止

9. 【Part ４】カスタマイズ事例紹介（15 分）
初級編 Level. 1-2 ★
■商品名を指定文字数で省略
長い商品名を一覧に表示すると並びが崩れたり見栄えがよくないですよね。長くても１行に表示させた
い場合に指定の文字数に省略することができます。
「長い商品名はか…」こんな具合に。
■共通を非表示にして LPO
リスティングなど広告バナーからのリンク先は他ページへのリンクがないことが定石です。フリーペー
ジを判定したタグを共通ページに入れることで、共通箇所が表示されないフリーページを作ることがで
きます。
中級編 Level. 3-4 ★★★
■縦長商品ページでのカート表示
北欧、暮らしの道具店 http://hokuohkurashi.com
画面の下の方にスクロールすると、画面上部にボタンが表示されるようになっています。
簡単な Javascript と CSS で出来ていますが、表示タイミングも抜群でよく調整されていており、コ
ンバージョン率も上がりそうなカスタマイズです。
■商品ページを画像ギャラリーに
太陽の森 ディマシオ美術館 http://www.dimaccio-museum.jp
カラーミーを使用しているのに EC サイトでなく、普通の HP 風になっている面白いサイトです。美術
作品を商品として登録し、カート機能を非表示にしておくだけで、簡単に更新できる CMS として利用
することも出来るというのは、驚きの使い方です。
上級編 Level. 5 ★★★★★
■カートに追加するとカートの中身が同画面に表示
バンフオンライン http://www.memory1977.com
通常、
「カートに入れる」ボタンを押した後は、カート内商品が表示される画面へ遷移します。
カートに入れるボタンに Javascript を仕込み、submit させると同時に reload することでページ遷移
先を変更させていたのです。ここをカスタマイズする発想がスゴイです。
魔改造編 Level. ??? ★★★★★★★★★★
■カート画面のモーダル表示
三英美術 http://www.sanei-art.jp
jQuery 等で様々なカスタマイズをしているショップです。中でも一番すごいのが、決済画面を iframe
で読みだして、モーダル表示させている点です。このような方法で、ASP 特有の似通った決済画面を、
自社サイト風にカスタマイズ出来るとは驚きです。
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-9-