フリースペースパーツを使って表示できます。

ご質問

グローバルデザイン機能やGOLD製特集ページで、楽天市場から配布されたバナーや、他社のにぎわいツールを表示できますか。

ご回答

フリースペースパーツを使うと表示できます

ビーノの「グローバルデザイン」と「GOLD製特集ページ」では、フリースペースパーツを使ってHTMLタグを貼り付けることができます。

楽天市場で配布されているカウントダウンバナーや、他社のランキングツール・にぎわいツールなどを表示したい場合は、フリースペースパーツを活用してください。

ご設定方法

１．対象の機能を選択する

ビーノ管理画面から、設定したい対象に応じて以下の機能を選択します。

• グローバルデザイン機能
• GOLD製特集ページ

　

２．「パーツを追加する」から表示先を選ぶしょう

左ナビの【パーツを追加する】を選択し、バナーやツールを表示したい場所を選びます。

　

３．「フリースペース」パーツを追加する

追加するパーツの一覧から【フリースペース】を選択します。
フリースペースパーツを追加すると、左側にパーツの設定画面が表示されます。



　

４．編集エディタを開く

【編集エディタを開く】をクリックします。




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



編集エディタでは、文字入力のほか、文字色の変更、サイズの変更、リンク挿入、画像挿入などができます。
※編集詳細は、別途しっかりモードに関する説明ページをご覧ください（今回の操作では不要です）

　

５．HTMLモードへ切り替える

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



HTMLタグモードに切り替わったら、楽天市場から配布されたバナータグや、他社ツールのHTMLタグを貼り付けます。

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

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

　

６．最後に「決定する」をクリックする

プレビューを確認し、問題がなければ【決定する】をクリックします。
その後、ページの保存・反映まで進めてください。

　

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

楽天市場などから配布されたタグをそのまま貼り付けると、画像の横幅が合わない場合があります。

たとえば、以下のように画像タグに横幅指定が入っていない場合、表示エリアに対して余白が出たり、スマートフォン表示ではみ出したりすることがあります。

解決方法

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

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

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

↓こちらを以下のように修正します！↓

【 border=”0″ 】 の後ろに半角スペースを１つ空けて、横幅を指定する 【 width=”100%” 】 を追加しています。

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

このように設定すると、バナー画像が表示エリアの横幅に合わせて拡大・縮小されます。

設定をした場合

他社ツールのHTMLタグも同じ手順で貼り付けできます

他社が提供しているランキングツールやにぎわいツール、外注制作したHTMLタグなども、同じ手順でビーノへ埋め込むことができます。

ただし、フリースペースパーツに貼り付けるHTMLタグや他社ツールの表示内容は、ビーノのサポート対象外です。

表示が崩れる場合や、ツールが正しく動作しない場合は、タグの提供元へ確認してください。

関連キーワード
カウントダウンバナー カウンタバナー フリースペース使い方 他社サービス フリースペース 自動更新 HTMLタグ にぎわい 速報