カラーミーショップ初心者でもわかる、テーマカスタマイズを簡単に解説。

カラーミーショップはテーマのカスタマイズに対応しているため、頑張れば完全オリジナルデザインのショップを作ることも可能。

この記事ではテーマカスタマイズの基本的なところに的を絞って、実際どうやるの?という疑問に答えます。

カラーミーショップのテーマカスタマイズ入門

カラーミーショップのテーマカスタマイズ入門

カラーミーショップでカスタマイズできるページは限定されており、HTMLとCSS両方編集できるページとCSSのみ編集できるページがあります。

カラーミーショップで編集できるページ

HTMLとCSS両方編集できるページがこちら。共通ページのみ初級モード対応。

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

CSSのみ編集できるページはこちら。全ページ初級モード対応。

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

初級モードと上級モードの違い

また、編集ページに行くとわかるように、編集方法で簡易モードと上級者モードの2種類があります。

初級モードではいくつか用意された項目に値を入力していくだけで、簡単にスタイルを編集できます。

カラーミーショップテーマカスタマイズの初級モード

上級者モードではHTMLコードも含めたページの全てを編集可能。

カラーミーショップテーマカスタマイズの上級モード

カラーミーショップのフリーページの作成方法

テーマとは直接関係ないですが、カラーミーショップではフリーページというページを自由に作成することができます(9999ページ!)。

この機能を使えば、テーマで用意されていないページを追加することができるため、キャンペーンページやお問い合わせ窓口ページなどいろいろな使い方ができます。

フリーページを作るにはデザインページのテンプレート一覧から各テンプレートの「フリーページ」リンクをクリックします。

カラーミーショップのフリーページの作成方法1

次のページで作成したいぺージ名と内容を記入して保存ボタンを押せば完了。ぺージ内容にはHTMLを記述できるため、いろいろな使い方ができそうですね。

カラーミーショップのフリーページの作成方法2

カラーミーショップの独自タグについて

カラーミーショップの独自タグはすごくたくさんあって、一度に全部覚えるのは大変。

なので最初は次の3つのポイントだけ覚えておきましょう。

  • ページごとに使える独自タグが決まっている
  • 共通ページの独自タグは全ページで使用可能
  • 値をそのまま出力するものと、ループ中に出力できるものがある

独自タグの一覧はドキュメントにあるので、テーマカスタマイズするなら必ずチェックしておきましょう。

独自タグの使い方

独自タグの使い方はドキュメントでも紹介されていますが、このようになります。

// ショップ名を表示
<{ $shop_name }>

商品一覧などのループはこんな感じ。

<{section name=num loop=$productlist}>
  // ループ中に商品名を表示
  <{ $productlist.name }>
<{/section}>

さらに詳細な使い方をこちらの記事にまとめたのでご覧ください。

まとめ

テーマのカスタマイズはWordpressをさわったことがある人なら結構簡単にできると思いますが、ほんとに初めてだと何がどうなってるのかわかりにくいかもしれません。

変な書き方をすると画面が真っ白になったりエラーが出るので、いきなり本番用テンプレートを編集するのではなく、練習用テンプレートを作ってそっちで色々いじってみるといいかも。