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

右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

この記事は約 2 分で読めます。 【2015.2.20追記】設置方法にドラッグ禁止についても、対策追加しました! 今、あるところのサイト制作をしているのですが・・・。 「画像の著作権を守るため、画像の …

no image

Photoshopのテキストレイヤーからテキストを抽出する方法

この記事は約 2 分で読めます。 Photoshopで作られたカンプからコーディングをする時に、テキストレイヤーにある文字をいちいち入力するのは面倒だと思いつつ、今まで全て手打ちしてました。。。時間ロ …

no image

WordPress ソーシャルブックマークのボタンを付けてみた

この記事は約 1 分で読めます。 何気によく見掛けるTwitterやFacebookなど、ソーシャルブックマークのボタン。 1つ1つ設定するのは、面倒なのでまとめて複数のサービスのボタンを簡単に取り付 …

no image

記事内のメモ表示に便利!WordPressのプラグイン「WP-Note」を使ってみた♪

この記事は約 1 分で読めます。 記事の本文とは別に、ちょっとしたメモ的な文章を書くときに使うと便利なプラグイン「WP-Note」!! 記事の一部のテキストを特定のタグで囲むだけで、カンタンに「メモ」 …

no image

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …