楽天・Yahoo!キャンペーンスライドバナーを自作する！
記事IT・テクノロジー
表示非表示の日付指定をしたスライドバナーの作り方を以前お伝えしました。今回はこれを使って、楽天市場のキャンペーンスライドバナーを作ってみたいと思います！GOLDサーバーに入れて実際RMSやGOLDのページに表示させるまで！わかりやすい説明に努めますので、一緒にやっていきましょう🎵
楽天市場の例でご説明しますが、Yahoo!ショッピングにもご利用いただけます。（⚠️要トリプルサーバー）
Swiperスライドバナーを用意する
①以前の記事を参考にSwiperスライドバナーを用意して下さい。
②表示非表示の日付を指定するためのJavaScriptも下記を参考に追加しておいて下さい。
楽天キャンペーンバナー画像を用意する
こちらも以前の記事を参考に、同じサイズのキャンペーンバナーを2つ以上ダウンロードしておいて下さい。ここでは616x120pxのバナーで説明していきます。😉
⭐️もちろんオリジナルのバナーでもいいです。ポイントは同じサイズのバナーを2つ以上ということ。
⭐️Yahoo!ショッピング用に作りたい場合は、トリプルサーバーを用意してください。Yahoo!ショッピングもキャンペーンバナーを配布しています。
ダウンロードした画像はswiperフォルダのimgフォルダに入れます。
名前はなんでもいいのですが、ここではevent01.gif, event02.figとしておきます。
⭐️キャンペーンの開催期間、キャンペーンの告知解禁日時（もしそのキャンペーンにあれば）、楽天での露出・特集企画ページのURLも後ほど使用しますのでメモしておくかページを開いておいてくださいね。😉
htmlに期限を入れる
今回は、
- event01.gifの表示は5月1日まで
- event02.gifの表示は期限なし
にするとします。
▼するとhtml内はこのようになりました。
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide js-time_limited" data-appear_time="2023/04/26 01:00:00" data-disappear_time="2023/05/01 23:59:59">
<img src="img/event01.gif" alt="" />
</div>
<div class="swiper-slide">
<img src="img/event02.gif" alt="" />
</div>
</div>
▼ブラウザで確認。今はまだ5月1日なので2つとも表示されました！
左の＜が見えづらいのでシャドーをつけてみます。
CSSに以下を追記してください。
.swiper-button-next,
.swiper-button-prev {
text-shadow: 0 0 5px rgba(100, 100, 100, 0.5);
}
▼見やすくなりました！
swiperフォルダを楽天GOLDサーバーにアップしよう！
楽天GOLDサーバーにswiperフォルダごと入れます。
GOLDサーバーへのアクセス方法がわからない方は下記の記事も参考にしてみてください。😉
⭐️Yahoo!ショッピングはストアクリエイターProからトリプルサーバーに入れてください。（⚠️トリプルサーバーは同じ場所に同じ名前のフォルダやファイルがある場合でも「上書きしてもいいですか？」と聞かれず上書き保存されてしまうので注意してください。）
表示させたいページにiframeでSwiperを表示！
スライドバナーを表示させたいページに、下記を記載します。
<div style="text-align: center;">
<iframe src="https:// www.rakuten.ne.jp/gold/★ショップID★/swiper/index.html" width="616" height="120" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" style="aspect-ratio: 616 / 120; width: 100%; max-width: 616px; height: 100%"></iframe>
</div>
⭐️注意点⭐️
- Yahoo!ショッピングのトリプルに入れた場合は、www.rakuten.ne.jp/の部分がshopping.geocities.jp/となる
- https://の後のスペース詰める
- ★ショップID★のところに、自分のお店のアルファベットのIDを入れる
- 上記はGOLD（またはトリプル）サーバー直下（どのフォルダにも入れてないところ。GOLD（トリプル）サーバーにアクセスして一番最初に見えるところ。）にswiperフォルダを入れた例です。違うところに入れたら、src内を変更してください。
▼ページにも表示されました！
いかがでしたか？
今回は以上になります！
もしよろしければこちらのサービスもご覧いただけたら嬉しいです⭐️
