ブログスタイルのカスタマイズ１

ブログスタイルのカスタマイズ１

ブログのスタイルがシンプルすぎると友たちからいわれました。しかしながら僕自身はシンプルなスタイルがすきです。
なぜなら、華やかなスタイルのロード時間が長いし、主なブログ内容を見にくい恐れが出る可能性もあります。
でも長い時間に同じシンプル静的なスタイルページを見ることも辛いので、ブログのスタイルを静的から動的へ変えこと
を決意しました。
■スタイル変動主な内容：
①時間段によるヘッダー画像を自動的に変わる（対応済み）
　→２時間毎で時間帯を示すことができるシーンの画像を自動的に適用される
　→月～日に毎日シーンの違う画像が現れる
　※画像を探すことはすごく困りました、結局iGoogle Theme Projectの画像ファイルを引用することにしました
②ナビバーに広告映像を追加する（対応済み）
　→米国のGlobal Domains International業務を紹介するビデオをナビバーに追加しました
③素敵な文字フォントを応用する（未着手）
■ソースコード
JavaScript

 1  // 現時点取得
 2  var  date  =   new  Date();
 3 
 4  var  yb  =  date.getDay();
 5 
 6  var  hh  =  date.getHours();
 7 
 8  // スタイルＩＤの定義
 9  var  themeIdSet  =  [ " sweetdreams " ,  " springscape " ,  " tiger " ,  " teahouse " ,  " JR " ,  " autumn " ,  " beach " ];
10 
11  // 稼働日によるスタイルＩＤを選択する
12  var  themeId  =  themeIdSet[yb];
13 
14  // 画像ファイルＵＲＬ
15  var  urlPrefix  =   " http://img0.gmodules.com/ig/images/skins/ " ;
16 
17  // 各時間帯の画像ファイルパスの定義
18  var  timeKeySet  =  [ " midnight " ,  " 2am " ,  " 4am " ,  " 6am " ,  " 8am " ,  " 10am " ,  " noon " ,  " 2pm " ,  " 4pm " ,  " 6pm " ,  " 8pm " ,  " 10pm " ];
19 
20  if (hh  %   2   !=   0 ){
21      hh  =  hh  -   1 ;
22  }
23 
24  // 時間帯による画像ファイルパスを選択する
25  var  timeKey  =  timeKeySet[hh / 2 ];
26 
27  // 背景画像のＵＲＬを算出
28  var  _urlTile  =  urlPrefix  +  themeId  +   " / "   +  timeKey  +   " / "   +   " header_tile.jpg " ;
29 
30  // ヘッダ画像のＵＲＬを算出
31  var  _urlBg  =  urlPrefix  +  themeId  +   " / "   +  timeKey  +   " / "   +   " header_bg.jpg " ;
32 
33  var  headerHeigth  =  [ 175 ,  206 ,  250 ,  250 ,  206 ,  206 ,  200 ];
34 
35  if ( navigator.userAgent.indexOf( " MSIE " )  <   0  ) {
36       // ＩＥ以外ブラウザの対応
37       var  cssStr  =  
38           " body{\n "   +  
39           " font-size: 12pt;\n "   +  
40           " margin:0px;\n "   +  
41           " background:url(' "   +  _urlTile  +   " ') repeat-x top center;\n "   +  
42           " font-family:ms shell dlg;\n "   +  
43           " }\n "   +  
44           " \n "   +  
45           " h1 {\n "   +  
46           "     margin:0px;\n "   +  
47           "     background:url(' "   +  _urlBg  +   " ')no-repeat top center;\n "   +   
48           "     height:  "   +  headerHeigth[yb  -   1 ]  +   " px;\n "   +  
49           "     padding-right:40px;\n "   +  
50           "     font-family: ms shell dlg;\n "   +  
51           "     font-size:16px;\n "   +  
52           "     font-weight:bold;\n "   +  
53           "     border-bottom:6px solid #ADBB88;\n "   +  
54           " }\n "   +  
55           " #Header1_HeaderTitle{float:left;padding-top:116px;text-align:right;width:100%;visibility: hidden;} " ;
56       var  styles  =  document.createElement( " style " );
57      styles.setAttribute( " type " ,  " text/css " );
58       var  newStyle  =  document.createTextNode(cssStr);
59      styles.appendChild(newStyle);
60       var  headRef  =  document.getElementsByTagName('head')[ 0 ];
61      headRef.appendChild(styles); 
62  }

CSS

 1  body {
 2      font-size :  12pt ;
 3      margin : 0px ;
 4      background : repeat-x top center ;
 5      background-image : expression("url('" + _urlTile + "')") ;
 6      background-repeat :  repeat-x ;
 7      background-position :  top center ;
 8      font-family : ms shell dlg ;
 9  }
10 
11  h1  {
12      margin : 0px ;
13      background : no-repeat top center ;
14      background-image : expression("url('" + _urlBg + "')") ;
15      background-repeat :  no-repeat ;
16      background-position :  top center ;
17      height :  expression(headerHeigth[yb] + "px") ;
18      padding-right : 40px ;
19      font-family :  ms shell dlg ;
20      font-size : 16px ;
21      font-weight : bold ;
22      border-bottom : 6px solid #ADBB88 ;
23  }