ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Changeset 5181


Ignore:
Timestamp:
Feb 14, 2008, 6:37:31 PM (12 years ago)
Author:
takai
Message:

#1908:home写真表示領域のHTML

File:
1 edited

Legend:

Unmodified
Added
Removed
  • work/takai/xhtmlcss/1908.html

    r5176 r5181  
    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2 <html>
     1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
    34<head>
    4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5 
    6 <meta http-equiv="Content-Style-Type" content="text/css">
     5<base href="http://takai.sns.dazai.pne.jp/" />
     6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     7<meta http-equiv="Content-Style-Type" content="text/css" />
     8<meta http-equiv="Content-Script-Type" content="text/javascript" />
    79<title>XHTML+CSS化</title>
    8 <base href="http://takai.sns.dazai.pne.jp/">
    9 <link rel="stylesheet" href="./css/default.css" type="text/css">
     10<link rel="stylesheet" href="file:///C:/master/OpenPNE/xhtmlcss_back/style.css" type="text/css" />
    1011<script type="text/javascript" src="./js/prototype.js"></script>
    1112<script type="text/javascript" src="./js/pne.js"></script>
    12 <style type="text/css">
    13 <!--
    14 /*枠線要素*/
    15 .border_01 { border: #CCCCCC 1px solid ; }
    16 .border_07 { border: #CCCCCC 1px solid ; }
    17 .border_10 { border: #FFFFFF 1px solid ; }
    18 
    19 /*背景要素*/
    20 .bg_00 { background-color: #FFFFFF ; }
    21 .bg_01 { background-color: #CCCCCC ; }
    22 .bg_02 { background-color: #FFFFFF ; }
    23 .bg_03 { background-color: #FFFFFF ; }
    24 .bg_04 { background-color: #CCCCCC ; }
    25 .bg_05 { background-color: #FFFFFF ; }
    26 .bg_06 { background-color: #36B3D1 ; }
    27 .bg_07 { background-color: #CCCCCC ; }
    28 .bg_08 { background-color: #FFFFFF ; }
    29 .bg_09 { background-color: #FFFFFF ; }
    30 .bg_10 { background-color: #CCCCCC ; }
    31 .bg_11 { background-color: #DDDDDD ; }
    32 .bg_12 { background-color: #FFFFFF ; }
    33 .bg_13 { background-color: #FFFFFF ; }
    34 .bg_14 { background-color: #FFFFFF ; }
    35 .color_19 { background-color: #FFFFFF ; }
    36 
    37 body { background-color: #FFFFFF ; }
    38 .container { background-color: #FFFFFF ; }
    39 
    40 .arrow_1 {
    41   width: 17px ;
    42   height: 14px ;
    43   background: url(./skin/default/img/icon_arrow_1.gif) 0% 100%  no-repeat ;
    44 }
    45 .icon_1 {
    46   width: 14px ;
    47   height: 14px ;
    48   background: url(./skin/default/img/icon_1.gif) 50% 70%  no-repeat ;
    49 }
    50 .icon_2 {
    51   width: 14px ;
    52   height: 14px ;
    53   background: url(./skin/default/img/icon_2.gif) 50% 70%  no-repeat ;
    54 }
    55 .icon_3 {
    56   width: 14px ;
    57   height: 14px ;
    58   background: url(./skin/default/img/icon_3.gif) 50% 70%  no-repeat ;
    59 }
    60 
    61 * { font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Ghothic Pro W3", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif ; }
    62 
    63 /*ここから:safari1.xパスワードフォーム非表示対策*/
    64 html:\66irst-child input[type="password"] { font-family: "Lucida Grande", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Ghothic Pro W3", "ヒラギノ角ゴ Pro W3",sans-serif,"Osaka" ; }
    65 /*ここまで:safari1.xパスワードフォーム非表示対策*/
    66 
    67 /*テキスト入力欄のフォーカス時のクラス*/
    68 .text       { background-color:#F8F8F8; }
    69 .text_focus { background-color:#FFFFFF; }
    70 
    71 
    72 /*ボタンに対する背景画像の指定*/
    73 input.submit {
    74         background: #DADCE6 url(./skin/default/img/bg_button.gif) 50% 0 repeat-x ;
    75 }
    76 
    77 /*ページヘッダロールオーバー設定*/
    78 div.inc_page_header div.navi_global a.navi_global_1:active ,
    79 div.inc_page_header div.navi_global a.navi_global_1:hover {
    80         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) 0 -70px no-repeat ;
    81 }
    82 
    83 div.inc_page_header div.navi_global a.navi_global_2:active ,
    84 div.inc_page_header div.navi_global a.navi_global_2:hover {
    85         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -90px -70px no-repeat ;
    86 }
    87 
    88 div.inc_page_header div.navi_global a.navi_global_3:active ,
    89 div.inc_page_header div.navi_global a.navi_global_3:hover {
    90         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -180px -70px no-repeat ;
    91 }
    92 
    93 div.inc_page_header div.navi_global a.navi_global_4:active ,
    94 div.inc_page_header div.navi_global a.navi_global_4:hover {
    95         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -288px -70px no-repeat ;
    96 }
    97 
    98 div.inc_page_header div.navi_global a.navi_global_5:active ,
    99 div.inc_page_header div.navi_global a.navi_global_5:hover {
    100         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -360px -70px no-repeat ;
    101 }
    102 
    103 div.inc_page_header div.navi_global a.navi_global_6:active ,
    104 div.inc_page_header div.navi_global a.navi_global_6:hover {
    105         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -432px -70px no-repeat ;
    106 }
    107 
    108 div.inc_page_header div.navi_global a.navi_global_7:active ,
    109 div.inc_page_header div.navi_global a.navi_global_7:hover {
    110         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -504px -70px no-repeat ;
    111 }
    112 
    113 div.inc_page_header div.navi_global a.navi_global_8:active ,
    114 div.inc_page_header div.navi_global a.navi_global_8:hover {
    115         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -576px -70px no-repeat ;
    116 }
    117 
    118 div.inc_page_header div.navi_global a.navi_global_9:active ,
    119 div.inc_page_header div.navi_global a.navi_global_9:hover {
    120         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -648px -70px no-repeat ;
    121 }
    122 
    123 /*h系ナビロールオーバー設定*/
    124 .inc_navi div.h a.navi_h_1:active ,
    125 .inc_navi div.h a.navi_h_1:hover {
    126         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) 0 0 no-repeat ;
    127 }
    128 
    129 .inc_navi div.h a.navi_h_2:active ,
    130 .inc_navi div.h a.navi_h_2:hover {
    131         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -80px 0 no-repeat ;
    132 }
    133 
    134 .inc_navi div.h a.navi_h_3:active ,
    135 .inc_navi div.h a.navi_h_3:hover {
    136         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -160px 0 no-repeat ;
    137 }
    138 
    139 .inc_navi div.h a.navi_h_4:active ,
    140 .inc_navi div.h a.navi_h_4:hover {
    141         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -240px 0 no-repeat ;
    142 }
    143 
    144 .inc_navi div.h a.navi_h_5:active ,
    145 .inc_navi div.h a.navi_h_5:hover {
    146         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -320px 0 no-repeat ;
    147 }
    148 
    149 .inc_navi div.h a.navi_h_6:active ,
    150 .inc_navi div.h a.navi_h_6:hover {
    151         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -400px 0 no-repeat ;
    152 }
    153 
    154 .inc_navi div.h a.navi_h_7:active ,
    155 .inc_navi div.h a.navi_h_7:hover {
    156         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -480px 0 no-repeat ;
    157 }
    158 
    159 .inc_navi div.h a.navi_h_8:active ,
    160 .inc_navi div.h a.navi_h_8:hover {
    161         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -560px 0 no-repeat ;
    162 }
    163 
    164 .inc_navi div.h a.navi_h_9:active ,
    165 .inc_navi div.h a.navi_h_9:hover {
    166         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -640px 0 no-repeat ;
    167 }
    168 
    169 /*f系ナビロールオーバー設定*/
    170 .inc_navi div.f a.navi_f_1:active ,
    171 .inc_navi div.f a.navi_f_1:hover {
    172         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) 0 0 no-repeat ;
    173 }
    174 
    175 .inc_navi div.f a.navi_f_2:active ,
    176 .inc_navi div.f a.navi_f_2:hover {
    177         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -80px 0 no-repeat ;
    178 }
    179 
    180 .inc_navi div.f a.navi_f_3:active ,
    181 .inc_navi div.f a.navi_f_3:hover {
    182         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -160px 0 no-repeat ;
    183 }
    184 
    185 .inc_navi div.f a.navi_f_4:active ,
    186 .inc_navi div.f a.navi_f_4:hover {
    187         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -240px 0 no-repeat ;
    188 }
    189 
    190 .inc_navi div.f a.navi_f_5:active ,
    191 .inc_navi div.f a.navi_f_5:hover {
    192         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -320px 0 no-repeat ;
    193 }
    194 
    195 .inc_navi div.f a.navi_f_6:active ,
    196 .inc_navi div.f a.navi_f_6:hover {
    197         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -400px 0 no-repeat ;
    198 }
    199 
    200 .inc_navi div.f a.navi_f_7:active ,
    201 .inc_navi div.f a.navi_f_7:hover {
    202         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -480px 0 no-repeat ;
    203 }
    204 
    205 .inc_navi div.f a.navi_f_8:active ,
    206 .inc_navi div.f a.navi_f_8:hover {
    207         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -560px 0 no-repeat ;
    208 }
    209 
    210 .inc_navi div.f a.navi_f_9:active ,
    211 .inc_navi div.f a.navi_f_9:hover {
    212         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -640px 0 no-repeat ;
    213 }
    214 
    215 /*c系ナビロールオーバー設定*/
    216 .inc_navi div.c a.navi_c_1:active ,
    217 .inc_navi div.c a.navi_c_1:hover {
    218         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) 0 0 no-repeat ;
    219 }
    220 
    221 .inc_navi div.c a.navi_c_2:active ,
    222 .inc_navi div.c a.navi_c_2:hover {
    223         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -120px 0 no-repeat ;
    224 }
    225 
    226 .inc_navi div.c a.navi_c_3:active ,
    227 .inc_navi div.c a.navi_c_3:hover {
    228         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -240px 0 no-repeat ;
    229 }
    230 
    231 .inc_navi div.c a.navi_c_4:active ,
    232 .inc_navi div.c a.navi_c_4:hover {
    233         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -360px 0 no-repeat ;
    234 }
    235 
    236 .inc_navi div.c a.navi_c_5:active ,
    237 .inc_navi div.c a.navi_c_5:hover {
    238         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -480px 0 no-repeat ;
    239 }
    240 
    241 .inc_navi div.c a.navi_c_6:active ,
    242 .inc_navi div.c a.navi_c_6:hover {
    243         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -600px 0 no-repeat ;
    244 }
    245 
    246 /**フォント色変更**/
    247 
    248 /*リンク関連*/
    249 a:link    { color: #026CD1; }
    250 a:visited { color: #004A95; }
    251 a:hover   { color: #76AFE6; }
    252 a:active  { color: #76AFE6; }
    253 
    254 /*コンテンツ見出しlv1*/
    255 td.bg_06 span.b_b,
    256 .c_00 { color: #222222; }
    257 
    258 /*コンテンツ見出しlv2*/
    259 .c_01 { color: #444444; }
    260 
    261 /*強調文字暖色*/
    262 .c_02 { color: #D92C49; }
    263 
    264 /*強調文字寒色*/
    265 .c_03 { color: #2C65D9; }
    266 
    267 /*その他文字色*/
    268 body { color: #000000; }
    269 
    270 -->
    271 </style>
    272 <script type="text/javascript">
    273 <!--
    274 TextFiledClassName_normal = 'text';
    275 TextFiledClassName_focus  = 'text_focus';
    276 
    277 Event.observe(window, 'load', setFocusClass, false);
    278 
    279 function setFocusClass() {
    280         var TFs = $A(document.getElementsByClassName(TextFiledClassName_normal));
    281         TFs.each(function (node){
    282                 node.TFclass = node.className;
    283                 node.TFclass_onfocus = TextFiledClassName_focus;
    284                 node.onfocus = function() { this.className = this.TFclass_onfocus; };
    285                 node.onblur  = function() { this.className = this.TFclass; };
    286         });
    287 }
    288 //-->
    289 </script>
    29013</head>
    29114
     
    430153<td style="width:5px;"><img src="./skin/dummy.gif" alt="dummy" style="width:5px;" class="dummy"></td><td class="left_content" valign="top">
    431154
    432 
    433 
    434 <!-- **************************************** -->
    435 <!-- ******ここから:自分の写真及びニックネーム覧****** -->
    436 <table border="0" cellspacing="0" cellpadding="0" style="width:270px;margin:0px auto;" class="border_07" id="main_image_and_name">
    437 <tr>
    438 <td style="width:7px;height:7px;" class="bg_05"><img src="./skin/dummy.gif" alt="square" class="square"></td>
    439 <td style="width:254px;height:7px;" class="bg_05"><img src="./skin/dummy.gif" alt="dummy" style="width:254px;height:7px;" class="dummy"></td>
    440 <td style="width:7px;height:7px;" class="bg_05"><img src="./skin/dummy.gif" alt="square" class="square"></td>
    441 </tr>
    442 <tr>
    443 <td class="bg_05"><img src="./skin/dummy.gif" alt="square" class="square"></td>
    444 <td align="center" class="bg_02">
    445 <!-- *ここから:自分の写真及びニックネーム覧>>内容* -->
    446 <!-- 無し -->
    447 <!-- ここから:写真 -->
    448 <div class="border_07 bg_02" align="center">
    449 
    450 <table border="0" cellspacing="0" cellpadding="0" style="width:252px;">
    451 <tr>
    452 <td align="center">
    453 
    454 <img src="./skin/dummy.gif" alt="dummy" class="v_spacer_m">
    455 
    456 <img src="./img.php?filename=m_1003_1201762420.jpg&amp;w=180&amp;h=180&amp;m=pc" class="pict" alt="写真" style="margin:2px">
    457 
    458 <table border="0" cellspacing="0" cellpadding="0">
    459 <tr>
    460 <td>
    461 <a href="./?m=pc&amp;a=page_h_config_image">
    462 <img src="./skin/default/img/button_edit_photo.gif"></a>
    463 <img src="./skin/dummy.gif" alt="dummy" class="v_spacer_s">
    464 </td>
    465 </tr>
    466 <tr>
    467 <td>
    468 <a href="./?m=pc&amp;a=page_h_prof">
    469 <img src="./skin/default/img/button_prof_conf.gif"></a>
    470 <img src="./skin/dummy.gif" alt="dummy" class="v_spacer_s">
    471 </td>
    472 </tr>
    473 </table>
    474 
    475 </td>
    476 </tr>
    477 </table>
    478 
    479 </div>
    480 <!-- ここまで:写真 -->
    481 <!-- ここから:自分のニックネーム -->
    482 <table border="0" cellspacing="0" cellpadding="0" style="width:254px;">
    483 <tr>
    484 <td align="center" class="bg_05 c_04">
    485 
    486 <img src="./skin/dummy.gif" alt="dummy" class="v_spacer_m">
    487 <img src="./img.php?filename=r_2_silver.gif&amp;m=pc" class="pict" alt="SILVER" style="margin:2px"><br>
    488 100 Point<br>
    489 
    490 <img src="./skin/dummy.gif" alt="dummy" class="v_spacer_m">
    491 えびはらこうすけさん (4)
    492 
    493 </td>
    494 </tr>
    495 </table>
    496 <!-- ここまで:自分のニックネーム -->
    497 <!-- *ここまで:自分の写真及びニックネーム覧>>内容* -->
    498 </td>
    499 <td class="bg_05"><img src="./skin/dummy.gif" alt="square" class="square"></td>
    500 </tr>
    501 <tr>
    502 <td class="bg_05"><img src="./skin/dummy.gif" alt="square" class="square"></td>
    503 <td class="bg_05"><img src="./skin/dummy.gif" alt="square" class="square"></td>
    504 <td class="bg_05"><img src="./skin/dummy.gif" alt="square" class="square"></td>
    505 </tr>
    506 </table>
    507 <!-- ******ここまで:自分の写真及びニックネーム覧****** -->
    508 <!-- **************************************** -->
     155<div id="HomeLeft">
     156<div class="section" id="homePhoto">
     157<div class="photo">
     158<p class="photo"><img src="./img.php?filename=m_1003_1201762420.jpg&amp;w=180&amp;h=180&amp;m=pc" alt="プロフィール写真" /></p>
     159<ul class="moreInfo">
     160<li id="hHomePhoto_1"><a href="./?m=pc&amp;a=page_h_config_image">写真を編集</a></li>
     161<li id="hHomePhoto_2"><a href="./?m=pc&amp;a=page_h_prof">プロフィール確認</a></li>
     162</ul>
     163</div>
     164<div class="text">
     165<p class="rank"><img src="http://takai.sns.dazai.pne.jp/img.php?filename=r_2_silver.gif&amp;m=pc" alt="Silver" /></p>
     166<p class="point">100 Point</p>
     167<p class="text">えびはらこうすけさん (4)</p>
     168<p class="loginTime">(最終ログインはこのクラスで)</p>
     169</div>
     170</div>
     171</div>
    509172
    510173<img src="./skin/dummy.gif" alt="dummy" class="v_spacer_m">
Note: See TracChangeset for help on using the changeset viewer.