組合せ購入パターン CSS一覧
【組合せ購入パターン CSS一覧】
| シンプル(レッド) | シンプル(ブルー) | シンプル(グレー) | シンプル(ラベンダー) | ナチュラル | フラワー | ブロック | ストライプ | エレガント | ミニ | ウッド | アクア | プレーン |
シンプル(レッド)
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { width:450px; margin: 0px 20px 0px 20px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #FB6262; } #together .together_list { margin:10px 5px 0px 3px; float:left; width: 135px; text-align:center; }
シンプル(ブルー)
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { width:450px; margin: 0px 20px 0px 20px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #647DFC; } #together .together_list { margin:10px 5px 0px 3px; float:left; width: 135px; text-align:center; }
シンプル(グレー)
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { width:450px; margin: 0px 20px 0px 20px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #CCC; } #together .together_list { margin:10px 5px 0px 3px; float:left; width: 135px; text-align:center; }
シンプル(ラベンダー)
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { width:450px; margin: 0px 20px 0px 20px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #C59BA7; } #together .together_list { margin:10px 5px 0px 3px; float:left; width: 135px; text-align:center; }
ナチュラル
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { margin: 0px 20px 0px 15px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #D4D49B; color:#663; } #together .together_list { margin:10px 3px 0px 3px; float:left; width: 150px; text-align:center; }
フラワー
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { margin: 0px 20px 20px 20px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #B3AE92; } #together .together_list { margin:10px 3px 0px 3px; float:left; width: 120px; text-align:left; }
ブロック
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { margin: 0px 0px 0px 0px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #7F8A9D; color:#1A2D4A; } #together .together_list { margin:10px 3px 0px 3px; float:left; width: 115px; text-align:left; }
ストライプ
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { width:525px; margin: 0px 0px 20px 0px; height:100%; text-align:left; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #ABABAB; } #together .together_list { margin:10px 30px 0px 20px; width:100px; float:left; } .together_item { width: 100px; text-align: center; } .together_item img { margin-bottom: 5px; } #detail .together_list a, #detail .together_list a:link, #detail .together_list a:visited { color:#D5472B; text-decoration:none; } #detail .together_list a:active, #detail .together_list a:hover { color:#666; text-decoration:none; background:#ffffff; }
エレガント
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { margin: 0px 20px 0px 10px; height:100%; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #9688AB; } #together .together_list { margin:10px 3px 0px 3px; float:left; width: 130px; text-align:center; } #together img { border: 1px #670949 solid; }
ミニ
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { margin: 0px 20px 0px 20px; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #CCC; text-align:left; } #together .together_list { margin:10px 3px 10px 3px; float:left; width: 150px; text-align:center; }
ウッド
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { margin: 0px 10px 0px 10px; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 5px solid #CC9966; } #together .together_list { margin:10px 3px 10px 3px; float:left; width: 170px; text-align:center; } #together img { padding: 4px; border-top: 1px #D1D1D1 solid; border-right: 1px #989898 solid; border-bottom: 1px #989898 solid; border-left: 1px #D1D1D1 solid; }
アクア
/*---------------------------------------------------------------------- この商品を買った人はこんな商品も買ってます ----------------------------------------------------------------------*/ #together { margin-top:20px; }
プレーン
/* ------------------------------------- * この商品を買った人はこんな商品も買ってます * ------------------------------------- */ #together { margin: 0px 0px 20px 0px; } #together .tog_main_title { font-weight: bolder; margin-top:30px; padding-bottom:5px; border-bottom: 2px solid <{$menu_title_linecolor}>; } #together .together_list { margin:10px 3px 3px 3px; float:left; width: 130px; text-align:left; }
この記事に関するキーワード
2019.06.24