【トップページ・特集ページ】楽天配布のバナーや他社にぎわいツールは表示できますか?

フリースペースパーツを活用しましょう!

ご設定方法

1.PCトップページor特集ページ作成を選択

まず、管理画面トップから【PCトップページを作る】を選択しましょう。

2.「パーツの追加」よりコンテンツの表示先を選びましょう

左ナビの【パーツを追加する】を選択し、バナーを貼りたい場所(エリア)を選択してください。

3.「フリースペース」パーツの追加

エリアを選択すると、追加するパーツが選べるようになります。

今回はHTMLタグを使いますので、そういった場合には【フリースペース】というパーツを選択しましょう。



フリースペースパーツを追加(クリック)すると、左にパーツの設定画面が表示されるかと思います。

4.編集エディタを開く

さて、次は編集エディタを開きましょう。
【編集エディタを開く】というボタンをクリックしてください。




すると、このような編集エディタ画面が表れます。



この編集エディタ機能を使うことで、自由に文字入力が出来るだけでなく、文字色の変更やサイズの変更、リンク挿入、画像挿入などが可能です。

※編集詳細は、別途しっかりモードに関する説明ページをご覧ください(今回の操作では不要です

5.HTMLモードへ切り替える

HTMLタグを貼り付けるには、編集エディタ画面内の【<>】ボタンをクリックします。



そうすると、HTMLタグモードに切り替わりますので、こちらにHTMLタグを貼り付けてください。

楽天市場からのイベントバナータグを貼り付けた例


※もう一度【<>】ボタンをクリックするとプレビュー確認ができます。

6.最後に「決定する」をクリック

プレビューを確認し、問題がなければ【決定する】をクリックし、反映まで進めましょう。

横幅をぴったりに合わせるには?

モール側からもらったタグをそのまま貼り付けた場合、たまに記述が不足していることが原因でサイズが綺麗に合わない場合があります。

例えば、以下は楽天市場から配布されたイベントバナータグをそのまま貼った場合です。
横幅が余っていたり、逆にスマホで見るとはみ出していたり…。



解決方法

そんなときは、上の説明で貼り付けたHTMLタグを一部修正しましょう!

おそらく配布されたタグは以下のようなものかと思います。

<a href="https://〜〜〜〜〜">
<IMG src="https://〜〜〜" border="0">
</a>

上記をこのようにします!↓

<a href="https://〜〜〜〜〜">
<IMG src="https://〜〜〜" border="0" width="100%">
</a>

border="0" の後ろに半角スペースを1つ空けて、 width="100%" という文字を追加しています。

こうすることでバナー画像を画面横幅に合わせて拡大縮小される状態にできるのです!

設定をした場合

他社ツールのHTMLタグも同じ手順で貼り付け可能

例えば他社様が提供されているランキングツールや賑わいツール、その他外注制作されましたHTMLタグなども上記手順にてビーノへ埋め込むことが可能です。

フリースペースパーツおよびHTMLタグ関連につきましては大変恐縮ながらビーノのサポート対象外となってしまいますが、ご状況に応じてご活用いただけますと幸いです!


 

関連FAQ
楽天やYahoo!から配布されたバナーがスマホ表示ではみ出る

関連キーワード
カウンターバナー カウンタバナー カウントダウンバナー ショップレビュー
この記事について評価をお願いいたします
  • 役に立った (0)
  • わかりにくい (0)
  • 必要な情報がなかった (0)
  • 探しにくかった (0)

関連しそうなFAQなど

ビーノとSUMAOU!の違い 次の開発予定 動画で学ぶビーノ 導入事例