<!-- ◇◇◇ ECステーション「にぎわいランキングR3」◇◇◇ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

/*===========================================================
ランキング_たて型_タイプA_ホワイト(RT-A01)

★にぎわいランキングR3を利用すれば全自動で更新できます。★
https://www.intecrece.co.jp/ec/ranking/index.html
=============================================================*/

/*CSS編集について:*/
/*値を変更する際には半角小文字英数字を使用*/
/*誤って全角スペースを入れないようご注意ください。*/
/*横幅を変更する場合は『●サイズ調整1〜3』のpx数を調整します。*/


/*◇◇◇ランキング外枠全体◇◇◇*/
.r3-wrap{
width: 160px; /*●サイズ調整1*//*全体幅を指定*/
border: 1px solid #999 ;/* 全体外枠線(線幅|線種(点線dotted、破線dashed)|線色)*/
}

/*外枠全体の幅は「widthの幅+borderの線幅(左右分)」です。*/
/*外枠線を太くした場合はその分を全体幅から差し引きして調整。*/


/*◇◇◇上部タイトル設定◇◇◇*/
.r3-title{
font-size: 12pt;/*文字サイズ*/
font-weight: bold; /* bold → normalで標準 */
color: #333333;/* タイトル部分の文字色 */
text-align: left;/* 左寄left 右寄right 中央center */
padding:5px;/*タイトル文字周りの余白設定*/
margin:0px;
background-color: #efefef;/* タイトル部分の背景色 */
}

.r3-title-data{/* 更新日の文字設定 */
font-size: 9pt;/*文字サイズ*/
font-weight: normal; /* normal → boldで太字 */
color: #333333;/*文字色*/
}


/*◇◇◇商品ボックス設定◇◇◇*/

.r3-item-box{
margin: 2px;/* 外枠までの余白 */
padding: 0 0 5px 0;/* 内側の余白(上 右 下 左の順に余白を設定) */
border: 0px solid # ;/* 商品ボックスに枠線(線幅|線種|線色) */
border-bottom: 1px dotted #999999; /* 商品ボックス下の区切り線*/
background-color: #ffffff;/* 商品ボックス内塗り潰し色 */
}


/*◇◇◇順位画像サイズ設定◇◇◇*/

.r3-ranking-pict{
width: 150px;/*●サイズ調整2*/
}

/*順位画像のポジション調整-------*/

.r3-ranking-pict-pisition{
text-align: center;/* 左寄left 右寄right 中央center */
padding-top: 5px;/* 上の余白 */
}


/*◇◇◇順位変動矢印◇◇◇*/

/*上下矢印サイズ設定-------------------*/
.r3-ranking-arrow{
width: 20px;/* 横幅を指定してサイズ調整 */
}

/*上下矢印のポジション調整-------------*/
.r3-arrow-pisition{
text-align: left;/* 左寄left 右寄right 中央center */
margin: 2px;/* 上下左右の余白(微妙にちょうどいい位置に調整) */
}



/*◇◇◇商品画像の設定◇◇◇*/

.r3-item-pict{
width: 142px;/*●サイズ調整3*//* 大きさを横幅で指定 */
border: 1px solid #ededed;/*商品画像の縁取り線*/
}


/*商品画像のポジション調整*/
.r3-item-pisition{
text-align: center;/* 左寄left 右寄right 中央center */
margin: 0px;/* 余白を設定 */
}


/*◇◇◇商品名の設定◇◇◇*/
.r3-item-name1{
font-size: 9pt; /* 商品名の文字サイズ */
font-weight: normal; /* normal → bold で太字 */
text-align: left; /* left(左寄せ)center(中央)right(右寄せ) */
line-height: 1.1em; /* 商品名の行間 */
padding: 5px; /* 商品名の周りの余白 */
margin: 0px;
}

