今回は、楽天の大型イベント(楽天お買い物マラソン・スーパーSALE)などで使えるカウントダウンタイマーの実装方法を紹介します。HTMLがわからない方でもコピペで実装できますので、ぜひご覧ください!もくじ店舗にカウントダウンタイマーを設置するメリット店舗ページへカウントダウンタイマーを設置する方法1.HTMLを作成2.終了日付を変更します3.テキストを変更します4.上級者編(CSSカスタマイズ)5.楽天goldへアップする6.iframeをRMSの好きな場所に貼り付ける7.実装完了まとめ店舗にカウントダウンタイマーを設置するメリット楽天のイベントは期間内にどれだけ売り切れるかが勝負です。そのために店舗の方はページに様々な仕掛けをすると思いますが、よく使われるのが今回ご紹介するカウントダウンタイマーです。目の前で限定期間の残り時間がどんどん減っていくカウントダウンタイマーを付けることで、効果的に期間限定をアピールすることができ、ユーザーの購買欲を高めることができます。お買い物マラソンやスーパーSALEなど仕込みを入れているときに、このカウントダウンタイマーを併用することで購買率アップが期待できます。HTML初心者の方でも簡単に設置できますので、ぜひ活用してみてください。店舗ページへカウントダウンタイマーを設置する方法ここからは、楽天の店舗ページにカウントダウンタイマーを設置する方法を説明していきます。前提に、「楽天gold」が使用できる環境であることを確認しましょう。今回作成するファイルは楽天goldに設置してから読み込みますので、楽天goldが使える段階まで準備しておきましょう。下記をそのままコピーアンドペーストし、拡張子をHTMLで保存します。名前は何でも構いませんが、今回は「countdown.html」として保存します。HTMLページを作成するにはエディタが必要です。Windowsの方は、さくらエディタをMacの方はmiをおすすめします。ここで日付を指定」の部分に、イベントの終了日時を入れてください。ここに入れた日時に合わせてカウントダウンが始まります。3.テキストを変更します33行目にある「お買い物マラソン終了まであと」の文言は、イベントに合わせて変更してください。74行目の「終了しました」は、終了したときに出る文言ですので自由に変更してください。4.上級者編(CSSカスタマイズ)CSSの知識がある方は、気づいたかもしれませんが14行目〜27行目はカウントダウンタイマーのスタイルを指定しています。この部分でフォントサイズやカラーなどを自由に変更できます。5.楽天goldへアップするここまで編集ができましたら、楽天goldの任意のフォルダにアップしてください。直下にアップロードした場合のURLは、下記になります。https://www.rakuten.ne.jp/gold/店舗名/countdown.html1https://www.rakuten.ne.jp/gold/店舗名/countdown.html6.iframeをRMSの好きな場所に貼り付けるHTMLファイルを楽天goldにアップしましたら、最後にRMS内に貼り付けます。おすすめは、ヘッダー・フッター・レフトナビのヘッダー部分です。ヘッダーに設置することで店舗トップページ・商品ページどちらからでもユーザーの目に付きます。下記を好きな場所に貼り付けてください。scrolling="no"></iframe>src=後のURLは、先程アップロードしたgoldのURLに差し替えてください。幅はwidth=の部分で指定できます。店舗ページに合わせて変更してください。高さは基本的にはこのままでお使いいただけます。7.実装完了うまく実装できると、下記のような表示になるかと思います。まとめ簡単にコピペだけでカウントダウンタイマーが実装できましたね。一度設置をしておけば、終了後も自動で「終了しました」と文言を出してくれるので慌てて外す必要もありません。フロントエンドエンジニア・デザイナーの社員Aです。更新頻度が多いかと思います。このブログのテーマも作成しました。一人旅がだいすきで、特に東南アジアを周っています。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。MAX】2018年10月19日10今話題のLINEのオープンチャットとは?実際に参加してみた2019年09月11。