【クリエイターモード】バナーを6つ以上表示させたいです。方法を教えてください。 – makeshop よくある質問

クリエイターモードでバナーを6つ以上表示させたい場合は、バナーを表示しているHTMLに、表示させたいバナーの記述を追記します。

＜手順＞

編集する前にデザインセットのコピーボタンをクリックしてバックアップを保管し、元の状態に戻せるように準備したうえで作業をおこなってください。

■makeshopサポート
ショップデザインバックアップしてますか？！

※すでにデザインセットが5個以上ある場合は以下を参照してください。
■よくある質問
【クリエイターモード】デザインセットが5個以上あるとコピーできません。バックアップを取る方法を教えてください。

「バナー管理」に登録したバナーを表示する基本の方法は、以下を参照してください。
■makeshopサポート
クリエイターモードで「バナー管理」に登録したバナーを表示したい

＜例１＞テンプレート【Complete】の場合

（１）バナーを表示しているHTMLを確認する

テンプレート【Complete】では、バナーを表示している部分が以下のようになっています。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「バナー」
モジュールID：banner

<{if $shop.banner.has_item}>
    <section class="banner-area">
        <{section name=i loop=$shop.banner.list}>
            <a href="<{$shop.banner.list[i].url}>" class="loop-shop-banner" target="<{$shop.banner.list[i].target}>"><img src="<{$shop.banner.list[i].image_url}>"></a>
        <{/section}>
    </section>
<{/if}>

（２）バナーのHTMLを追記する

上記の場合は<{/section}>と</section>の間に、追加したいバナーのHTMLを追記して保存してください。

<a href="リンク先URL" class="loop-shop-banner"><img src="画像のURL" alt=""></a>

リンク先URL：バナーをクリックした時に開くページのURLまたはページの相対パス
画像のURL：表示させたいバナー画像のURL

複数のバナーを追加する場合は、上記の記述を必要なバナーの個数分追記してください。

<a href="リンク先URL" class="loop-shop-banner"><img src="画像のURL" alt=""></a>
<a href="リンク先URL" class="loop-shop-banner"><img src="画像のURL" alt=""></a>
<a href="リンク先URL" class="loop-shop-banner"><img src="画像のURL" alt=""></a>

＜例２＞テンプレート【Manabito】の場合

（１）バナーを表示しているHTMLを確認する

ショップデザイン／テンプレート選択・編集／クリエイターモード／編集したい画面の「HTML」欄内に一度カーソルを置いた状態でキーボードの Ctrl と F キーを同時に押し、表示される検索窓に

$shop.banner

と入力（コピー＆ペースト）し、キーボードの Enter キーを押して、バナー表示のソースコードを見つけてください。

テンプレート【Manabito】では、バナーを表示している部分が以下のようになっています。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ　「HTML」欄

<{if $shop.banner.has_item}>
    <ul class="contents-banner-list">
    <{section name=i loop=$shop.banner.list}>
        <li>
            <a href="<{$shop.banner.list[i].url}>" target="<{$shop.banner.list[i].target}>">
                <img src="<{$shop.banner.list[i].image_url}>">
            </a>
        </li>
    <{/section}>
    </ul>
<{/if}>

（２）バナーのHTMLを追記する

上記の場合は<{/section}>と</ul>の間に、追加したいバナーのHTMLを追記して保存してください。

<li><a href="リンク先URL"><img src="画像のURL" alt=""></a></li>

複数のバナーを追加する場合は、上記の記述を必要なバナーの個数分追記してください。

<li><a href="リンク先URL"><img src="画像のURL" alt=""></a></li>
<li><a href="リンク先URL"><img src="画像のURL" alt=""></a></li>
<li><a href="リンク先URL"><img src="画像のURL" alt=""></a></li>

＜ご注意＞

上記は対処策の一例です。あくまでもひとつの例として参考にしてください。

追記したバナーは、「ショップロゴ／バナー管理」に登録したバナーの後ろに表示されます。
追記する場所が <{if $shop.banner.has_item}> 〜 <{/if}> の内側にあるため、「ショップロゴ／バナー管理」にバナーが1件も登録されていないと、追記したバナーも表示されません。
HTMLに追記したバナーは「ショップロゴ／バナー管理」には表示されません。差し替えや削除は、HTMLを編集して行ってください。

修正が難しい場合は有料の制作代行プランのご利用を検討してください。

→ おてがる更新代行サービス

「ショップロゴ／バナー管理」に登録したバナーを利用せず、HTMLだけでバナーを表示する方法は、以下のサポートサイトで紹介しています。ソースコードを作成できるツールへのリンクもありますので、あわせて参考にしてください。

◆関連記事
■makeshopサポート
バナーを同じ間隔で横に並べて表示したい！