a{ text-decoration: none; } /* none → underlineで下線有り */
a:link{color: #333333; } /* 商品名のフォント色 */
a:visited{ color: #333333; } /* クルック済みの色 */
a:hover{
color: #E50000; /* マウスを当てた時の色 */
text-decoration: none; /* マウスオンで下線underline、下線なし none */
}

/*商品名の文字数は「にぎわいランキングR3>テンプレート>書式設定」で指定できます。*/



/*◇◇◇販売価格の設定◇◇◇*/

.r3-price{
font-size: 12pt; /* 販売価格の文字サイズ */
font-weight: bold; /* bold → normalで標準 */
color: #E50000; /* 価格の色(#で始まる6桁のカラーコードを入力) */
text-align: left; /* 左寄 left 中央 center 右寄 right */
padding: 0 6px 0 8px; /* 販売価格の周りの余白 */
margin: 0px;
}


.r3-zei{
font-size: 8pt; /* 販売価格の文字サイズ */
font-weight: normal; /* bold → normalで標準 */
color: #E50000; /* 価格の色(#で始まる6桁のカラーコードを入力) */
}

/*◇◇◇マウスオーバーで画像を白色化◇◇◇*/

/*マウスをリンク付き画像に乗せると色が薄くなります。*/
/*効果を「なし」にしたい場合は下記を削除してください。*/

a:hover img{
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}



/*------------------------------------------------------------
●全体設定
------------------------------------------------------------*/

body{
margin: 0;
font-family: "MS Pゴシック","平成角ゴシック",sans-serif;
}

</style>

</head>
<body>

<!-- ▼全体 -->
<div class="r3-wrap">

<!-- ▽上部タイトル部分 -->
<p class="r3-title">週間ランキング<br />
<span class="r3-title-data">更新日時:xx月xx日</span>
</p>
<!-- △上部タイトル部分 -->

<!-- ▼アイテムボックス -->
<div class="r3-item-box">

<!-- ▽ランキング画像 -->
<div class="r3-ranking-pict-pisition">
<img src="./images/rp_001/rp_001_01.png" class="r3-ranking-pict" />
</div>
<!-- △ランキング画像 -->

<!-- ▽ランキング矢印 -->
<div class="r3-arrow-pisition">
<img src="./images/arrow001/arrow001_up.png" class="r3-ranking-arrow" />
</div>
<!-- △ランキング矢印 -->

<!-- ▽商品画像 -->
<div class="r3-item-pisition">
<a target="_top" href="" >
<img src="./images/dummy.gif" class="r3-item-pict" />
</a>
</div>
<!-- △商品画像 -->

<!-- ▽商品名 -->
<p class="r3-item-name1">
<a target="_top" href="">	
ここに商品名を入力(システムを利用すれば自動で入力されます。また表示文字数は先頭から何文字まで表示するか指定できます。)</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="r3-price">5,000円 <span class="r3-zei">(税込)</span></p> 
<!-- △販売価格 -->

</div>
<!-- ▲アイテムボックス -->


<!-- ▼アイテムボックス -->
<div class="r3-item-box">

<!-- ▽ランキング画像 -->
<div class="r3-ranking-pict-pisition">
<img src="./images/rp_001/rp_001_02.png" class="r3-ranking-pict" />
</div>
<!-- △ランキング画像 -->

<!-- ▽ランキング矢印 -->
<div class="r3-arrow-pisition">
<img src="./images/arrow001/arrow001_same.png" class="r3-ranking-arrow" />
</div>
<!-- △ランキング矢印 -->

<!-- ▽商品画像 -->
<div class="r3-item-pisition">
<a target="_top" href="" >
<img src="./images/dummy.gif" class="r3-item-pict" />
</a>
</div>
<!-- △商品画像 -->

<!-- ▽商品名 -->
<p class="r3-item-name1">
<a target="_top" href="">	
ここに商品名を入力(システムを利用すれば自動で入力されます。また表示文字数は先頭から何文字まで表示するか指定できます。)</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="r3-price">5,000円 <span class="r3-zei">(税込)</span></p> 
<!-- △販売価格 -->

</div>
<!-- ▲アイテムボックス -->


<!-- ▼アイテムボックス -->
<div class="r3-item-box">

<!-- ▽ランキング画像 -->
<div class="r3-ranking-pict-pisition">
<img src="./images/rp_001/rp_001_03.png" class="r3-ranking-pict" />
</div>
<!-- △ランキング画像 -->

<!-- ▽ランキング矢印 -->
<div class="r3-arrow-pisition">
<img src="./images/arrow001/arrow001_down.png" class="r3-ranking-arrow" />
</div>
<!-- △ランキング矢印 -->

<!-- ▽商品画像 -->
<div class="r3-item-pisition">
<a target="_top" href="" >
<img src="./images/dummy.gif" class="r3-item-pict" />
</a>
</div>
<!-- △商品画像 -->

<!-- ▽商品名 -->
<p class="r3-item-name1">
<a target="_top" href="">	
ここに商品名を入力(システムを利用すれば自動で入力されます。また表示文字数は先頭から何文字まで表示するか指定できます。)</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="r3-price">5,000円 <span class="r3-zei">(税込)</span></p> 
<!-- △販売価格 -->

</div>
<!-- ▲アイテムボックス -->

<!-- ▼アイテムボックス -->
<div class="r3-item-box">

<!-- ▽ランキング画像 -->
<div class="r3-ranking-pict-pisition">
<img src="./images/rp_001/rp_001_04.png" class="r3-ranking-pict" />
</div>
<!-- △ランキング画像 -->

<!-- ▽ランキング矢印 -->
<div class="r3-arrow-pisition">
<img src="./images/arrow001/arrow001_up.png" class="r3-ranking-arrow" />
</div>
<!-- △ランキング矢印 -->

<!-- ▽商品画像 -->
<div class="r3-item-pisition">
<a target="_top" href="" >
<img src="./images/dummy.gif" class="r3-item-pict" />
</a>
</div>
<!-- △商品画像 -->

<!-- ▽商品名 -->
<p class="r3-item-name1">
<a target="_top" href="">	
ここに商品名を入力(システムを利用すれば自動で入力されます。また表示文字数は先頭から何文字まで表示するか指定できます。)</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="r3-price">5,000円 <span class="r3-zei">(税込)</span></p> 
<!-- △販売価格 -->

</div>
<!-- ▲アイテムボックス -->

<!-- ▼アイテムボックス -->
<div class="r3-item-box">

<!-- ▽ランキング画像 -->
<div class="r3-ranking-pict-pisition">
<img src="./images/rp_001/rp_001_05.png" class="r3-ranking-pict" />
</div>
<!-- △ランキング画像 -->

<!-- ▽ランキング矢印 -->
<div class="r3-arrow-pisition">
<img src="./images/arrow001/arrow001_up.png" class="r3-ranking-arrow" />
</div>
<!-- △ランキング矢印 -->

<!-- ▽商品画像 -->
<div class="r3-item-pisition">
<a target="_top" href="" >
<img src="./images/dummy.gif" class="r3-item-pict" />
</a>
</div>
<!-- △商品画像 -->

<!-- ▽商品名 -->
<p class="r3-item-name1">
<a target="_top" href="">	
ここに商品名を入力(システムを利用すれば自動で入力されます。また表示文字数は先頭から何文字まで表示するか指定できます。)</a></p>
<!-- △商品名 -->

<!-- ▽販売価格 -->
<p class="r3-price">5,000円 <span class="r3-zei">(税込)</span></p> 
<!-- △販売価格 -->

</div>
<!-- ▲アイテムボックス -->

</div>
<!-- ▲全体 -->


<!-- お知らせ
★にぎわいランキングR3を利用すれば全自動で更新できます。★
https://www.intecrece.co.jp/ec/ranking/index.html
-->


</body>
</html>