• 文字サイズ
  • 小
  • 中
  • 大


解決済

お気に入りボタンを好きな画像にする方法

  • 相談者：非公開
  • 2015/05/28 15:58
初歩的な質問で申し訳ございません。

画像URLを入れるまではわかりました。


１、下記HTMLは全部入れるのでしょうか？
２、(《画像URL》)はどこまで残すのでしょうか？（URL）ですか？
/* お気に入り商品登録画像変更 */←これは消さなくても良いですか？
３、入れても表記しないのはプレビューだからですね？
４、下記のような場合どの場所に入れたらよいでしょうか？レフトﾅﾋﾞ有り無しと２パターン使っています。


<style>
/* お気に入り商品登録画像変更 */
body #rakutenLimitedId_aroundCart div.bkm{
width: 306px !important;
}
body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
width: 306px !important;
height: 48px !important;
background: url(《画像URL》) no-repeat 0 0 !important;
}
body div.bookmarkArea div.bkm a.addBkm {
width: 306px !important;
height: 48px !important;
}

/* お気に入りショップ登録画像変更 */
body #rakutenLimitedId_aroundCart div.shopBkm{
width: 306px !important;
padding-left: 0px !important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
width: 306px !important;
height: 48px !important;
background: url(《画像URL》) no-repeat 0 0 !important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm {
width: 306px !important;
height: 48px !important;
}
</style>





その1
<style type="text/css">
<!--

#rakutenLimitedId_aroundCart input[value="買い物かごに入れる"] {
font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
font-size:16px;
font-weight:bold;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #d83526;
padding:9px 18px;
text-decoration:none;
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );

background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
background-color:#fe1a00;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #b23e35;
-webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;
-moz-box-shadow:inset 1px 1px 0px 0px #f29c93;
box-shadow:inset 1px 1px 0px 0px #f29c93;
}
#rakutenLimitedId_aroundCart input[value="買い物かごに入れる"]:hover {
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );
background-color:#ce0100;
}
#rakutenLimitedId_aroundCart input[value="買い物かごに入れる"]:active {
position:relative;
top:1px;
}

