• 楽天
  • Yahoo!

【楽天】「買い物かごへジャンプ」ボタンをオリジナル画像に変更する方法

この記事は過去に書かれた「ogaRia繁盛レシピ」を再掲載しています。予めご了承くださいませ。

アイキャッチ

こんにちははじめまして!ogaRiaサポートSです。
今回から私Sも現場で使えるノウハウを提供させていただきます!
CSSカスタムや作業効率UPなどコンテンツ構築面でお力になれればと思います!

よろしくお願いしますm(_ _)m

前回ご紹介しました「お買い物かごボタン」を画像に差し替えるテクニックに続きまして、
最近商品ページにフワっと現れる「買い物かごへボタン」をオリジナルの画像にする方法をご案内します!

画像に「全品送料無料」「期間限定価格」などスポット的に画像を
差し替えるなんて使い方もよいですね!

1. まずはオリジナルの「買い物かごへボタン」を作りましょう

もともと表示されるボタンと入れ替えるオリジナルのボタン画像を用意しましょう。

※推奨サイズ
幅 ~80px
縦 ~100px

※サンプル画像

  参考イメージ

2. 用意した画像をR-Cabinetに登録

参考イメージ

作成した画像は、RMSのR−Cabinetの中に登録します。
登録できると画像のURLが生成されるので、これをコピーします。

ワンポイントアドバイス
楽天GOLDをご契約していて背景透過画像を使う場合はGOLDへ画像を保存して使うと透過画像を使うことができます。

3. CSSを「全ページ共通説明文(大)」に貼り付けます

以下が、お買物かごを画像に差替えるCSSです。
前回ご紹介しました「お買い物かごボタン画像化」をチャレンジした方なら簡単ですね!

・CSS内『画像URL(赤字の部分)』を、先ほどコピーしたR-CabinetのURLに書き換えます
・CSS内『表示位置調整(緑字の部分)』を、下、右からどれぐらい隙間を空けるかの
指定です。 ともに5pxぐらいがバランスがよく綺麗です。
・CSS内『画像サイズ(青字の部分)』を、幅(width)、高さ(height)を指定します。

<style type="text/css">
<!--
#scrollUp{
border:none!important;
bottom:5px;
right:5px;
}
#scrollUp img{
display:none;
}
#scrollUp .nearCart{
background:url(http://image.rakuten.co.jp/ogaria/cabinet/btn.jpg) no-repeat 0 0;
}
#scrollUp,#scrollUp .nearCart{
width: 60px !important;
height: 60px !important;
}
-->
</style>
    

その後CSSをコピーし、RMSの「全ページ共通説明文(大)」に貼り付けます。

全ページ共通説明文登録方法

  1. RMSメインメニュー > 1-2 デザイン設定 > 全ページ共通説明文(大)に入ります
  2. 『自動選択』と書かれているテンプレートの、【編集】リンクをクリックします。
  3. "全ページ共通説明文(大)"編集枠内に、先ほどのCSSを貼り付けます。

以上で完了です!

  

商品ページ内でどこからでも買い物かごへ誘導できるボタンです。
目立たせて購買率を少しでもUPさせましょう!

以上、ogaRiaチームでした!

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメント

1 件のコメント

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。