• 文字サイズ
解決済

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 Pゴシック", "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">
キーワード:タグ
投稿内容について報告する




  • 返信者:非公開
  • 2018/09/20 20:44
ECマスターズの田中です。

> 「新着・おすすめ」グレーの部分を
> 同ページ上部にございます、
> 「週間ランキング」 のように、赤っぽく、

………(省略)………
  • 返信者:非公開(質問者)
  • 2018/09/20 23:13
どうも、ありがとうございました。

たすかりました。………(省略)………