- 文字サイズ変更
- 小
- 中
- 大
解決済
ecステーション おすすめショーケース > テンプレート編集につままして。
- 相談者：非公開
- 2018/09/20 16:45
おせわになります。
トップページのhttps://www.rakuten.co.jp/SHOP-URL/
「新着・おすすめ」グレーの部分を
同ページ上部にございます、
「週間ランキング」 のように、赤っぽく、また縦の長さを
もうすこし 伸ばしたいのですが、教えてくださいませ。
どうぞよろしくお願いいたします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>ランキング</title>
<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#sliderbox').bxSlider({
auto:true,
pager:false,
minSlides: 1,
maxSlides: 3,
slideWidth: 200,
speed:700,
pause:2000
});
});
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #CCC;
}
.title {
background-color: #999;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight:bold;
color:#FFF;
text-align:center;
}
#sliderbox {
}
.bx-wrapper{
position:relative;
}
.pager {
margin: 0px;
padding: 0px;
}
#sliderbox .item-box .item-box-in {
margin: 10px 20px;
position: relative;
background-color: #FFF;
border: solid 20px #FFF;
border-radius: 1em;
}
a.item_link:link{
color:#69F;
text-decoration:none;
}
a.item_link:visited{
color:#69F;
text-decoration:none;
}
a.item_link:hover{
color:#F60;
text-decoration:none;
}
a.item_link:active{
color:#69F;
text-decoration:none;
}
.item-pic {
display: block;
width: 100%;
}
p.item-name {
margin-top: 10px;
font-size: 0.75em;
margin-bottom: 0px;
}
.price {
font-size:0.7em;
color: #F00;
}
.bx-default-pager {
margin: 0px auto;
text-align: center;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-pager-item {
display: inline-block;
text-align: center;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
.bx-wrapper .bx-prev {
left: 10px;
background: url(left_ct1.png) no-repeat
}
.bx-wrapper .bx-next {
right: 10px;
background: url(right_ct1.png) no-repeat
}
.bx-wrapper .bx-prev:hover {
background: url(left_ct1_h.png) no-repeat
}
.bx-wrapper .bx-next:hover {
background: url(right_ct1_h.png) no-repeat
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 40%;
outline: 0;
width: 30px;
height: 75px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
.bx-pager-link {
font-weight: bold;
text-decoration: none;
}
.bx-pager-link a:link {
color: #F00;
text-decoration: none;
}
a:visited {
color: #800080;
text-decoration: none;
}
a:hover {
color: #F60;
text-decoration: none;
}
a:active {
color: #F90;
text-decoration: none;
}
.bx-pager-link active {
color: #f00;
}
.bx-controls-direction a:link {
color: #F00;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color:#000;
text-decoration: none;
border-color:#000;
}
a:active {
color: #000;
text-decoration: none;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="title">新着・おすすめ</div>
<div id="sliderbox">
トップページのhttps://www.rakuten.co.jp/SHOP-URL/
「新着・おすすめ」グレーの部分を
同ページ上部にございます、
「週間ランキング」 のように、赤っぽく、また縦の長さを
もうすこし 伸ばしたいのですが、教えてくださいませ。
どうぞよろしくお願いいたします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>ランキング</title>
<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#sliderbox').bxSlider({
auto:true,
pager:false,
minSlides: 1,
maxSlides: 3,
slideWidth: 200,
speed:700,
pause:2000
});
});
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #CCC;
}
.title {
background-color: #999;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight:bold;
color:#FFF;
text-align:center;
}
#sliderbox {
}
.bx-wrapper{
position:relative;
}
.pager {
margin: 0px;
padding: 0px;
}
#sliderbox .item-box .item-box-in {
margin: 10px 20px;
position: relative;
background-color: #FFF;
border: solid 20px #FFF;
border-radius: 1em;
}
a.item_link:link{
color:#69F;
text-decoration:none;
}
a.item_link:visited{
color:#69F;
text-decoration:none;
}
a.item_link:hover{
color:#F60;
text-decoration:none;
}
a.item_link:active{
color:#69F;
text-decoration:none;
}
.item-pic {
display: block;
width: 100%;
}
p.item-name {
margin-top: 10px;
font-size: 0.75em;
margin-bottom: 0px;
}
.price {
font-size:0.7em;
color: #F00;
}
.bx-default-pager {
margin: 0px auto;
text-align: center;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-pager-item {
display: inline-block;
text-align: center;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
.bx-wrapper .bx-prev {
left: 10px;
background: url(left_ct1.png) no-repeat
}
.bx-wrapper .bx-next {
right: 10px;
background: url(right_ct1.png) no-repeat
}
.bx-wrapper .bx-prev:hover {
background: url(left_ct1_h.png) no-repeat
}
.bx-wrapper .bx-next:hover {
background: url(right_ct1_h.png) no-repeat
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 40%;
outline: 0;
width: 30px;
height: 75px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
.bx-pager-link {
font-weight: bold;
text-decoration: none;
}
.bx-pager-link a:link {
color: #F00;
text-decoration: none;
}
a:visited {
color: #800080;
text-decoration: none;
}
a:hover {
color: #F60;
text-decoration: none;
}
a:active {
color: #F90;
text-decoration: none;
}
.bx-pager-link active {
color: #f00;
}
.bx-controls-direction a:link {
color: #F00;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color:#000;
text-decoration: none;
border-color:#000;
}
a:active {
color: #000;
text-decoration: none;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="title">新着・おすすめ</div>
<div id="sliderbox">
キーワード：タグ
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2018/09/20 20:44
ECマスターズの田中です。
> 「新着・おすすめ」グレーの部分を
> 同ページ上部にございます、
> 「週間ランキング」 のように、赤っぽく、
………（省略）………
> 「新着・おすすめ」グレーの部分を
> 同ページ上部にございます、
> 「週間ランキング」 のように、赤っぽく、
………（省略）………
- 返信者：非公開（質問者）
- 2018/09/20 23:13
どうも、ありがとうございました。
たすかりました。………（省略）………
たすかりました。………（省略）………
このフォーラムへの質問は終了しました
質問を検索する