Ignore:
Timestamp:
2013/07/01 10:27:17 (13 years ago)
Author:
Seasoft
Message:

#2140 (標準テンプレートのカスタマイズ性を高める)
#2043 (typo修正・ソース整形・ソースコメントの改善 for 2.13.0)

Location:
branches/version-2_13-dev/html/user_data/packages/default/css
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • branches/version-2_13-dev/html/user_data/packages/default/css/bloc.css

    r21738 r22930  
    2020-カレンダー 
    2121-おすすめ商品 
    22     *メインカラム用 1カラム時 [one_maincolumn] 
    23     *メインカラム用 2カラム時 [two_maincolumn_left] 
    24                               [two_maincolumn_right] 
    25     *メインカラム用 3カラム時 [three_maincolumn] 
    26     *サイドカラム用           [side_column] 
    27     *商品詳細のオススメ商品   [whobought_area] 
    28  */ 
     22    * 商品詳細のオススメ商品   [whobought_area] 
     23*/ 
    2924 
    3025 
    3126/* ============================================== 
    3227ブロック共通 
     28    * #container から指定することで、ヘッダー・フッターには適用していない。 
    3329/* ============================================= */ 
    34 #container .block_body { 
    35     background-color: #fff; 
    36 } 
    3730.side_column { 
    3831    overflow-x: hidden; /* IE6 表示乱れ防止 */ 
    3932} 
    40 .side_column .block_outer { 
    41     margin: 10px 7%; 
    42 } 
    4333.side_column .block_body, 
    44 .main_column .block_body { 
     34#main_column .block_body { 
    4535    border: solid 1px #ccc; 
    4636    border-top: none; 
    … …  
    5040    width: 145px; 
    5141} 
    52 .main_column .block_outer { 
    53     margin-bottom: 20px; 
    54 } 
    55  
     42 
     43/* 外枠 
     44----------------------------------------------- */ 
     45#container .block_outer { 
     46    padding: 0 15px 10px; /* #container の背景色を欠けさせないため敢えて padding */ 
     47} 
     48#container #main_column .block_outer { 
     49    padding: 0 0 20px; 
     50} 
     51#container .side_column .block_outer { 
     52    padding: 0 7% 10px; 
     53} 
    5654 
    5755/* リスト 
    … …  
    108106 
    109107 
    110 /* ============================================== 
    111 ▼ヘッダー上、フッター下のブロックエリア 
    112 =============================================== */ 
    113 div#topcolumn { 
    114     margin: 0px; 
    115     clear: both; 
    116 } 
    117 div#bottomcolumn { 
    118     margin: 0px; 
    119     clear: both; 
    120 } 
    121  
    122  
    123108/* *********************************************** 
    124109▼各機能ブロックの指定 
    … …  
    128113▼新着情報 
    129114=============================================== */ 
    130 #news_area .block_body { 
     115#news_area .news_contents { 
    131116    padding: 10px; 
    132 } 
    133 #news_area .news_contents { 
    134     padding-right: 10px; 
    135117    max-height: 260px; 
    136     height: auto !important; 
    137     height: 260px; 
     118    height: auto !important; /* hack? */ 
     119    height: 260px; /* hack? */ 
    138120    overflow: auto; 
    139121    overflow-y: scroll; 
    140122} 
    141  
    142123#news_area dl.newslist { 
    143124    background: url("../img/background/line_dot_01.gif") repeat-x bottom; 
     125} 
     126#news_area dl.newslist:last-child { 
     127    background: none; 
    144128} 
    145129#news_area dl.newslist dt { 
    … …  
    149133    margin-bottom: 10px; 
    150134    padding-bottom: 10px; 
    151 } 
    152 #news_area dl.end { 
    153     padding: 10px 0; 
    154     background: url("") no-repeat bottom; 
    155135} 
    156136 
    … …  
    181161▼カテゴリ 
    182162=============================================== */ 
    183 #category_area .block_body { 
     163#container #category_area .block_body { 
    184164    background-color: #fffaf0; 
    185165} 
    … …  
    221201=============================================== */ 
    222202#guide_area { 
    223     margin-top: 1em; 
    224203    border: none; 
    225204} 
    … …  
    290269▼検索 
    291270=============================================== */ 
    292 div#search_area .block_body { 
     271#container div#search_area .block_body { 
    293272    padding: 10px; 
    294273} 
    295 div#search_area .block_body .btn { 
     274#container div#search_area .block_body .btn { 
    296275    text-align: center; 
    297276} 
    … …  
    352331/* 
    353332   tplファイルのマークアップが同じ項目 
    354    メインカラム用 2カラム時 [two_maincolumn_left] 
    355                             [two_maincolumn_right] 
    356    メインカラム用 3カラム時 [three_maincolumn] 
     333   メインカラム用 
    357334   サイドカラム用           [side_column] 
    358335   商品詳細のオススメ商品   [whobought_area] 
    … …  
    362339#recommend_area .block_body, 
    363340#whobought_area .product_item { 
    364     margin-bottom: 10px; 
    365341    padding: 10px 0 10px; 
    366342    border: none; 
    … …  
    393369----------------------------------------------- */ 
    394370/* メインカラム用 */ 
    395 .main_column #recommend_area .block_body .productImage, 
     371#main_column #recommend_area .block_body .productImage, 
    396372#whobought_area .product_item .productImage { 
    397373    margin-bottom: 10px; 
    … …  
    409385/* 左右の振り分け 
    410386----------------------------------------------- */ 
    411 .main_column #recommend_area .product_item, 
     387#main_column #recommend_area .product_item, 
    412388#whobought_area .product_item { 
    413389    float: left; 
    … …  
    421397----------------------------------------------- */ 
    422398/* メインカラム用 1カラム時*/ 
    423 #one_maincolumn #recommend_area .block_body .productContents { 
     399#main_column.colnum1 #recommend_area .block_body .productContents { 
    424400    float: right; 
    425401    width: 74%; 
    … …  
    427403 
    428404/* メインカラム用 2カラム時*/ 
    429 #two_maincolumn_right #recommend_area .block_body .productContents, 
    430 #two_maincolumn_left #recommend_area .block_body .productContents, 
    431 #two_maincolumn_right #whobought_area .productContents, 
    432 #two_maincolumn_left #whobought_area .productContents { 
     405#main_column.colnum2 #recommend_area .block_body .productContents, 
     406#main_column.colnum2 #whobought_area .productContents { 
    433407    float: right; 
    434408    width: 74%; 
    … …  
    436410 
    437411/* メインカラム用 3カラム時*/ 
    438 #three_maincolumn #recommend_area .block_body .productContents, 
    439 #three_maincolumn #whobought_area .productContents { 
     412#main_column.colnum3 #recommend_area .block_body .productContents, 
     413#main_column.colnum3 #whobought_area .productContents { 
    440414    float: right; 
    441415    width: 67%; 

  • branches/version-2_13-dev/html/user_data/packages/default/css/bloc_alpha.css

    r21616 r22930  
    6868/* 【メイン】バナーエリア_02 
    6969----------------------------------------------- */ 
    70 .main_column .block_outer #banner_area .block_body ul { 
     70#main_column .block_outer #banner_area .block_body ul { 
    7171    width: 100%; 
    7272} 
    73 .main_column .block_outer #banner_area .block_body ul li { 
     73#main_column .block_outer #banner_area .block_body ul li { 
    7474    float: left; 
    7575} 
    76 .main_column .block_outer #banner_area .block_body ul li.sub_01 { 
     76#main_column .block_outer #banner_area .block_body ul li.sub_01 { 
    7777    padding-right: 8px; 
    7878} 

  • branches/version-2_13-dev/html/user_data/packages/default/css/common.css

    r21619 r22930  
    1313} 
    1414 
    15 select { 
    16     border: solid 1px #ccc; 
    17 } 
    18  
    1915/*写真*/ 
    20 .picture { 
     16img.picture { 
    2117    border: 1px solid #ccc; 
    2218} 
    … …  
    3632#container { 
    3733    margin: 0 auto; 
    38     padding: 0 0 30px 0; 
     34    padding: 0 0 30px; 
    3935    width: 980px; 
    4036    background: #fff; 
    … …  
    4642 カラム指定 
    4743=============================================== */ 
    48 /* ヘッダーとフッターの上下 
    49 [注意]ブロック移動時はbloc.css内で調整が必要 */ 
     44 
     45/* メイン部 
     46----------------------------------------------- */ 
     47#main_column { 
     48    padding: 10px 0 0; 
     49} 
     50 
     51/* 1カラム時 */ 
     52#main_column.colnum1 { 
     53    margin: 0 auto; 
     54    width: 80%; 
     55} 
     56 
     57/* 2カラム時 (共通) */ 
     58#main_column.colnum2 { 
     59    width: 78%; 
     60} 
     61 
     62/* 2カラム時 (メイン部が左) */ 
     63#main_column.colnum2.left { 
     64    padding-left: 1.5%; 
     65    float: left; 
     66} 
     67 
     68/* 2カラム時 (メイン部が右) */ 
     69#main_column.colnum2.right { 
     70    padding-right: 1.5%; 
     71    float: right; 
     72} 
     73 
     74/* 3カラム時 */ 
     75#main_column.colnum3 { 
     76    padding-left: 0.5%; 
     77    width: 59%; 
     78    float: left; 
     79} 
     80 
     81/* サイドカラム 
     82----------------------------------------------- */ 
     83.side_column { 
     84    padding: 10px 0 0; 
     85} 
     86#leftcolumn { 
     87    float: left; 
     88    width: 20%; 
     89} 
     90#rightcolumn { 
     91    float: right; 
     92    width: 20%; 
     93} 
     94 
     95/* 他 
     96----------------------------------------------- */ 
     97/* ヘッダーとフッターの上下 */ 
    5098#topcolumn, 
    5199#bottomcolumn, 
    52100#footerbottomcolumn { 
    53     margin: 0 auto; 
    54     padding: 15px; 
    55     width: 950px; 
     101    margin: 0px; 
    56102    background: #fff; 
    57103    text-align: left; 
    58 } 
    59  
    60 /* 中央カラム */ 
    61 .main_column { 
    62     padding: 10px 0 20px; 
    63 } 
    64  
    65 /* サイドカラム */ 
    66 #leftcolumn { 
    67     float: left; 
    68     width: 20%; 
    69 } 
    70 #rightcolumn { 
    71     float: right; 
    72     width: 20%; 
    73 } 
    74  
    75 /* 1カラム設定 */ 
    76 #one_maincolumn { 
    77     margin: 0 auto; 
    78     width: 80%; 
    79 } 
    80  
    81 /* 2カラム設定 (メイン部が左) */ 
    82 #two_maincolumn_left { 
    83     padding-left: 1.5%; 
    84     float: left; 
    85     width: 78%; 
    86 } 
    87  
    88 /* 2カラム設定 (メイン部が右) */ 
    89 #two_maincolumn_right { 
    90     padding-right: 1.5%; 
    91     width: 78%; 
    92     float: right; 
    93 } 
    94  
    95 /* 3カラム設定 */ 
    96 #three_maincolumn { 
    97     padding-left: 0.5%; 
    98     width: 59%; 
    99     float: left; 
     104    clear: both; 
    100105} 
    101106 
    … …  
    201206/* フォーム 
    202207----------------------------------------------- */ 
     208select { 
     209    border: solid 1px #ccc; 
     210} 
    203211input[type='text'], 
    204 input[type='password'], 
    205 .select { 
     212input[type='password'] { 
    206213    border: solid 1px #ccc; 
    207214    padding: 2px; 
    … …  
    246253 
    247254/* フォームが縦に重なり合う場合に併用する余白 */ 
    248 .top { 
     255.top { /* FIXME 簡素な単語は単独で使用しない */ 
    249256    margin-bottom: 5px; 
    250 } 
    251  
    252 .ng_top { 
    253     margin-bottom: 0 !important; 
    254257} 
    255258 
    … …  
    267270} 
    268271 
    269 #one_maincolumn .sub_area h3, 
    270 #two_maincolumn_right .sub_area h3, 
    271 #two_maincolumn_left .sub_area h3, 
    272 #three_maincolumn .sub_area h3, 
     272#main_column .sub_area h3, 
    273273#undercolumn_login .login_area h3, 
    274274#undercolumn_shopping h3, 

  • branches/version-2_13-dev/html/user_data/packages/default/css/contents.css

    r21618 r22930  
    229229 
    230230/* メインカラム用 1カラム時*/ 
    231 #one_maincolumn div.listrightbloc { 
     231#main_column.colnum1 div.listrightbloc { 
    232232    float: right; 
    233233    width: 74%; 
    … …  
    235235 
    236236/* メインカラム用 2カラム時*/ 
    237 #two_maincolumn_right div.listrightbloc, 
    238 #two_maincolumn_left div.listrightbloc { 
     237#main_column.colnum2 div.listrightbloc { 
    239238    float: right; 
    240239    width: 80%; 
    … …  
    242241 
    243242/* メインカラム用 3カラム時*/ 
    244 #three_maincolumn div.listrightbloc { 
     243#main_column.colnum3 div.listrightbloc { 
    245244    float: right; 
    246245    width: 74%; 
    … …  
    337336 
    338337    tplファイルのマークアップが同じ項目 
    339     *1カラム時 [one_maincolumn] 
    340     *2カラム時 [two_maincolumn_left] 
    341                [two_maincolumn_right] 
    342     *3カラム時 [three_maincolumn] 
     338        * 1カラム時 
     339        * 2カラム時 
     340        * 3カラム時 
    343341 
    344342----------------------------------------------- */ 
    … …  
    352350----------------------------------------------- */ 
    353351/* 1カラム用 */ 
    354 #one_maincolumn div#detailphotobloc { 
     352#main_column.colnum1 div#detailphotobloc { 
    355353    width: 37%; 
    356354    float: left; 
    357355} 
    358 #one_maincolumn #detailrightbloc { 
     356#main_column.colnum1 #detailrightbloc { 
    359357    width: 63%; 
    360358    float: right; 
    361359} 
    362 #one_maincolumn div.subtext { 
     360#main_column.colnum1 div.subtext { 
    363361    margin-bottom: 20px; 
    364362    float: left; 
    365363    width: 69%; 
    366364} 
    367 #one_maincolumn div.subphotoimg { 
     365#main_column.colnum1 div.subphotoimg { 
    368366    float: right; 
    369367    width: 25%; 
    370368    text-align: right; 
    371369} 
    372 #one_maincolumn p.subtext { 
     370#main_column.colnum1 p.subtext { 
    373371    margin-bottom: 20px; 
    374372} 
    375373 
    376374/* 2カラム用 */ 
    377 #two_maincolumn_left div#detailphotobloc, 
    378 #two_maincolumn_right div#detailphotobloc { 
     375#main_column.colnum2 div#detailphotobloc { 
    379376    float: left; 
    380377    width: 37%; 
    381378} 
    382 #two_maincolumn_left #detailrightbloc, 
    383 #two_maincolumn_right #detailrightbloc { 
     379#main_column.colnum2 #detailrightbloc { 
    384380    float: right; 
    385381    width: 63%; 
    386382} 
    387 #two_maincolumn_left div.subtext, 
    388 #two_maincolumn_right div.subtext { 
     383#main_column.colnum2 div.subtext { 
    389384    margin-bottom: 20px; 
    390385    float: left; 
    391386    width: 73%; 
    392387} 
    393 #two_maincolumn_left p.subtext, 
    394 #two_maincolumn_right p.subtext { 
    395     margin-bottom: 20px; 
    396 } 
    397 #two_maincolumn_left div.subphotoimg, 
    398 #two_maincolumn_right div.subphotoimg { 
     388#main_column.colnum2 p.subtext { 
     389    margin-bottom: 20px; 
     390} 
     391#main_column.colnum2 div.subphotoimg { 
    399392    float: right; 
    400393    width: 25%; 
    … …  
    403396 
    404397/* 3カラム用 */ 
    405 #three_maincolumn div#detailphotobloc { 
     398#main_column.colnum3 div#detailphotobloc { 
    406399    float: left; 
    407400    width: 49%; 
    408401} 
    409 #three_maincolumn #detailrightbloc { 
     402#main_column.colnum3 #detailrightbloc { 
    410403    float: right; 
    411404    width: 50%; 
    412405} 
    413 #three_maincolumn div.subtext { 
     406#main_column.colnum3 div.subtext { 
    414407    margin-bottom: 20px; 
    415408    float: left; 
    416409    width: 63%; 
    417410} 
    418 #three_maincolumn p.subtext { 
    419     margin-bottom: 20px; 
    420 } 
    421 #three_maincolumn div.subphotoimg { 
     411#main_column.colnum3 p.subtext { 
     412    margin-bottom: 20px; 
     413} 
     414#main_column.colnum3 div.subphotoimg { 
    422415    float: right; 
    423416    width: 35%; 
Note: See TracChangeset for help on using the changeset viewer.