ec-tools FAQ


「伝令くんGOLD」の初期CSS

06.05.2015, 未分類, by .

「CSSを修正したら表示がおかしくなった」「初期状態に戻したい」時は、以下のCSSをコピーし、そのままCSSファイルに貼り付けて下さい。すると、当初の状態に戻すことができます。

≫デザイン修正マニュアルに戻る

@charset"UTF-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■伝令くんGOLD デザイン修正用CSSファイル

・コマースデザイン株式会社が提供する「伝令くんGOLD」の
 デザインを修正するために使います。

・中上級者向けです。修正には、CSSについての知識が必要です。

・CSSを誤って書き換えた時に「元に戻す」ために、
 このファイルの内容を、他のテキストファイルに保存してから
 修正することを勧めます。

・不明点は、https://www.commerce-design.net/etfaq/%E3%81%8A%E5%95%8F%E5%90%88%E3%81%9Bまで。

[2015/3/24改訂]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━◇◇◆
		
		↓ここでは、ティッカー(流れる文字)のデザインを修正できます。↓
		
━━━━━━━━━━━━━━━━━━━━━━━━━━◇◆◇
*/

/* ◆---------- リンクについて----------◆*/
#ticker a {
	color:#1D54A7;
	/*↑文字の色を変更します 例)blue→black*/
	text-decoration:none;
	transition: 0.5s;
}
#ticker a:hover {
	color:#C00000;
	/*↑文字の色を変更します 例)blue→black*/
	text-decoration:underline;
	/*↑マウスを重ねると文字にアンダーラインを表示します*/
}
/* ◆---------- 枠について ----------◆*/
#ticker .box{
	border:1px solid #cccccc;
	/*↑枠線の色。現在はグレー*/
	background-color :#F2F4F6;
	/*↑背景色。現在はグレー*/
	font-size :14px;
	/*↑文字の大きさ(20px以下推奨)*/
	font-weight:normal;
	/*↑文字の太さ(太くしたい時は、boldに書き換えてください)*/
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	/*↑字体。変更した場合は、文字の大きさも併せてご確認ください*/
}
/* ◆---------- 枠の中にある[速報]と書いてある画像を差し替える場合に使います ----------◆*/
#ticker .box{
	background-image:url("rimg.gif");
	/*↑「速報」の代わりに利用したい画像のファイル名。このフォルダに使いたい画像を入れて下さい。*/
	padding-left: 63px;
	/*↑上の画像のファイル名を変更した場合は、画像の横幅+2pxに設定してください*/
}
/* ↓ここは変更しないでください↓ */
#ticker{ margin:0; padding:0; }
#ticker .box{height: 23px;	width:1200px;	background-repeat:no-repeat;	background-position:2px 2px;	padding-top:2px;	padding-bottom:2px;	padding-right:2px; overflow: hidden;}
#ticker .box ul {	margin:0;	padding:0; list-style:none; }
#ticker .box ul li{line-height:27px; float:left; width:1100px;}
#ticker #signature{ line-height: 1; padding:2px 0 0 2px; }

/* 
━━━━━━━━━━━━━━━━━━━━━━━━━━◇◇◆
		
			↓ここでは、サイドバーのデザインを修正できます。↓
		
━━━━━━━━━━━━━━━━━━━━━━━━━━◇◆◇
*/
/*◆---------- 全体 ----------◆*/
body.side {
	color:#000000;
	/*↑文字の色を変更します 例)blue→black*/
	line-height:120%;
}
/*◆---------- リンクについて----------◆*/
#sidebar a{
	color:blue;
	/*↑リンク部分の文字色を変更します 例)blue→black*/
	text-decoration:none;
	transition: 0.5s;
}
#sidebar a:hover {
	color:#C00000;
	text-decoration:none;
}
/*◆----------  赤文字の「○○ランキング」表示----------◆*/
div.genre {
	color:#cc0000;
	/*↑リンク部分の文字色を変更します*/
	width:90%;
	margin:0 auto;
	text-align:center;
	font-size:11px;
	letter-spacing: -1px;
}
/*◆---------- 黄色い背景の「○位受賞」見出し ----------◆*/
div.rank {
	background-color:#ffcc00;
	/*↑見出し部分の文字の背景色を変更します*/
	font-size:14px;
	/*↑文字サイズ*/
	font-weight:bold;
	/*↑文字を太字に*/
	text-align:center;
	/*↑文字をセンタリング*/
	margin-bottom:5px;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}
