Webの記録

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

投稿日:2015年9月26日 更新日:

この記事は約 8 分で読めます。

テンプレート画像
比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。
スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」があります。
デフォルトのテンプレートも良いのですが、今回「西ゆうの世界Shop」さんで部分的にテンプレートをカスタマイズすることになりました。
今回は、フリーページ表示順を任意の順番に変えてみます。
※今回のトップ画像は「Bit」のページのものを使わせていただきました。



目次

  • テンプレート編集の前に
  • フリーページのページ番号を調べる
  • フリーページの表示順を変える


テンプレート編集の前に

管理画面を開いて、「ショップ作成」→「デザイン」の画面で編集したいテンプレートの部分の「デザイン編集」ボタンをクリックします。
※編集前に何もいじってないテンプレートをコピーして、編集はコピー分を利用した方が万が一の時に戻れるので安心です!

カラーミーショップテンプレート編集

テンプレート編集できるのは、HTML編集可能な分で8つ。編集したい部分がどのテンプレートになるかは「テンプレートガイド」を参照してください。多分、「共通」を編集することが多いかな~とは思いますが。。。

【参考】テンプレートガイド

カラーミーショップテンプレート編集

フリーページのページ番号を調べる

最初の状態だと登録した順に並びます。
しかし、後で追加したページを上に並べたいときなど、任意の順番に並べるためにはテンプレートを書き換える必要があります。

任意の順番にするために、現在の状態でフリーページのページ番号を調べておきます。(フリーページを作成したページを見て、番号がf1・f2とある部分をメモしておきます)

カラーミーショップフリーページ編集

フリーページの表示順を変える

テンプレート「共通」の上級者モード「HTML・CSS編集」画面で、HTMLの中で以下のような部分を探します。

//83行目あたりにあります
<div id="footer-wrapper">
      <div class="row">
        <div class="col col-sm-12 col-lg-4 footer-primary">
          <{if $free_area_flg == true}>
            <ul class="footer-nav freepage-nav">
              <{section name=num loop=$freepage}>
                <li><a href="<{$freepage[num].link_url}>"><{$freepage[num].page_title}></a></li>
              <{/section}>
            </ul>
          <{/if}>


ループで順番にフリーページを表示するようになっているので、以下の部分を削除します。

//以下の分を削除
              <{section name=num loop=$freepage}>
                <li><a href="<{$freepage[num].link_url}>"><{$freepage[num].page_title}></a></li>
              <{/section}>


削除した箇所に、以下のように任意の順番で並べる記述します。ページが多いと行数も多くなるので大変ですが。。。

f1のページの場合、$freepage[0]となり、f2のページの場合、$freepage[1]となります。番号が1つずれるので注意!

 
//削除した部分に以下のように、任意の順番で記述
   		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[0].link_url}>" class="show txt_c_333"><{$freepage[0].page_title}></a>
		</li>


$freepage[0]の部分だけ、$freepage[1]というように変更して複数行記述します。

<li class="pad_10 bor_t_1">
		<a href="<{$freepage[0].link_url}>" class="show txt_c_333"><{$freepage[0].page_title}></a>
		</li><!-- 愉画 -->
   		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[1].link_url}>" class="show txt_c_333"><{$freepage[1].page_title}></a>
		</li><!-- 干支守護仏 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[2].link_url}>" class="show txt_c_333"><{$freepage[2].page_title}></a>
         </li><!-- お天道様 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[3].link_url}>" class="show txt_c_333"><{$freepage[3].page_title}></a>
		</li><!-- 詩会わせ小包 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[4].link_url}>" class="show txt_c_333"><{$freepage[4].page_title}></a>
		</li><!-- YOUME地蔵 -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[5].link_url}>" class="show txt_c_333"><{$freepage[5].page_title}></a>
		</li><!-- E・NI・SHI -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[6].link_url}>" class="show txt_c_333"><{$freepage[6].page_title}></a>
		</li><!-- ガールズあーと -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[7].link_url}>" class="show txt_c_333"><{$freepage[7].page_title}></a>
		</li><!-- kokoro佛 -->
    		<li class="pad_10 bor_t_1">
		<a href="<{$freepage[10].link_url}>" class="show txt_c_333"><{$freepage[10].page_title}></a>
		</li><!-- エコバック -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[8].link_url}>" class="show txt_c_333"><{$freepage[8].page_title}></a>
		</li><!-- Tシャツ 瑜伽道場(男女共用) -->
    		<li class="pad_10 bor_t_1">
		  <a href="<{$freepage[9].link_url}>" class="show txt_c_333"><{$freepage[9].page_title}></a>
		</li><!-- Tシャツ 瑜伽道場(レディース用) -->

ちゃんと並び替えができました!

カラーミーショップテンプレート編集

まだ他にもちょこちょこテンプレートをいじることはあると思うので、また何かあればメモしていきたいと思っています。


今回カスタマイズさせていただいたショップは、「西ゆうの世界Shop」です。
かわいくキレイなイラストを描かれている、西ゆうさんのオリジナル商品を販売しているお店です。

これから様々な商品を開発していく予定があるようですので、楽しみなお店です♪





-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

日本語文章校正ツールを使ってみた。

この記事は約 1 分で読めます。 今回は、Yahoo!Japan校正支援Webサービスを利用した校正支援ツールを試してみました。 誰かに伝える文章を書く時に使えそうな、Webツール「日本語文章校正ツー …

no image

WordPressで「ブルートフォースアタック」や辞書攻撃にあった時にやってみたこと。

この記事は約 1 分で読めます。 昨年(2013年8月)、ロリポップのレンタルサーバーでWordPressサイトへの改ざん事件がありました。 その後も、「ブルートフォースアタック」や辞書攻撃があってい …

no image

WordPress カスタムフィールドを使ってみる

この記事は約 1 分で読めます。 WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪ 「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。

no image

XAMPP(Bitnami)で簡単にWordPressローカル環境を構築してみた。(for Windows)

この記事は約 1 分で読めます。 以前、「WordPressテスト環境をXAMPPで作ってみた♪ for Windows」でWindowsにXAMMPでローカル環境を作ってWordPressを入れてみ …

no image

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

この記事は約 1 分で読めます。今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。 ・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁって …