カラーミーショップでテンプレート内コンテンツの配置を変える方法

Pocket

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

こちらで販売されているテンプレートには各ページに複数のコンテンツが用意されています。
カラーミーショップのテンプレート

これらのコンテンツはコードを書き換えることで自由に編集することができ、CSSをカスタマイズすれば見た目を変えることも可能。まずはHTMLの知識がなくてもできる、簡単な配置の変更からやってみます。

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

新しい方のUIでは少し改善されていますが、旧UIでは編集ページ上でカスタマイズするのはすごく大変。なので、いったんコードエディターにコードを移し、コードエディター上で編集すると楽です。

HTMLやCSSを編集するなら無料で使えるBracketsがおすすめ。
関連記事:初心者にもおすすめ!無料のコードエディターBracketsの使い方

コンテンツの配置を変えてみる

購入したテンプレートは以下のようにコメントで囲まれています。

<!-- カテゴリ -->
<div id="category_area">
  <div class="headline_side">
    <h4 class="side_title">カテゴリーから探す</h4>
  </div>
  <div class="side_panel">
    <!-- コンテンツの中身のコード -->
  </div>
</div>
<!-- /カテゴリ -->

コメントごとひとまとめにして任意の場所へコピー&ペーストすれば簡単に配置を変更することができます。例えば、サイドバーのコンテンツを移動したい場合は以下のように編集すればOK。また、不要なコンテンツは削除することもできます。

<!-- 変更前 -->

<!-- カテゴリ -->
<div id="category_area">
  <!-- コンテンツのコード -->
</div>
<!-- /カテゴリ -->
<!-- グループ -->
  <div id="group_area">
    <!-- コンテンツのコード -->
  </div>
<!-- /グループ -->
<!-- 商品検索 -->
<div id="search_area">
  <!-- コンテンツのコード -->
</div>
<!-- /商品検索 -->
<!-- 売れ筋商品 -->
<{if $seller_num != 0}>
<div id="side_ranking_area" class="clearfix">
  <!-- コンテンツのコード -->
</div>
<{/if}>
<!-- /売れ筋商品 -->


<!-- 変更後 -->

<!-- 売れ筋商品 -->
<{if $seller_num != 0}>
<div id="side_ranking_area" class="clearfix">
  <!-- コンテンツのコード -->
</div>
<{/if}>
<!-- /売れ筋商品 -->
<!-- カテゴリ -->
<div id="category_area">
  <!-- コンテンツのコード -->
</div>
<!-- /カテゴリ -->
<!-- グループ -->
  <!-- 不要なので削除 -->
<!-- /グループ -->
<!-- 商品検索 -->
<div id="search_area">
  <!-- コンテンツのコード -->
</div>
<!-- /商品検索 -->

コンテンツの配置を変えるだけなら、エラーになることはないので何度でも変更できます。

カラーミーショップで使うHTMLやCSSの編集方法は?

カラーミーショップのコードはテンプレートタグ以外はHTMLとCSSでできています。なのでコーディングができる人はすぐに慣れるでしょう。まだちょっとよくわからないという方は、以下のような書籍を見て勉強しましょう。

WordPressと異なり、PHPなどのプログラミング言語は不要なので、がんばれば自力でオリジナルショップを作ることもできるようになります。