/*◆----------  枠について----------◆*/
.table {
	width:160px;
	/*横幅200pxの場合は、枠の横幅は160pxにして下さい*/
	/*横幅150pxの場合は、枠の横幅は123pxにして下さい*/
}
/*◆---------- 商品画像のサイズ----------◆*/
#img {
	max-height:150px;
	max-width:150px;
	/*↑横幅200pxの場合*/
	/*↓横幅150pxの場合
	max-height:108px;
	max-width:108px;
	*/
	border:none;
}
.itemimg {
	text-align:center;
	/*↑画像をセンタリング*/
}
/* 
━━━━━━━━━━━━━━━━━━━━━━━◇◇◆
		
		↓ここでは、ランキング市場風のデザインを修正できます。↓
		
━━━━━━━━━━━━━━━━━━━━━━━◇◆◇
*/

/*
#standard .behind{
	color:#808080 !important;
}
↑ランキング市場へのリンクを目立たなくしたい場合に使います。*/


#standard a{
	color:#1D54A7;
	/*↑リンク部分の文字色を変更します 例)blue→black*/
	text-decoration:none;
}
#standard a:hover {
	color:#C00000;
	text-decoration:underline;
	/*↑マウスを重ねると文字にアンダーラインを表示します*/
}
/* 
━━━━━━━━━━━━━━━━━━━━━━━◇◇◆
		 ↓↓↓ここから下は変更しないでください↓↓↓ 
━━━━━━━━━━━━━━━━━━━━━━━◇◆◇
*/
/*base*/
body#standard {	margin:4px 0; background:#ffffff; }

.ranking_box {
	width:540px;
	line-height: 1.3em;
	font-size: 84%;
	clear:both;
	border-bottom: solid 1px #BBB;
	overflow: hidden;
	margin:0;
}
.ranking_box dl, .ranking_box dd, .ranking_box div {
	margin:0;
}
.ranking_box dd {
	display: block;
}
.ranking_box img {
	border: 0 none;
}
.ranking_box .rank, .imageBox {
	float:left;
}
.detail {
	margin-left:206px !important;
	padding: 5px 5px 2px 0;
}
a{word-break:break-all;}
/*Background*/
.ranking_box .rank {
	background: url("http://image.event.rakuten.co.jp/ranking/mayall/img/ranking/A/bg_rank4later.gif") repeat-y 0 0px;
}
.top3box .rank {
	background: url("http://image.event.rakuten.co.jp/ranking/mayall/img/ranking/A/bg_rank1to3.gif") repeat-y 0 0px;
}
.top1BgColor {
	background-color:#FFEBE0;
}
/*rank*/
.ranking_box .rank {
	width: 56px;
	min-height: 150px;
	height: 150px;
}
.ranking_box .rank div {
	margin: 65px 0 0 0;
	color: #BF0000;
	font-size: 220%;
	font-weight: bold;
	text-align: center;
}
.ranking_box .rank span {
	font-size:12px;
}
.top3box .rank, .top3box .rank img {
	width:56px;
	margin: 0;
}

/*img*/
dd.imageBox{padding: 13px 10px 13px 0;}
dd.imageBox div {
	width: 138px;
	height: 138px;
	layout-grid-line:138px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
dd.imageBox div img {
	max-width: 138px;
}
/*itemname*/
.itemname {
	padding-top:8px;
	height: auto;
	overflow:hidden;
	word-break: break-all;
	font-weight:bold;
}

/*else*/
dd.imageBox div * { vertical-align: middle; }
.info {
	text-align: right;
	padding-top:5px;
	font-size:11px;
}
.price{
	padding: 1px 0;
	font-size: 148%;
	color: #BF0000;
	font-weight: bold;
	text-align: right;
}
.review{font-weight:normal; padding:7px 0 0;}
.rnkRanking_underbox{text-align: right;}
/*bookmark*/
.genreRankingBookMarkBox{width: 90px; margin-bottom:6px !important;}
.ranking_box div#bkmDlogArea{margin-left: 0px !important;	margin-top: -5px !important;}
.ranking_box div#bkmDlogArea,	.ranking_box div#bkmDlogArea div#bkmDlog, .ranking_box div#bkmDlogArea div#bkmDlogComp{width: 328px !important;}
.ranking_box div.bookmarkArea div.bkm{padding:0 !important;}

/*sidebar-review*/
#sidebar .review a{
	color:#d94c3a;
	font-size:12px;
	display:block; width:100%; margin-top:-1em; margin-bottom:3px;
}
#sidebar .timestamp{
	font-size:12px; color:#808080;
}
/*over 10*/
.recommend {margin-left: 25px;}
.recom .itemname a.info{visibility: hidden;}

/*renewed*/
.flat_ver .top1BgColor {
	background-color:#fff;
}
.flat_ver .ranking_box .rank, .flat_ver .top3box .rank {
	background:#fff;
}
.flat_ver .rank {
	position:relative;
}
.flat_ver .rank div {
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}
.flat_ver .rank img {
	position:absolute;
	top:33px;
	left:0;
}
/*signature*/
#signature{ font-size:10px; color:#808080; line-height:1; padding:10px 0 5px 5px;}


≫デザイン修正マニュアルに戻る