カラーミーショップはHTMLやCSSを編集できる初心者向きのECサイト作成サービスです。テーマをそのまま使用することもできますが、コードをカスタマイズすることでオリジナルデザインのサイトを構築することも可能です。
今回はカラーミーショップの無料テーマを、テキストエディターを使って編集する方法を紹介します。
カラーミーショップのテーマをテキストエディターで編集する方法
カラーミーショップのテーマを選ぶ
まずはカラーミーショップのテーマを選びます。作りたいサイトのイメージに近いものを選ぶといいでしょう。こちらのサイトでも低価格のテーマを販売しているので参考にしてみて下さい。
テーマのコードをエディターにコピー
テーマを選んだらエディターで編集するためのコードを取得します。上級者モードの場合はテーマの編集画面を開いて、HTML/CSSボタンを押します。
するとHTMLコードやCSSコードが書かれた画面に移動するので、必要なコードを取得します（ここではHTML）。取得するには範囲を選択して、右クリック、コピーをすればOK。
コピーしたコードをテキストエディターに貼付けます。ここでは初心者の方にもおすすめのBrackets（ブラケッツ）を使用します。使い方は初心者にもおすすめ！無料のコードエディターBracketsの使い方をご覧ください。
colorme-global.htmlというファイルを新規に作成し、その中にコピーしています。
エディターで編集したい場所をカスタマイズ
貼付けまでできたら、次は編集です。メニューのテキストや見出し、画像のパスなど自由に編集することができます。先ほどは共通エリアのHTMLを取得しましたが、その他のエリアやCSSでも同様にコードを取得し、編集することができます。
完成したらカラーミーショップにコピー
必要な場所が編集できたら、次はカラーミーショップ側にコピーして上書きします。編集した部分だけをコピーしても良いのですが、範囲を間違ったりするとエラーになるので、ここでは全選択して上書きします。
まずはエディター側を全選択してコピー。
その後カラーミーショップがわのコードを全選択して、貼付け。
これで問題なければ正しく表示されるはずなので、画面右上のプレビューボタンを押して変更後の部分をチェックします。
あとは編集したい箇所が全て変更されるまで繰り返せばOK。
まとめ
今回はカラーミーショップの無料テーマをBracketsでカスタマイズしてみました。HTMLになっている部分は通常のHTMLとして編集できますが、カラーミー専用のタグを使用している部分は、公式のタグリファレンスを見ながらカスタマイズしていきます。
また、こちらのサイトでは高品質なカラーミーショップ用テーマを販売しているので、公式テーマにないデザインや機能が欲しい場合に検討してみて下さい。
