TOPデザイン修正マニュアル「伝令くんGOLD」の初期CSS
最終更新日 : 2023/12/22

「伝令くんGOLD」の初期CSS

「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;}