カラーミーショップのテーマをテキストエディターで編集する方法

Pocket

カラーミーショップはHTMLやCSSを編集できる初心者向きのECサイト作成サービスです。テーマをそのまま使用することもできますが、コードをカスタマイズすることでオリジナルデザインのサイトを構築することも可能です。

今回はカラーミーショップの無料テーマを、テキストエディターを使って編集する方法を紹介します。

カラーミーショップのテーマをテキストエディターで編集する方法

カラーミーショップのテーマを選ぶ

まずはカラーミーショップのテーマを選びます。作りたいサイトのイメージに近いものを選ぶといいでしょう。こちらのサイトでも低価格のテーマを販売しているので参考にしてみて下さい。
カラーミーショップでテーマを選ぶ

テーマのコードをエディターにコピー

テーマを選んだらエディターで編集するためのコードを取得します。上級者モードの場合はテーマの編集画面を開いて、HTML/CSSボタンを押します。
カラーミーショップのテーマのコードを取得する

するとHTMLコードやCSSコードが書かれた画面に移動するので、必要なコードを取得します(ここではHTML)。取得するには範囲を選択して、右クリック、コピーをすればOK。
カラーミーショップテーマのHTMLコードを取得する

コピーしたコードをテキストエディターに貼付けます。ここでは初心者の方にもおすすめのBrackets(ブラケッツ)を使用します。使い方は初心者にもおすすめ!無料のコードエディターBracketsの使い方をご覧ください。

colorme-global.htmlというファイルを新規に作成し、その中にコピーしています。
カラーミーショップをBracketsで編集する

エディターで編集したい場所をカスタマイズ

貼付けまでできたら、次は編集です。メニューのテキストや見出し、画像のパスなど自由に編集することができます。先ほどは共通エリアのHTMLを取得しましたが、その他のエリアやCSSでも同様にコードを取得し、編集することができます。
カラーミーショップのテンプレートをカスタマイズする

完成したらカラーミーショップにコピー

必要な場所が編集できたら、次はカラーミーショップ側にコピーして上書きします。編集した部分だけをコピーしても良いのですが、範囲を間違ったりするとエラーになるので、ここでは全選択して上書きします。

まずはエディター側を全選択してコピー。
編集したコードを全選択

その後カラーミーショップがわのコードを全選択して、貼付け。
カラーミーショップのコードを貼付け

これで問題なければ正しく表示されるはずなので、画面右上のプレビューボタンを押して変更後の部分をチェックします。
プレビューボタンを押して編集をチェック

あとは編集したい箇所が全て変更されるまで繰り返せばOK。

まとめ

今回はカラーミーショップの無料テーマをBracketsでカスタマイズしてみました。HTMLになっている部分は通常のHTMLとして編集できますが、カラーミー専用のタグを使用している部分は、公式のタグリファレンスを見ながらカスタマイズしていきます。

また、こちらのサイトでは高品質なカラーミーショップ用テーマを販売しているので、公式テーマにないデザインや機能が欲しい場合に検討してみて下さい。