カラーミーキットのナビメニューをカスタマイズする方法

Pocket

カラーミーキットに用意されているメニューのカスタマイズ方法を紹介します。

ナビゲーションメニューはネットショップに欠かせない要素の1つ。お問い合わせページのリンクだけでなく、カテゴリーや検索フォームなど、機能も様々なものがあります。

ここではカラーミーキットのメニューをカスタマイズしてカテゴリーリンクを追加してみます。

カラーミーキットのナビメニューをカスタマイズ

カラーミーキットの使い方やレイアウトの作り方については以下のブログを参考にしてみてください。カラーミーキット初心者のための、レイアウトの作り方

カラーミーキットをインストールした直後は以下のようなメニューが表示されます。
カラーミーキットのデフォルトメニュー-01

コードで表示するとこんな感じ。※ここでは無関係のスタイル用classは削除しています

<div id="header" class="mar_b_30">

  <!-- 省略 -->

  <ul class="inline">
    <li><a href="<{$home_url}>"><i class="icon-lg-b icon-home"></i>ホーム</a></li>
    <li><a href="<{$sk_url}>"><i class="icon-lg-b icon-help"></i>支払・配送について</a></li>
    <{if $manager_url != ""}><li><a href="<{$manager_url}>"><i class="icon-lg-b icon-pencil"></i>ショップブログ</a></li><{/if}>
    <li><a href="<{$view_inq_url}>"><i class="icon-lg-b icon-mail"></i>お問い合わせ</a></li>
    <li><a href="<{$view_cart_url}>"><i class="icon-lg-b icon-cart"></i>カートを見る</a></li>
  </ul>

</div>

デフォルトのメニューは単純にli要素内にリンクが作られているだけなので、新しいページへのリンクを作る場合は以下のようにすればOK。

<div id="header" class="mar_b_30">

  <!-- 省略 -->

  <ul class="inline">
    <li><a href="<{$home_url}>"><i class="icon-lg-b icon-home"></i>ホーム</a></li>
    <li><a href="<{$sk_url}>"><i class="icon-lg-b icon-help"></i>支払・配送について</a></li>
    <{if $manager_url != ""}><li><a href="<{$manager_url}>"><i class="icon-lg-b icon-pencil"></i>ショップブログ</a></li><{/if}>
    <li><a href="<{$view_inq_url}>"><i class="icon-lg-b icon-mail"></i>お問い合わせ</a></li>
    <li><a href="<{$view_cart_url}>"><i class="icon-lg-b icon-cart"></i>カートを見る</a></li>
    <li><a href="新しいページのURL"><i class="icon-lg-b icon-link"></i>新しいページ</a></li>
  </ul>

</div>

ちなみに、メニューに使っているアイコンは全てカラーミーキットで使えるもの。使い方はこちらのブログで紹介しています。カラーミーキット アイコンの簡単な使い方

カラーミーキットのメニューにカテゴリーを入れる

メニューにカテゴリーを入れる簡単な方法は、先ほど新しいページを追加したように直接リンクを記述してしまう方法です。

まず管理画面でカテゴリー編集ページを開きます。
カラーミーキットのメニューをカスタマイズする方法-02

このページでカテゴリーリンクを右クリックし右クリックし、「リンクのアドレスをコピー」してリンクを取得。
カラーミーキットのメニューをカスタマイズする方法-03

このリンクを先ほど追加したaタグに貼付ければ完了。

<div id="header" class="mar_b_30">

  <!-- 省略 -->

  <ul class="inline">
    <li><a href="<{$home_url}>"><i class="icon-lg-b icon-home"></i>ホーム</a></li>
    <li><a href="<{$sk_url}>"><i class="icon-lg-b icon-help"></i>支払・配送について</a></li>
    <{if $manager_url != ""}><li><a href="<{$manager_url}>"><i class="icon-lg-b icon-pencil"></i>ショップブログ</a></li><{/if}>
    <li><a href="<{$view_inq_url}>"><i class="icon-lg-b icon-mail"></i>お問い合わせ</a></li>
    <li><a href="<{$view_cart_url}>"><i class="icon-lg-b icon-cart"></i>カートを見る</a></li>
    <li><a href="新しいカテゴリーのURL"><i class="icon-lg-b icon-link"></i>カテゴリ名</a></li>
  </ul>

</div>

あとはこの操作を繰り返してリンクを作っていくだけです。カテゴリ以外のリンクが不要なら削除してしまってOKです。

<div id="header" class="mar_b_30">

  <!-- 省略 -->

  <ul class="inline">
    <li><a href="カテゴリのURL"><i class="icon-lg-b icon-link"></i>カテゴリ</a></li>
    <li><a href="カテゴリのURL"><i class="icon-lg-b icon-link"></i>カテゴリ</a></li>
    <li><a href="カテゴリのURL"><i class="icon-lg-b icon-link"></i>カテゴリ</a></li>
    <li><a href="カテゴリのURL"><i class="icon-lg-b icon-link"></i>カテゴリ</a></li>
    <li><a href="カテゴリのURL"><i class="icon-lg-b icon-link"></i>カテゴリ</a></li>
    <li><a href="カテゴリのURL"><i class="icon-lg-b icon-link"></i>カテゴリ</a></li>
    <li><a href="カテゴリのURL"><i class="icon-lg-b icon-link"></i>カテゴリ</a></li>
  </ul>

</div>

こちらのショップではメニューをカスタマイズしたテンプレートを販売中。価格もお手頃なので是非チェックしてみてくださいね!
カラーミーキットを使用したレスポンシブテンプレート!