楽天やYahoo!が配布するイベントバナーのHTMLタグを貼り付けたい

はい!以下にて簡単にできます。

1.PCトップページ編集に入りましょう

まず、管理画面トップから【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の貼り付けも可能ですので、是非とも気軽にご利用してみてくださいね!

知りたかった点は解決しましたか?

関連するFAQなど