makeshopサポート │ バナーを任意の箇所に表示したい！

こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回は、ページの任意の場所にバナーを表示する方法をご紹介します！

こんなお悩みありませんか？

・バナーを好きな位置に表示したい
・画像を表示するHTMLソースを知りたい

早速みていきましょう。

makeshopのギガプラス10（100MBサーバー）をご利用される場合、
バナー画像を【100MBサーバー(ギガプラス10)】からアップロードしましょう！

・操作方法は画像やCSSファイルをアップロードしたいも合わせてご参照ください。
・外部サーバーでも可能です。

例えば、商品詳細ページの『この商品について問い合わせる』の上に表示させたい場合
デベロッパーツールを使って、HTMLの記述内容を確認できます。

※デベロッパーツールはGoogle Chromeを利用しております。

デベロッパーツールより『この商品について問い合わせる』のclassが【item-contact】で
あることが分かったので、管理画面　ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細　より【item-contact】を探してみましょう。

商品詳細

初期値HTML欄の501行目に該当のclassがあり、『この商品について問い合わせる』の記述が見つかりました！

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

先ほど見つけた『この商品について問い合わせる』ソースの記述の上に、バナーを表示させる記述を追加します。

<div class="detailBanner">
<img src="画像のURL（パス）" alt="画像名">
</div>

■入力内容補足
・「画像のURL(パス)」：（1）にてファイルサーバーにアップロードした画像ファイルのURL
・「画像名」：任意の名称
※今回は商品詳細ページのバナーなので、それが分かるようなclass名を付けましたが、class名は任意となりますので、お好みの記述内容へ変更してください。

・classをつけると、後からCSSを追記することによりバナーの幅や高さなどを調整するのに便利です。
例えば、バナーの幅を160pxで表示させたい際には、以下のようなCSSを追加すると、該当バナーに対してCSSをあてることができます。

記述例）
.detailBanner img{
width: 160px;
height: auto;
}

バナー

→『この商品について問い合わせる』の上にバナーが表示されました。
『プレビュー』ボタンをクリックして表示の状態を確認し、問題なければ保存してください。

いかがでしたでしょうか。
お好みの位置にバナーを表示したい場合にぜひお役立ください。
バナーを横並びに表示する方法はバナーを同じ間隔で横に並べて表示したい！をご参照ください。

それではまた！

バナーを任意の箇所に表示したい！