カラーミーショップ

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

2014-12-18

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>
<!-- /商品検索 -->

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