<!-- ◇◇◇ ECステーション「にぎわいランキングR3」◇◇◇ -->
<!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" 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）
★にぎわいランキングＲ３を利用すれば全自動で更新できます。★
http://www.intecrece.co.jp/y/yec/ranking/index.html
=============================================================*/
/*CSS編集について：*/
/*値を変更する際には半角小文字英数字を使用*/
/*誤って全角スペースを入れないようご注意ください。*/
/*横幅を変更する場合は『●サイズ調整１〜３』のpx数を調整します。*/
/*◇◇◇ランキング外枠全体◇◇◇*/
.r3-wrap{
width: 160px; /*●サイズ調整１*//*全体幅を指定*/
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;/*●サイズ調整２*/
}
/*順位画像のポジション調整-------*/
.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;/*●サイズ調整３*//* 大きさを横幅で指定 */
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: "ＭＳ Ｐゴシック","平成角ゴシック",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>
<!-- ▲全体 -->
<!-- お知らせ
★にぎわいランキングＲ３を利用すれば全自動で更新できます。★
http://www.intecrece.co.jp/y/yec/ranking/index.html
-->
</body>
</html>