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

Changeset 5172


Ignore:
Timestamp:
Feb 14, 2008, 3:19:52 PM (12 years ago)
Author:
takai
Message:

f_homeのローカルナビを書き換え

File:
1 edited

Legend:

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

    r5170 r5172  
    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 <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" />
    911<script type="text/javascript" src="./js/prototype.js"></script>
    1012<script type="text/javascript" src="./js/pne.js"></script>
    11 <style type="text/css">
    12 <!--
    13 /*枠線要素*/
    14 .border_01 { border: #CCCCCC 1px solid ; }
    15 .border_07 { border: #CCCCCC 1px solid ; }
    16 .border_10 { border: #FFFFFF 1px solid ; }
    17 
    18 /*背景要素*/
    19 .bg_00 { background-color: #FFFFFF ; }
    20 .bg_01 { background-color: #CCCCCC ; }
    21 .bg_02 { background-color: #FFFFFF ; }
    22 .bg_03 { background-color: #FFFFFF ; }
    23 .bg_04 { background-color: #CCCCCC ; }
    24 .bg_05 { background-color: #FFFFFF ; }
    25 .bg_06 { background-color: #36B3D1 ; }
    26 .bg_07 { background-color: #CCCCCC ; }
    27 .bg_08 { background-color: #FFFFFF ; }
    28 .bg_09 { background-color: #FFFFFF ; }
    29 .bg_10 { background-color: #CCCCCC ; }
    30 .bg_11 { background-color: #DDDDDD ; }
    31 .bg_12 { background-color: #FFFFFF ; }
    32 .bg_13 { background-color: #FFFFFF ; }
    33 .bg_14 { background-color: #FFFFFF ; }
    34 .color_19 { background-color: #FFFFFF ; }
    35 
    36 body { background-color: #FFFFFF ; }
    37 .container { background-color: #FFFFFF ; }
    38 
    39 .arrow_1 {
    40   width: 17px ;
    41   height: 14px ;
    42   background: url(./skin/default/img/icon_arrow_1.gif) 0% 100%  no-repeat ;
    43 }
    44 .icon_1 {
    45   width: 14px ;
    46   height: 14px ;
    47   background: url(./skin/default/img/icon_1.gif) 50% 70%  no-repeat ;
    48 }
    49 .icon_2 {
    50   width: 14px ;
    51   height: 14px ;
    52   background: url(./skin/default/img/icon_2.gif) 50% 70%  no-repeat ;
    53 }
    54 .icon_3 {
    55   width: 14px ;
    56   height: 14px ;
    57   background: url(./skin/default/img/icon_3.gif) 50% 70%  no-repeat ;
    58 }
    59 
    60 * { font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Ghothic Pro W3", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka, sans-serif ; }
    61 
    62 /*ここから:safari1.xパスワードフォーム非表示対策*/
    63 html:\66irst-child input[type="password"] { font-family: "Lucida Grande", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Ghothic Pro W3", "ヒラギノ角ゴ Pro W3",sans-serif,"Osaka" ; }
    64 /*ここまで:safari1.xパスワードフォーム非表示対策*/
    65 
    66 /*テキスト入力欄のフォーカス時のクラス*/
    67 .text       { background-color:#F8F8F8; }
    68 .text_focus { background-color:#FFFFFF; }
    69 
    70 
    71 /*ボタンに対する背景画像の指定*/
    72 input.submit {
    73         background: #DADCE6 url(./skin/default/img/bg_button.gif) 50% 0 repeat-x ;
    74 }
    75 
    76 /*ページヘッダロールオーバー設定*/
    77 div.inc_page_header div.navi_global a.navi_global_1:active ,
    78 div.inc_page_header div.navi_global a.navi_global_1:hover {
    79         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) 0 -70px no-repeat ;
    80 }
    81 
    82 div.inc_page_header div.navi_global a.navi_global_2:active ,
    83 div.inc_page_header div.navi_global a.navi_global_2:hover {
    84         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -90px -70px no-repeat ;
    85 }
    86 
    87 div.inc_page_header div.navi_global a.navi_global_3:active ,
    88 div.inc_page_header div.navi_global a.navi_global_3:hover {
    89         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -180px -70px no-repeat ;
    90 }
    91 
    92 div.inc_page_header div.navi_global a.navi_global_4:active ,
    93 div.inc_page_header div.navi_global a.navi_global_4:hover {
    94         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -288px -70px no-repeat ;
    95 }
    96 
    97 div.inc_page_header div.navi_global a.navi_global_5:active ,
    98 div.inc_page_header div.navi_global a.navi_global_5:hover {
    99         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -360px -70px no-repeat ;
    100 }
    101 
    102 div.inc_page_header div.navi_global a.navi_global_6:active ,
    103 div.inc_page_header div.navi_global a.navi_global_6:hover {
    104         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -432px -70px no-repeat ;
    105 }
    106 
    107 div.inc_page_header div.navi_global a.navi_global_7:active ,
    108 div.inc_page_header div.navi_global a.navi_global_7:hover {
    109         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -504px -70px no-repeat ;
    110 }
    111 
    112 div.inc_page_header div.navi_global a.navi_global_8:active ,
    113 div.inc_page_header div.navi_global a.navi_global_8:hover {
    114         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -576px -70px no-repeat ;
    115 }
    116 
    117 div.inc_page_header div.navi_global a.navi_global_9:active ,
    118 div.inc_page_header div.navi_global a.navi_global_9:hover {
    119         background: url(./skin/005_openpne_blue/img/skin_after_header_2.jpg) -648px -70px no-repeat ;
    120 }
    121 
    122 /*h系ナビロールオーバー設定*/
    123 .inc_navi div.h a.navi_h_1:active ,
    124 .inc_navi div.h a.navi_h_1:hover {
    125         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) 0 0 no-repeat ;
    126 }
    127 
    128 .inc_navi div.h a.navi_h_2:active ,
    129 .inc_navi div.h a.navi_h_2:hover {
    130         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -80px 0 no-repeat ;
    131 }
    132 
    133 .inc_navi div.h a.navi_h_3:active ,
    134 .inc_navi div.h a.navi_h_3:hover {
    135         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -160px 0 no-repeat ;
    136 }
    137 
    138 .inc_navi div.h a.navi_h_4:active ,
    139 .inc_navi div.h a.navi_h_4:hover {
    140         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -240px 0 no-repeat ;
    141 }
    142 
    143 .inc_navi div.h a.navi_h_5:active ,
    144 .inc_navi div.h a.navi_h_5:hover {
    145         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -320px 0 no-repeat ;
    146 }
    147 
    148 .inc_navi div.h a.navi_h_6:active ,
    149 .inc_navi div.h a.navi_h_6:hover {
    150         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -400px 0 no-repeat ;
    151 }
    152 
    153 .inc_navi div.h a.navi_h_7:active ,
    154 .inc_navi div.h a.navi_h_7:hover {
    155         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -480px 0 no-repeat ;
    156 }
    157 
    158 .inc_navi div.h a.navi_h_8:active ,
    159 .inc_navi div.h a.navi_h_8:hover {
    160         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -560px 0 no-repeat ;
    161 }
    162 
    163 .inc_navi div.h a.navi_h_9:active ,
    164 .inc_navi div.h a.navi_h_9:hover {
    165         background: url(./skin/005_openpne_blue/img/skin_navi_h_2.jpg) -640px 0 no-repeat ;
    166 }
    167 
    168 /*f系ナビロールオーバー設定*/
    169 .inc_navi div.f a.navi_f_1:active ,
    170 .inc_navi div.f a.navi_f_1:hover {
    171         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) 0 0 no-repeat ;
    172 }
    173 
    174 .inc_navi div.f a.navi_f_2:active ,
    175 .inc_navi div.f a.navi_f_2:hover {
    176         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -80px 0 no-repeat ;
    177 }
    178 
    179 .inc_navi div.f a.navi_f_3:active ,
    180 .inc_navi div.f a.navi_f_3:hover {
    181         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -160px 0 no-repeat ;
    182 }
    183 
    184 .inc_navi div.f a.navi_f_4:active ,
    185 .inc_navi div.f a.navi_f_4:hover {
    186         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -240px 0 no-repeat ;
    187 }
    188 
    189 .inc_navi div.f a.navi_f_5:active ,
    190 .inc_navi div.f a.navi_f_5:hover {
    191         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -320px 0 no-repeat ;
    192 }
    193 
    194 .inc_navi div.f a.navi_f_6:active ,
    195 .inc_navi div.f a.navi_f_6:hover {
    196         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -400px 0 no-repeat ;
    197 }
    198 
    199 .inc_navi div.f a.navi_f_7:active ,
    200 .inc_navi div.f a.navi_f_7:hover {
    201         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -480px 0 no-repeat ;
    202 }
    203 
    204 .inc_navi div.f a.navi_f_8:active ,
    205 .inc_navi div.f a.navi_f_8:hover {
    206         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -560px 0 no-repeat ;
    207 }
    208 
    209 .inc_navi div.f a.navi_f_9:active ,
    210 .inc_navi div.f a.navi_f_9:hover {
    211         background: url(./skin/005_openpne_blue/img/skin_navi_f_2.jpg) -640px 0 no-repeat ;
    212 }
    213 
    214 /*c系ナビロールオーバー設定*/
    215 .inc_navi div.c a.navi_c_1:active ,
    216 .inc_navi div.c a.navi_c_1:hover {
    217         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) 0 0 no-repeat ;
    218 }
    219 
    220 .inc_navi div.c a.navi_c_2:active ,
    221 .inc_navi div.c a.navi_c_2:hover {
    222         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -120px 0 no-repeat ;
    223 }
    224 
    225 .inc_navi div.c a.navi_c_3:active ,
    226 .inc_navi div.c a.navi_c_3:hover {
    227         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -240px 0 no-repeat ;
    228 }
    229 
    230 .inc_navi div.c a.navi_c_4:active ,
    231 .inc_navi div.c a.navi_c_4:hover {
    232         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -360px 0 no-repeat ;
    233 }
    234 
    235 .inc_navi div.c a.navi_c_5:active ,
    236 .inc_navi div.c a.navi_c_5:hover {
    237         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -480px 0 no-repeat ;
    238 }
    239 
    240 .inc_navi div.c a.navi_c_6:active ,
    241 .inc_navi div.c a.navi_c_6:hover {
    242         background: url(./skin/005_openpne_blue/img/skin_navi_c_2.jpg) -600px 0 no-repeat ;
    243 }
    244 
    245 /**フォント色変更**/
    246 
    247 /*リンク関連*/
    248 a:link    { color: #026CD1; }
    249 a:visited { color: #004A95; }
    250 a:hover   { color: #76AFE6; }
    251 a:active  { color: #76AFE6; }
    252 
    253 /*コンテンツ見出しlv1*/
    254 td.bg_06 span.b_b,
    255 .c_00 { color: #222222; }
    256 
    257 /*コンテンツ見出しlv2*/
    258 .c_01 { color: #444444; }
    259 
    260 /*強調文字暖色*/
    261 .c_02 { color: #D92C49; }
    262 
    263 /*強調文字寒色*/
    264 .c_03 { color: #2C65D9; }
    265 
    266 /*その他文字色*/
    267 body { color: #000000; }
    268 
    269 -->
    270 </style>
    27113<script type="text/javascript">
    27214<!--
    273 TextFiledClassName_normal = 'text';
    274 TextFiledClassName_focus  = 'text_focus';
    275 
    276 Event.observe(window, 'load', setFocusClass, false);
    277 
    278 function setFocusClass() {
    279         var TFs = $A(document.getElementsByClassName(TextFiledClassName_normal));
    280         TFs.each(function (node){
    281                 node.TFclass = node.className;
    282                 node.TFclass_onfocus = TextFiledClassName_focus;
    283                 node.onfocus = function() { this.className = this.TFclass_onfocus; };
    284                 node.onblur  = function() { this.className = this.TFclass; };
    285         });
     15var colorful = new ColorfulInput;
     16colorful.change = ['text', 'password', 'textarea'];
     17
     18window.onload = function(){
     19        colorful.set();
     20}
     21
     22function ColorfulInput(){
     23        this.color = {'blur': '', 'focus': '#ffffff'};
     24        this.border = {'blur': '', 'focus': '#888888'};
     25
     26        this.set = function(){
     27        for(var i = 0; i < document.forms.length; ++i){
     28                for(var f = 0; f < document.forms[i].length; ++f){
     29                        var elm = document.forms[i][f];
     30                        if(!this._checkChange(elm)) continue;
     31
     32                        this._setColor(elm, 'focus');
     33                        this._setColor(elm, 'blur');
     34                }
     35        }
     36}
     37
     38this._checkChange = function(elm){
     39                for(var i in this.change){
     40                        if(elm.type == this.change[i]) return true;
     41                }
     42                return false;
     43        }
     44
     45        this._setColor = function(elm, type){
     46                var color = this.color[type];
     47                var border = this.border[type];
     48                var event = function(){
     49                        elm.style.backgroundColor = color;
     50                        elm.style.borderColor = border;
     51                };
     52
     53                if(elm.addEventListener){
     54                        elm.addEventListener(type, event, false);
     55                } else if(elm.attachEvent){
     56                        elm.attachEvent('on' + type, event);
     57                } else{
     58                        elm['on' + type] = event;
     59                }
     60        }
    28661}
    28762//-->
     
    331106<div class="w_screen inc_navi">
    332107
    333 <img src="./skin/005_openpne_blue/img/skin_navi_f.jpg" class="bg">
    334 <div class="f">
    335 
    336 <a class="navi_f_1" href="?m=pc&amp;a=page_f_home&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="ホーム"></a>
    337 <a class="navi_f_2" href="?m=pc&amp;a=page_fh_friend_list&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="フレンド"></a>
    338 <a class="navi_f_3" href="?m=pc&amp;a=page_fh_diary_list&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="日記を読む"></a>
    339 <a class="navi_f_4" href="?m=pc&amp;a=page_f_message_send&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="メッセージを送る"></a>
    340 <a class="navi_f_5" href="?m=pc&amp;a=page_f_bookmark_add&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="お気に入りに追加"></a>
    341 <a class="navi_f_6" href="?m=pc&amp;a=page_fh_review_list_member&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="レビュー"></a>
    342 <a class="navi_f_7" href="?m=pc&amp;a=page_f_invite&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="マイフレンドに紹介"></a>
    343 <a class="navi_f_8" href="?m=pc&amp;a=page_f_link_request&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="マイフレンドに追加"></a>
    344 <a class="navi_f_9" href="?m=pc&amp;a=page_f_intro_edit&amp;target_c_member_id=1002"><img src="./skin/dummy.gif" alt="紹介文を書く"></a>
    345 
     108<div class="section localNav" id="fLocalNav">
     109<ul>
     110<li id="fLocalNav_1"><a href="?m=pc&amp;a=page_f_home&amp;target_c_member_id=1002">ホーム</a></li>
     111<li id="fLocalNav_2"><a href="?m=pc&amp;a=page_fh_friend_list&amp;target_c_member_id=1002">フレンド</a></li>
     112<li id="fLocalNav_3"><a href="?m=pc&amp;a=page_fh_diary_list&amp;target_c_member_id=1002">日記を読む</a></li>
     113<li id="fLocalNav_4"><a href="?m=pc&amp;a=page_f_message_send&amp;target_c_member_id=1002">メッセージを送る</a></li>
     114<li id="fLocalNav_5"><a href="?m=pc&amp;a=page_f_bookmark_add&amp;target_c_member_id=1002">お気に入りに追加</a></li>
     115<li id="fLocalNav_6"><a href="?m=pc&amp;a=page_fh_review_list_member&amp;target_c_member_id=1002">レビュー</a></li>
     116<li id="fLocalNav_7"><a href="?m=pc&amp;a=page_f_invite&amp;target_c_member_id=1002">マイフレンドに紹介</a></li>
     117<li id="fLocalNav_8"><a href="?m=pc&amp;a=page_f_link_request&amp;target_c_member_id=1002">マイフレンドに追加</a></li>
     118<li id="fLocalNav_9"><a href="?m=pc&amp;a=page_f_intro_edit&amp;target_c_member_id=1002">紹介文を書く</a></li>
     119</ul>
    346120</div>
    347121
Note: See TracChangeset for help on using the changeset viewer.