楽天配布のイベントバナーや他社ツールを表示したい

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

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

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

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

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

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

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

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



フリースペースパーツを追加(クリック)すると、左にパーツの設定が現れたかと思います。
※フリースペースパーツがどういったものかについては、上部の説明をご覧ください

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




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



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

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


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



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

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


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


こちらで問題なければ【決定】ボタンを押し、反映まで進めましょう。

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

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

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



解決方法

そんなときは、上の説明で貼り付けた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!の違い 次の開発予定 動画で学ぶビーノ 導入事例