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

1. カスタマイズスクール - 第１期生 vol.2 トップページ ワークショップ編 」
「
講師：株式会社 paperboy&co. 運営支援グループ マネージャー 山下 諭
https://www.facebook.com/grape.ceo
目 次
Part １．イントロダクション
Chapter1-1．本講座の目的・ゴール
Chapter1-2．全５回の内容
Chapter1-3．使用ツール
Chapter1-4．前回のおさらい
Part ２．トップページ編
Chapter2-1．スライドショーの設置
Chapter2-2．ご利用ガイドを全ページに表示
Chapter2-3．RSS フィード表示
Chapter2-4．商品名を指定文字数で省略
Chapter2-5．Twitter・Facebook ウィジェットの埋め込み
Part ３．その他ページ（商品ページを除く）
Chapter3-1．特定のページで共通箇所を非表示
Chapter3-4．かんたんメルマガ登録・解除
Chapter3-2．商品一覧の列数を変更・ページャー設置
Chapter3-3．グループ機能で SEO 対策
Part ４．質疑応答
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-1-

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

3. 【Part1】イントロダクション
Chapter1-3．編集環境・使用ソフト・アカウントの準備
■編集環境・使用ツール
• 使用ブラウザ：Google Chrome を推奨
http://www.google.com/intl/ja/chrome/browser/
• チャット
http://cmsp-customize.heteml.jp/chat/
http://ec-campus.tv/video/27（要ユーザー登録）
• ソースコード共有
http://gistub-shoppro.sqale.jp/
• インターネット接続
Wi-Fi：当日お知らせします
有線 LAN：数台分ご用意
■特典
• カラーミーショップのテストアカウントを発行 ※本番用での使用は NG
• 有料テンプレートは購入済の状態
ファッション（ホワイト）http://sample38.shop-pro.jp/
• Facebook ブループに招待 https://www.facebook.com/groups/colormeschool/
• アーカイブ視聴として EC キャンパススポット視聴権利を付与（２週間視聴可能）
• すべて受講すると認定証を進呈
Chapter1-4．少しだけおさらい
■変数： <{$ 変数名 }>
例：<{$item}>
※ {$ 変数名 } こちらの記述が一般的だがカラーミーショップではコードの書きやすさに配慮して
<{$ 変数名 }> という記述になります
※デリミター：区切り文字、山括弧・中括弧
■コメント
<{* コメントは HTML に出ないのでメモとして使います *}>
※これらコメントは誰でも見れるのでちょっとはずかしい…
<!--HTML のコメント -->
/*CSS のコメント */
//JavaScript のコメント
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-3-

4. 【Part ２】トップページ編
Chapter2-1．スライドショーの設置
カラーミーショップの無料で使える機能でスライドショーがあります。こちらはデフォルトテンプレート
には実装されていないので、
「ファッション（ホワイト）
」に設置してみましょう。
■スライドショー機能
http://admin.shop-pro.jp/?mode=slideshow
■サンプルショップからアイキャッチ画像を DL
http://sample38.shop-pro.jp/
http://sample40.shop-pro.jp/
■ソースコード
http://gistub-shoppro.sqale.jp/gists/2
■設置箇所
トップ
<{if $is_3columns}>
<div id="main">
<{/if}>
※ここに設置※
<{if $eyecatch != ""}>
<!-- アイキャッチバナー -->
■キャプチャ
-4-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止

5. 【Part ２】トップページ編
Chapter2-2．ご利用ガイドを全ページに表示
特商法ページの独自タグが全ページで使えるようになりました。購入者が支払方法や配送について迷わな
いように全ページに設置しましょう。
■ソースコード
http://gistub-shoppro.sqale.jp/gists/3
■設置箇所
共通
<br style="clear:both;" />
</ul>
</div>
</div>
<{/if}>
※ここに設置※
</div>
</div>
<div id="footer">
■キャプチャ
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-5-

6. 【Part ２】トップページ編
Chapter2-3．RSS フィード表示
ブログ等の RSS フィードから更新情報を読み込ませることができます。
※非公開独自タグのため取り扱いにご注意ください
■フィードの URL を確認
例）http://shop-pro.jp/news/feed/
■ソースコード
http://gistub-shoppro.sqale.jp/gists/4
■設置箇所
トップ／商品一覧など
例）指定のグループ一覧ページの場合 http://gistub-shoppro.sqale.jp/gists/5
<{if $smarty.get.gid == "785177"}>
※ここに設置※
<{/if}>
■キャプチャ
Chapter2-4．商品名を指定文字数で省略
商品名が長すぎる場合に途中で省略することができます。もちろん商品名以外でも応用することも可能で
す。
■ソースコード
http://gistub-shoppro.sqale.jp/gists/6
<{$recommend[num].name|regex_replace:'/>.*$/':'>'}>
<{$recommend[num].name|strip_tags|truncate:20:"...":true}>
■設置箇所
商品が一覧で並ぶ箇所
-6-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止

7. 【Part ２】トップページ編
Chapter2-5．Twitter・Facebook ウィジェットの埋め込み
ますます大事になるソーシャルメディア。サービス提供のウィジェットの埋め込みは簡単にできます。
■サービス提供ページ
• Twitter ウィジェット
https://twitter.com/settings/widgets/new
（※要ログイン）
• Facebook LikeBox
https://developers.facebook.com/docs/plugins/like-box-for-pages/
■ソースコード
例）http://gistub-shoppro.sqale.jp/gists/7
例）http://gistub-shoppro.sqale.jp/gists/8
■設置箇所
任意の箇所
■キャプチャ
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-7-

8. 【Part ３】その他ページ（商品ページを除く）
Chapter3-1．特定のページで共通箇所を非表示
リスティング広告等からのランディングページでは申込以外の動線を表示させないのが定石です。指定の
フリーページでヘッダー／フッター／サイドバーを非表示にする方法をご紹介します。
■ソースコード
http://gistub-shoppro.sqale.jp/gists/9
■設置箇所
フリーページなど
例）指定のフリーページで実装
http://pepabo.shop-pro.jp/?mode=f1
Chapter3-2．かんたんメルマガ登録・解除
メルマガ登録ページに遷移することなく、直接登録・解除できるフォームを設置できます。
※非公開独自タグのため取り扱いにご注意ください
■ソースコード
http://gistub-shoppro.sqale.jp/gists/10
■設置箇所
共通サイドバーなど
■キャプチャ
-8-
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止

9. 【Part ３】その他ページ（商品ページを除く）
Chapter3-3．商品一覧の列数を変更・ページャー設置
商品一覧の画像サイズに合わせて列の数を増減したり、ページ移動がスムーズにできるページャーを設置
します。※ページャーは非公開独自タグのため取り扱いにご注意ください
■ソースコード
ページャー）http://gistub-shoppro.sqale.jp/gists/11
商品一覧の列数変更）http://gistub-shoppro.sqale.jp/gists/12
■キャプチャ
Chapter3-4．グループ機能で SEO 対策
グループ機能の活用による SEO 対策をレクチャーします。
■施策方法
• 思いつく限りグループ機能を作る
• １つの商品に複数のグループを設定し、商品ページにパンくずリストを増やす
• グループページに RSS フィードを設置し更新頻度を高める
■キャプチャ
© カラーミーショップ カスタマイズスクール ※無断転載・複写禁止
-9-