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

WordPressサイトでRSSフィードボタンを設置してみた♪

この記事は約 1 分で読めます。 何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。 Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんで …

no image

WordPress はじめてのオリジナルテーマ作り。【まとめ】

この記事は約 1 分で読めます。 昨年の11月に、私はWordpressのオリジナルテーマをはじめて作成しアップしました。 はじめてなのでまだ高度な事は出来ていませんが、今まで幾つか書きためた記事をこ …

no image

Yahoo!アクセス解析を使ってみた感想【レポート】

この記事は約 1 分で読めます。 以前、「Yahoo!アクセス解析を設定してみました!」でYahoo!アクセス解析を設定し、Google Analyticsと一緒にこのブログのアクセス解析を開始しまし …

no image

WordPress 簡単にスライダーを投稿内に追加出来るプラグイン「SlideDeck」

この記事は約 1 分で読めます。 WordPressには、とても素敵なスライダープラグインがあります。まだ試せていないものもたくさんあるので、少しずつ試していく予定です。 今回は、投稿する記事の中にス …

no image

画像最適化に便利な4つのツール

この記事は約 1 分で読めます。スマホを意識したWebページを作っていると、避けて通れない「画像最適化」。 昨年あたりから少しずつ使っていますが、見た目は変わらないのに軽量になるから不思議です! 私が …