【クリエイターモード】テンプレート&moreで、ヘッダーにメニューを追加したいです。方法を教えてください。 – makeshop よくある質問

モジュール管理「ヘッダー」を編集することで、ヘッダーのメニューに項目の追加が可能です。
※以下の手順で追加したメニューは、PCで閲覧した場合に表示されます。スマートフォンでは表示されません。

以下は手順の一例です。

◆「ITEMS アイテム」の前または後ろに追加する場合

（１）ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名：ヘッダー
モジュールID：$module.headnavi

<li class="nav-item nav-items">
    <div>
        <span class="poppins fw700">ITEMS</span>
        <span class="annotation">アイテム</span>
    </div>
    <div><span class="material-icons expand head-nav-icon">expand_more</span></div>
</li>

上記が「アイテム」のメニューのソースです。
この前または後ろに、追加したいメニューのソースを追記し保存してください。

＜追記例＞

<li class="nav-item nav-items">
    <div>
        <a href="●●●"><span class="fw700">GALLERY</span>
            <span class="annotation">ギャラリー</span></a>
    </div>
</li>
<li class="nav-item nav-items">
    <div>
        <a href="●●●"><span class="fw700">BLOG</span>
            <span class="annotation">ブログ</span></a>
    </div>
</li>

英文と和文が上下に表示されるようにそれぞれのテキストを記述すると、ほかのメニューとの統一感を出すことができます。

<a href="●●●">にはそれぞれのリンク先（ページのURLまたは相対パス）を記述してください。

＜例＞
リンク先のページをあらかじめフリーページで作成している場合
ページURLを記述してください。

<a href="/view/page/****">

フリーページの作成手順はサポートサイトを参照してください。

■makeshopサポート
【クリエイターモード】フリーページにもヘッダーとフッターを表示させたい
https://www.support.makeshop.jp/design/?p=22594

（２）リンクテキストに下線をつけないようにCSSを追加してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

.nav-list li span

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

.nav-list li span {
    display: block;
    text-align: center;
}

この記述の前に以下のCSSを追記して保存してください。

＜追記後＞

.nav-list li a{
    text-decoration: none;
}
.nav-list li span {
    display: block;
    text-align: center;
}

スマートフォンでハンバーガーメニュー内に表示したい場合は、ヘッダーに横並びに追加せず、ヘッダーの「CONTENTS コンテンツ」をクリックした際に表示されるメニューの中に追加するのがおすすめです。

追加する方法については、以下のページを参照してください。

◆「ITEMS アイテム」の前または後ろに追加する場合

関連記事