PCにてバナーを表示した際の見せ方について

Question

こんにちは。
お世話になっております。
PCにて商品ページを開いた際ヘッダーの下イベントバナーが表示されるようにしております。
(バナーの下から商品の参考画像が20枚縦に並んでいきます)

バナーのサイズもまちまちなので何だか取り止めのないデザインになっております。
添付画像のようにバナーを4種類載せる際には縦横2こつづなどの方が見やすいでしょうか。

また、自分でHTMLの知識がないため(画像やリンクをはめ込む程度はできます)、そのまま使用できるようなデザインのHTMLコードを教えていただけないでしょうか。
現在のバナーの並びをスクリーンショットしたものを添付します。
よろしくお願いいたします。###HR######IMG0f0afa5cbcfde05b9af54740a8e932fa4.pngIMG0###

Answer

ECマスターズの土屋です。

>バナーのサイズもまちまちなので何だか取り止めのないデザインになっております。
>添付画像のようにバナーを4種類載せる際には縦横2こつづなどの方が見やすいでしょうか。

私の意見となってしまいますが、
バナー画像をページに訪れたにユーザーに確実に
お届けしたい場合は、
おっしゃる通り２つずつ横並びにされた方が、確実にユーザーに
バナー情報を届けることができます。
https://ec-masters.gyazo.com/4743c088d7564e86981befc200c0cc7d

ただ、
レイアウトに正解が無い事も事実ですので、
様々なレイアウトを試して頂き、
根拠となる数値を元に、変更していただく事を推奨いたします。

>また、自分でHTMLの知識がないため(画像やリンクをはめ込む程度はできます)、そのまま使用できるようなデザインのHTMLコードを教えていただけないでしょうか。

事務局側でソースコードを作成させていただきました。
こちらのHTMLを楽天GOLDにアップロードして頂き、
ご利用くださいませ。

【ソース】




    
    
    
    Document
    
        li {
            list-style-type: none;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .banner-area {
            width: 950px;
            margin: auto;
        }

        .banner-area ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .banner-area ul li {
            margin: 5px 0;
        }

        .banner-area ul li {
            width: 450px;
        }

        .banner-area ul li img {
            width: 100%;
        }

        .banner-area ul li iframe {
            transform: scale(0.477);
        }

        .test {
            position: relative;
        }

        .test iframe {
            position: absolute;
            left: -55.5%;
            top: -50%;
        }
    



    
        
            
            
            
            
        
    



ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

また、別のご提案となりますが、
下記のキャプチャのように、
検索窓の下に、カウントダウンを表示させるといった方法もございます。
https://ec-masters.gyazo.com/c93cb1ce7c3905fb32c56f390516a3d4

上記２つともご参考にして頂けますと
幸いです。

どうぞよろしくお願いします。

Answer

先日はご回答いただきありがとうございます。
ご挨拶が遅くなり申し訳ございませんでした。

普段、RMS>デザイン設定>PCデザイン設定>共通説明文（大）よりバナーの設定をしています。
こちらへですと教えていただきましたコードを設定することができないのですが、上記の場所では先のようなレイアウトにすることはできないでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの土屋です。

>普段、RMS>デザイン設定>PCデザイン設定>共通説明文（大）よりバナーの設定をしています。
>こちらへですと教えていただきましたコードを設定することができないのですが、上記の場所では先のようなレイアウトにすることはできないでしょうか。

お世話になっております。

こちらに関しまして、
楽天の仕様による禁止タグの混在で
登録できなかったことが考えられます。

対策方法としましては、禁止タグの除去を行うことで
対応することが可能です。

詳しい楽天の禁止タグに関しましては、下記のマニュアルを
参考にして頂けますと幸いです。

【禁止タグについて】
https://navi-manual.faq.rakuten.net/shop-setting/000044230

今回の場合ですと
「許可されないHTMLタグ"!doctype"が入力されています」
「許可されないHTMLタグ"meta"が入力されています」
とエラーが出力されておりますので
下記のように記載することで登録をすることができます。

お手数をおかけしますが、
一度動作の確認をして頂けますと幸いです。

どうぞよろしくお願いします。


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


li {
list-style-type: none;
}

* {
padding: 0;
margin: 0;
}

.banner-area {
width: 950px;
margin: auto;
}

.banner-area ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.banner-area ul li {
margin: 5px 0;
}

.banner-area ul li {
width: 450px;
}

.banner-area ul li img {
width: 100%;
}

.banner-area ul li iframe {
transform: scale(0.477);
}

.test {
position: relative;
}

.test iframe {
position: absolute;
left: -55.5%;
top: -50%;
}











＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