カラーミーショップ・初心者向け/オリジナルテンプレートの作り方

カラーミーショップ・初心者向け/オリジナルテンプレートの作り方

こんにちは。今日の夜は会社の花見なのに、全然予定地で花が咲いてNeeeee!!!!!…ってことでプルプルしてるかわさきです。夜までに少しでも開いてくれると…。

さて、前回の予告からずいぶんと日が経ってしまって、本人も忘れてしまいそうだったのですがカラーミーショップ設定方法の続きを書いていきます。

前回は絶対必要な初期設定についてでしたが、今回はオリジナルテンプレート作成の流れとポイントを簡単にご説明します。html/cssがある程度触れる・自分でサイトを制作出来る方向けです。

※ご紹介している管理画面や機能は2015年3月現在の内容になります。随時機能追加や改定が行われていますので、実際に構築時は公式サイトやマニュアルをご確認ください。

目次

まずは下準備

スマートフォン対応をレスポンシブデザインにするか? 別テンプレートにするか?

テンプレートをレスポンシブデザインにする場合、予めそれを考えてデザインする必要があります。また、逆に別テンプレートにする場合、別途スマホ専用のテンプレートを準備する必要があります。

※フューチャーフォンも別途テンプレート設定可能です。

デザインを作成

まずはどんなショップデザインにするか考えてましょう。

カラーミーショップは構造にある程度制限がありますので、その点を考慮してサイトのレイアウトやデザインを作っていく必要があります。

こちらはカラーミーショップで制作されているECサイトのみを集めたギャラリーサイトです。カラーミーショップで制作されている=カラーミーショップで再現可能な構造…となりますので、ページデザインを考えていく上で参考にし易いと思います。

01

私は、カラーミーショップ用のデザインを制作する際は、

  • トップページ
  • 商品一覧(兼 商品検索結果)
  • 商品詳細
  • その他の情報ページ用テンプレート(特定商取引法など)

を、基本的に作成します。

コーディングしておく

テンプレートを編集する際に合わせて行っても問題無いですが、先に作ったデザインをコーディングしておいたほうがスムーズです。

FTPでファイルをアップロードできる環境を準備する(出来れば)

カラーミーショップでは管理画面内の機能で画像をアップロードしたり、cssを記載したり出来ますが、一点一点アップロードしたり、いちいち修正時にテンプレート編集画面から差し替えないといけないため、非常に手間がかかってしまいます。

また、JavaScriptなどの、画像以外のファイルはアップロードできませんので、機能や表現に制限が出てしまいます。

そこで、別途外部ファイルを上げためのサーバーを準備すると、便利です。

カラーミーショップでも「FTPオプション」を提供していますので、そちらを利用してもいいかと思います。

テンプレートを作る

元になるテンプレートを選ぶ→複製する

カラーミーショップでは、多数のテンプレートを無料/有料で提供しています。

全てのテンプレートはカスタマイズOKですので、元からあるテンプレートを活用して制作を進めたほうが、慣れないうちはやりやすいです。

カラーミーショップの管理画面内、「ショップ作成」→「デザイン設定」に進むと「テンプレート追加」ボタンがあります。

そこから使いたいものを選んで追加します。

追加した後、「テンプレートをコピー」からテンプレートの複製が可能です。また、好きなテンプレート名をつけることが出来ます。(バックアップの意味も含めて、複製して作成したほうがいいです。)

02

オリジナルデザインを反映させる場合、カスタマイズ用に準備されているテンプレート(レスポンシブのフレームワーク・カラーミーキット等)や、シンプルなテンプレートを元にしたほうがやりやすいと思います。

テンプレートを編集する

テンプレートを編集していきます。

「デザイン設定」ページから編集したいテンプレートの「デザイン編集」ボタンから編集画面に進みましょう。

編集できるテンプレートの種類一覧がありますので、「HTML/CSS編集」ボタンから編集画面に進みます。

03

↑編集画面。上段がhtml、下段がcssの編集スペース。

まずは、元になるhtmlをローカルのエディタにコピーします。そして、前項で作ったhtmlのカラーミーショップの機能を使っている部分(商品を表示する箇所など)に、該当するソースをコピーアンドペースト、自分のデザインに合わせて調整する形で進めます。

カラーミーショップは、機能部分に関してはカラーミーショップ独自のタグが使用されています。

本格的にカスタマイズを行うには、この独自タグやsmartyの使い方を知っている必要があります。ですが、普段html/cssを書ける人、特にWordPressやMovable Typeのカスタマイズを行っている人であれば、既存テンプレートのソースを見ながら進めていけば、問題なく扱うことが出来ると思います。

