カラーミーショップ テンプレートカスタマイズ方法

こんにちは。川那辺です。
今回はカラーミーショップのテンプレートをカスタマイズする方法をお話ししたいと思います。

カラーミーショップでは無料のデザインテンプレートと有料のデザインテンプレートがあります。
テンプレートって作っている人がプロのデザイナーさんなので、綺麗だったり格好よかったりてことでネットショップのオープン初期は無料のデザインテンプレートもしくは有料のデザインテンプレートをそのまま使っていても十分じゃん?!と思ったりします。


しかし実際にネットショップを運営していいるといつかテンプレートのデザインでは物足りないと思う時が来るかもしれません。


  • ネットショップをもっとカッコいい洗練したデザインにしたい。
  • テンプレートのように他のショップと同じ物ではなくオンリーワンのデザインにしたい。
  • 自分の思うままレイアウトや色を変更したい。


こんな風に思う方も多いと思います。
そんな場合はテンプレートをカスタマイズすることで問題が解決します。




テンプレートカスタマイズに必要なスキル

で、謝っておきますが、これに関しては正直な所高い技術力を要するので、簡単にはできません。
私はWEBデザイナーと言う仕事で、ホームページのデザインやカスタマイズが専門の仕事ですので、カラーミーショップのカスタマイズも簡単にできますが、パソコンが苦手な方なんかにはテンプレートのカスタマイズは正直な所かなり敷居が高いです。


私はこのブログでネットショップの運営は素人でもパソコン音痴でもとりあえずyahoo!で検索できたら何とかカラーミーでネットショップを運営できる。と豪語していますが、テンプレートのカスタマイズに関してはできない方の方が多いと思っています。


ということで以下でカラーミーショップのデザインカスタマイズに必要なスキルを説明致しますが、もしスキルや技術が十分でないと思う場合は、自分でカスタマイズするよりも専門業者さんに頼んだ方が良いかも知れません。



HTMLとCSSの知識

カラーミーショップのカスタマイズにはHTMLとCSSの知識が必要不可欠です。
dreamweaver等の編集ソフトを使ってもいいのでHTMLやCSSを編集できるという事が絶対条件となります。




画像の編集技術

カラーミーショップのテンプレートをデザインカスタマイズするに
もう1つ必要となってくるのが画像の編集技術です。
素材を1から作れるようなスキルは必要ありませんが、切り抜いたり、縮小したり加工する技術は最低限必要です。


カラーミーショップのテンプレートカスタマイズ方法


それではカラーミーショップのデザインテンプレートをカスタマイズする方法を解説致します。
とは言っても、全部HTMLやCSSや画像編集などを全て0から解説して行ったら1年位かかりそうなので今回説明するのは概論的な話だけです。

画像のアップロードとパス


デザインカスタマイズでは独自で用意した画像を使うこともあります。
カラーミーショップでは商品画像以外の画像は「画像ファイル管理」でアップロードすることが可能です。
以下の手順で画像をアップロードしてくださいね。
アップロードできる画像の拡張子は【jpg】【jpeg】【gif】【png】の画像と、拡張子【swf】のFlashファイルのみとなっております。
それ以外の画像の場合は、ファイルをアップロード可能な画像に変更してからアップロードしてくださいね。


1「ショップ作成」を選択

2
「画像ファイル管理」を選択


3
「参照」を選択してアップロードする画像を選択

4
「アップロード」を選択

5
アップロード後、アップロードしたファイルの名前を一覧から探して選択

6
URL:に表示されているのが画像のパスとなりますのでコピーしてご利用ください。



HTMLとCSSの編集



カラーミーショップのデザインテンプレートのHTMLとCSSの編集方法を解説します。

7
カラーミーショップのヘッダーメニューから「ショップ作成」を選択



8
新たに表示されたメニューの中から「デザイン設定」を選択してください。

9
現在利用中のテンプレートの「デザイン編集」を選択 してください。

編集できるHTMLとCSSが種類別に表示されます。
今回は共通のHTMLとCSSを例として編集するとします。


10
「HTML/CSS編集」を選択



11
「HTML編集」領域を編集してください。


12
「CSS編集」領域を編集してください。

13
「更新」を選択
以上の方法でカラーミーショップのテンプレートのカスタマイズができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA