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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

モバイル フレンドリー テストで合格しているのに、「スマホ対応」ラベルが付かない時

この記事は約 1 分で読めます。 スマホで検索していると「スマホ対応」と表示されるようになって、しばらく経ちました。 検索している時の順位も、「スマホ対応」と表示されてないページより、表示されているペ …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

WordPressでオリジナルテーマ作りにチャレンジ5【sidebar.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「sidebar.php」の部分を作りたいと思います。 私が作りたいオリジナルテーマの「si …

no image

苦手なJavaScriptをイチから勉強してみる【if文とfor文】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】の続きとしてメモします。 イチから「JavaScript」を学び直しをする …

Basic認証を簡単に設置する方法

この記事は約 1 分で読めます。 特定の人にだけ公開する場合、IDとパスワードを用意する「Basic認証」という方法でアクセス制限をするのができます。 「Basic認証」で必要な「.htaccess」 …