(※今回は独自タグの詳しい使い方などは省きます。すみません><)

画像ファイル・cssファイル・jsファイル等の書き方

画像ファイル

前項で記載したFTPでアップできる環境が準備OKだったら、FTPで画像を一括で上げ、絶対値で記載します。

といった形ですね。

FTPでアップ出来ない場合は、アップローダーを使って1点づつアップしていきます。

一点ずつアップして、ソースを出して、ペーストして……あー…これは……めんどくさい………と、いうわけで、FTPアカウントの準備を強くおすすめします(´・ω・`)

cssファイル

cssもhtmlと同じように編集エリアがあります。

…が! 画像を使うとき、画像ファイルと同じように絶対値で記載する必要があったり、編集する時に都度管理画面の編集画面に移動して…編集して…となると面倒なので、画像と同じようにFTPでのアップをおすすめします。css編集欄に記載しているcssは、不要であれば全部消してしまいましょう。

カラーミーショップのテンプレートは<body>内しか編集できず、<head>内は編集できません。ですので、ちょっと書き方として悪いですが、htmlエリアの頭に入れてしまいます。

04

こんな感じ。

もしくは、全ページ共通で使用するcssであれば、「集客」→「検索エンジン対策」→「headタグ内フリースペース設定」に記述すると、<head>内に出力することが可能です。

13

※ここに入れると、どのテンプレートを使用しても<head>内に同じタグが出力されてしまうので、テンプレートを切り替えて使用したいとき、リニューアルで現在編集中のテンプレートを裏で編集したいとき…などは使いづらいです。

jsファイル

カラーミーショップではJavaScriptは使用可能ですが、専用で記入する編集エリアはありません。html編集エリアに直接書くか、css同様に外部ファイル化して、html内に「<script “src=…」で記載しましょう。

カラーミーショップで編集できるテンプレート(種類)

05

html/cssが編集可能なテンプレート

  • 共通
  • トップ
  • 商品一覧
  • 商品詳細
  • 特定商取引
  • 商品検索結果
  • オプション在庫・値段表
  • プライバシーポリシー

「共通」は、ヘッダー・フッター・サイドメニューなど、全ページ共通で出力する部分を設定します。(※特定のページにしか出したくない項目などがあっても、分岐タグで対応可能です。)全ページで使用したいcssやjsは共通テンプレートに記載します。

それ以外のテンプレートは、各戸別ページのメインエリアに出力されます。

06

「オプション在庫・値段表」のみ、「商品詳細」からポップアップで表示される画面になります。

cssのみ編集可能なテンプレート

  • 決済
  • お問合せ
  • マイアカウント・会員ログイン
  • 友達に教える
  • メルマガ登録・解除
  • レビュー

ssl領域にあたるページはセキュリティの関係上、cssのみしか編集できません。

背景画像は設定可能ですが、その際上記の通りssl領域になりますので、画像ファイルを「https」で記載するのを忘れないでください。

管理画面に反映させて、確認

作ったテンプレートを実際に管理画面に反映させて、きちんと表示されるか確認します。

現在適用してないテンプレートでも、編集画面の「プレビュー」ボタンから開けば、実際の画面で確認することが可能です。

07

全てのページを設定して、動作や表示に問題がなければ完成です!

スマートフォンに対応する

「ショップ作成」→「スマートフォン設定」からスマートフォン表示の設定が可能です。レスポンシブデザインにしない場合は、別途スマホ版のテンプレートを準備する必要があります。

08

レスポンシブデザインで制作した場合

「スマートフォン表示モード設定」を「PC版表示」に設定。
これで、PCと同じテンプレートが表示されるようになります。

別途、スマートフォン専用のテンプレートを準備する場合

「スマートフォン表示モード設定」を「スマートフォン最適化」に設定。

「スマーフォフォンショップ設定」内にある「デザイン設定」からPC版と同じようにテンプレートの設定・編集が出来ます。

終わりに

上でも少し触れましたが、普段html/cssを書いている人なら、初めてでもなんとなく独自タグリファレンスと他のテンプレートを見ながら進めていくと、簡単に独自テンプレートを作ることが可能です。WordPress等、CMSのカスタマイズを行っている方なら更に楽勝かと思います。

他のカラーミーショップで制作されたサイトを見ていると「おぉ~こんなことも出来るのか…!」と感心することも多いので、更に追求してもっと幅広い活用や表現が出来るようになるといいなぁと思います。

同じカテゴリー(WEB制作・デザイン)の記事