「WBS」「ガイアの夜明け」「がっちりマンデー!!」「カンブリア宮殿」などのテレビ番組で気になったニュースからお金と仕事を考えて豊かな生活を目指します。

[テンプレートカスタマイズ] Bitでプルダウンでカテゴリーを表示する

2016年2月26日

カラーミーショップには無料版・有料版と様々なテンプレートが用意されています。

無料版の中でレスポンシブ対応でシンプルなデザインで人気の「Bit」のカスタマイズ方法を記載していきます。

今回はカテゴリーのカスタマイズ方法です。

カテゴリーのカスタマイズ

前回はカテゴリーが少ない場合に使えるカスタマイズを紹介しました。

今回はカテゴリーをマウスオーバーするとプルダウンでカテゴリーが表示する方法を紹介させて頂きます。

HTMLの編集

カラーミーショップの上部メニューの「ショップ作成」から「デザイン」を選択してください。

「デザイン編集」をクリックしてください。

「共通」の「HTML/CSS編集」をクリックしてください。

表示されたHTMLとCSSなどをTeraPadなどのテキストエディタにコピー&ペーストしてください。

    <ul class="inline">
        <li><a href="<{$home_url}>">home</a></li>
        <li><a href="/?mode=srh&cid=&keyword=">all items</a></li>
        <li><a href="<{$sk_url}>">ordering info</a></li>
        <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}>
        <li><a href="<{$view_inq_url}>">contact</a></li>
        <{* フリーページをヘッダーメニューに追加 (PC用) *}>
        <!-- <li><a href="?mode=f1">freepage1</a></li> -->
        <!-- <li><a href="?mode=f2">freepage2</a></li> -->
    </ul>

上記の部分を探してください。(初期状態でしたら68行目になります。)
この「<li><a href=”/?mode=srh&cid=&keyword=”>all items</a></li>」部分を変更します。

変更後がこちらです。

    <ul class="inline">
        <li><a href="<{$home_url}>">home</a></li>
        <li><a href="#">category</a>
            <ul>
                <li><a href="/?mode=srh&cid=&keyword=">all items</a></li>
                <!-- カテゴリーリスト -->
                <{section name=num loop=$category}>
                    <li><a href="<{$category[num].link_url}>"><{$category[num].name}></a></li>
                <{/section}>
                <!-- // カテゴリーリスト -->
            </ul>
        </li>
        <li><a href="<{$sk_url}>">ordering info</a></li>
        <{if $manager_url != ""}><li><a href="<{$manager_url}>">blog</a></li><{/if}>
        <li><a href="<{$view_inq_url}>">contact</a></li>
        <{* フリーページをヘッダーメニューに追加 (PC用) *}>
        <!-- <li><a href="?mode=f1">freepage1</a></li> -->
        <!-- <li><a href="?mode=f2">freepage2</a></li> -->
    </ul>

そのままコピー&ペーストをして頂いても大丈夫です。
これでショップ画面上にカテゴリーが表示されるようになります。

ここで注意ですが、このテンプレートを使用するのならカテゴリー名も英語表記にしているほうが美しく見えます。

CSSの編集

    #header-global-nav li {
        margin: 0 1em;
    }

上記の部分を探してください。(初期状態でしたら329行目になります。)
この部分を以下のように変更します。

    #header-global-nav ul{
        *zoom: 1;
        list-style-type: none;
        padding: 0;
    }
    #header-global-nav ul:before,
    #header-global-nav ul:after{
        content: "";
        display: table;
    }
    #header-global-nav ul:after{
        clear: both;
    }
    #header-global-nav ul li{
        position: relative;
        margin: 0 1em;
        padding: 0;
        text-align: center;
    }
    #header-global-nav ul li a{
        display: block;
        margin: 0;
        line-height: 1;
        text-decoration: none;
    }
    #header-global-nav ul li ul{
        list-style: none;
        position: absolute;
        z-index: 9999;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        border-top: 1px solid #ccc;
    }
    #header-global-nav ul li ul li{
        width: 100%;
        margin: 0;
        white-space: nowrap;
        background: #fff;
    }
    #header-global-nav ul li ul li a{
        padding: 13px 15px;
        text-align: left;
        border: 1px solid #ccc;
        border-top: none;
    }
    #header-global-nav ul li:hover > a{
        background: #fff;
    }
    #header-global-nav ul li ul{
        display: none;
    }
    #header-global-nav ul li:hover ul{
        display: block;
        opacity: 1;
    }
    #header-global-nav ul li ul li a:hover{
        background: #fafafa;
    }

そのままコピー&ペーストをして頂いても大丈夫です。
これでショップ画面上にカテゴリーがプルダウンで表示されるようになります。

あとは商品一覧テンプレートの編集が必要になります。

商品一覧テンプレートの編集

商品一覧テンプレートを作りますが非常に簡単にできます。
商品検索結果のテンプレートをコピーして少しだけ変更して商品一覧テンプレートとして更新するだけです。

まずは「商品検索結果」の「HTML/CSS編集」をクリックしてください。

表示されたHTMLをTeraPadなどのテキストエディタにコピー&ペーストしてください。

    <h2 class="google-font">all items</h2>

上記の部分を探してください。(初期状態でしたら3行目になります。)
この部分を変更します。

変更後がこちらです。

    <h2 class="google-font">
        <{if $sid_name != ""}>
            <{$sid_name}>
        <{elseif $bid_name != ""}>
            <{$bid_name}>
        <{else}>
            該当のカテゴリーがありません
        <{/if}>
    </h2>

小カテゴリーの名前も表示するようにしていますが、小カテゴリーはこのカスタマイズには推奨しません。

「商品一覧」の「HTML/CSS編集」をクリックしてください。

表示されたらHTMLの項目に先程変更したHTMLファイルを全て貼り付けてください。

これでメニュー部分にカテゴリーが表示されて、カテゴリーをクリックするとそのカテゴリーの商品が表示されるようになったと思います。

簡単だと思いますのでぜひ試してください。

  • ブログランキングへ
  • にほんブログ村


カテゴリー:カラーミーショップ
タグ:

コメントを残す

プロフィール

嫁と4歳の息子の3人暮らしの30代後半のサラリーマンです。
詳しいプロフィール

カレンダー

2017年2月
« 1月    
 12345
6789101112
13141516171819
20212223242526
2728  
  • ブログランキングへ
  • にほんブログ村

TOPに戻る