img{border:0;}
#top table{text-align: center; width: 700px;}
#top img{padding-bottom: 5px;}
#top td{padding: 0 10px;}
#menu {background: #315e8b; width: 948px; float: left; list-style: none; margin: 0; padding-left: 6px;}
#menu li {float: left; font: 14px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; margin: 0; padding: 0;}
#menu a {background: #315e8b url("http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/seperator.gif") bottom right no-repeat; color: #FFF; display: block; float: left; margin: 0; padding: 8px 33px; text-decoration: none;}
#menu a:hover {background: #5ad2f3; color: #fff; padding-bottom: 8px;}
.left{width:180px;}
.left1{background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/le13.gif);}
.left2{width:100%;font-size: 12px; line-height:150%; font-family:century gothic; text-align: center;}
.mb{margin-bottom:10px;}
.cate1 a:link, .cate1 a:visited
{display:block; background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate1.gif); text-decoration:none; line-height:30px; font-family:century gothic; font-size:12px; text-align:left; margin-top: 5px; padding-left: 24px;}
.cate1 a:hover{background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate2.gif); font-size:12px; text-decoration:none;}
.cate2 a:link, .cate2 a:visited
{display:block; background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate3.gif); text-decoration:none; line-height:30px; font-family:century gothic; font-size:12px; text-align:left; padding-left: 26px;}
.cate2 a:hover{background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate4.gif); font-size:12px; text-decoration:none;}
.footer{ width: 950px; background-color: #fff;}
.footer2{ padding:7px; font-size:12px; line-height:150%;}
.footer table{margin-top: 10px;}
.red{ color: red;}
#calendar2{border:1px #133F6B solid; text-align:center; font-size: 12px; width:180px;}
#calendar2 img{ margin: 5px 0;}
.calendar {font-family:century gothic;font-size:11px;width:160px;background-color:#E0EDF9;border-collapse:collapse;}
/*年と月*/
.calendar caption { background-color: #315E8B;color: #fff;padding: 3px 0;}
/*曜日*/
.calendar thead th {background-color: #A1C5E9;}
/*日付*/
.calendar td {text-align:center;font-size:11px;border-bottom:solid #333333 1px;}
/*土曜日*/
.calendar .sat {color:#0000ff;}
/*日曜日*/
.calendar .sun {color:#ff0000;}
/*休日*/
.calendar .holiday {background-color:#ff9999;}
.lossleader_item_name{font-size:12px;}
h1{ font-size: 15px; color: #315E8B;}
#tentyou{border:1px #133F6B solid; text-align:center; font-size: 12px; width:180px; line-height: 1.5; background-color: #ffffff; padding-top:5px;}





-->
</style>
<body background="http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/bg.gif">

<img src="http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/imgrc0072717239.jpg" border="0" alt="ここ掘れワン" width="950" height="100" /><br />
<ul id="menu">
<li><a href="http://www.rakuten.co.jp/SHOP-URL/">HOME</a></li>
<li><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">お知らせ</a></li>
<li><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/">商品一覧</a></li>
<li><a href="http://www.rakuten.co.jp/SHOP-URL/info2.html">決済・配送・返品</a></li>
<li><a href="http://www.rakuten.co.jp/SHOP-URL/info.html">会社概要</a></li>
<li><a href="http://order.step.rakuten.co.jp/rms/mall/basket/vc?shop_bid=269978&__event=ES01_003_001">買い物かご</a></li>
<li><a href="https://ask.step.rakuten.co.jp/rms/mall/pa/ask/vc?__event=PA02_000_001&ask_text=%C5%B9%C4%B9%A4%CB%BC%C1%CC%E4%A4%B9%A4%EB&shopurl=koko1&shop_bid=269978&shop_name=%A4%B3%A4%B3%B7%A1%A4%EC%A5%EF%A5%F3&myshop=0">お問い合わせ</a></li>
</ul>

その２

<style type="text/css">
<!--

#rakutenLimitedId_aroundCart input[value="買い物かごに入れる"] {
font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
font-size:16px;
font-weight:bold;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #d83526;
padding:9px 18px;
text-decoration:none;
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );

background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );
background-color:#fe1a00;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #b23e35;
-webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;
-moz-box-shadow:inset 1px 1px 0px 0px #f29c93;
box-shadow:inset 1px 1px 0px 0px #f29c93;
}
#rakutenLimitedId_aroundCart input[value="買い物かごに入れる"]:hover {
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
background:-ms-linear-gradient( top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ce0100), color-stop(100%, #fe1a00) );
background-color:#ce0100;
}
#rakutenLimitedId_aroundCart input[value="買い物かごに入れる"]:active {
position:relative;
top:1px;
}

img{border:0;}
#top table{text-align: center; width: 700px;}
#top img{padding-bottom: 5px;}
#top td{padding: 0 10px;}
#menu {background: #315e8b; width: 948px; float: left; list-style: none; margin: 0; padding-left: 6px;}
#menu li {float: left; font: 14px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; margin: 0; padding: 0;}
#menu a {background: #315e8b url("http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/seperator.gif") bottom right no-repeat; color: #FFF; display: block; float: left; margin: 0; padding: 8px 33px; text-decoration: none;}
#menu a:hover {background: #5ad2f3; color: #fff; padding-bottom: 8px;}
.left{width:180px;}
.left1{background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/le13.gif);}
.left2{width:100%;font-size: 12px; line-height:150%; font-family:century gothic; text-align: center;}
.mb{margin-bottom:10px;}
.cate1 a:link, .cate1 a:visited
{display:block; background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate1.gif); text-decoration:none; line-height:30px; font-family:century gothic; font-size:12px; text-align:left; margin-top: 5px; padding-left: 24px;}
.cate1 a:hover{background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate2.gif); font-size:12px; text-decoration:none;}
.cate2 a:link, .cate2 a:visited
{display:block; background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate3.gif); text-decoration:none; line-height:30px; font-family:century gothic; font-size:12px; text-align:left; padding-left: 26px;}
.cate2 a:hover{background-image:url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/cate4.gif); font-size:12px; text-decoration:none;}
.footer{ width: 950px; background-color: #fff;}
.footer2{ padding:7px; font-size:12px; line-height:150%;}
.footer table{margin-top: 10px;}
.red{ color: red;}
#calendar2{border:1px #133F6B solid; text-align:center; font-size: 12px; width:180px;}
#calendar2 img{ margin: 5px 0;}
.calendar {font-family:century gothic;font-size:11px;width:160px;background-color:#E0EDF9;border-collapse:collapse;}
/*年と月*/
.calendar caption { background-color: #315E8B;color: #fff;padding: 3px 0;}
/*曜日*/
.calendar thead th {background-color: #A1C5E9;}
/*日付*/
.calendar td {text-align:center;font-size:11px;border-bottom:solid #333333 1px;}
/*土曜日*/
.calendar .sat {color:#0000ff;}
/*日曜日*/
.calendar .sun {color:#ff0000;}
/*休日*/
.calendar .holiday {background-color:#ff9999;}
.lossleader_item_name{font-size:12px;}
h1{ font-size: 15px; color: #315E8B;}
#tentyou{border:1px #133F6B solid; text-align:center; font-size: 12px; width:180px; line-height: 1.5; background-color: #ffffff; padding-top:5px;}

-->
</style>
<body background="http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/bg.gif">

<img src="http://image.rakuten.co.jp/SHOP-URL/cabinet/02251520/imgrc0072717239.jpg" border="0" alt="ここ掘れワン" width="950" height="100" /><br />
<ul id="menu">
<li><a href="http://www.rakuten.co.jp/SHOP-URL/">HOME</a></li>
<li><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/">お知らせ</a></li>
<li><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/">商品一覧</a></li>
<li><a href="http://www.rakuten.co.jp/SHOP-URL/info2.html">決済・配送・返品</a></li>
<li><a href="http://www.rakuten.co.jp/SHOP-URL/info.html">会社概要</a></li>
<li><a href="http://order.step.rakuten.co.jp/rms/mall/basket/vc?shop_bid=269978&__event=ES01_003_001">買い物かご</a></li>
<li><a href="https://ask.step.rakuten.co.jp/rms/mall/pa/ask/vc?__event=PA02_000_001&ask_text=%C5%B9%C4%B9%A4%CB%BC%C1%CC%E4%A4%B9%A4%EB&shopurl=koko1&shop_bid=269978&shop_name=%A4%B3%A4%B3%B7%A1%A4%EC%A5%EF%A5%F3&myshop=0">お問い合わせ</a></li>
</ul>





投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
セミナー詳細はこちら
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
ご視聴はこちら

  • 返信者：非公開
  • 2015/05/28 16:13
＞１、下記HTMLは全部入れるのでしょうか？
はい、全部入れていただきます。
既存の<style> ～ </style>タグがありましたら、
その中に<s………（省略）………
続きを読む
  • 返信者：非公開（質問者）
  • 2015/05/28 17:30
ありがとうございます。表記しました。………（省略）………
続きを読む
このフォーラムへの質問は終了しました
質問を検索する
返信も検索対象にする

カテゴリーから探す