ブログのスタイルがシンプルすぎると友たちからいわれました。しかしながら僕自身はシンプルなスタイルがすきです。
なぜなら、華やかなスタイルのロード時間が長いし、主なブログ内容を見にくい恐れが出る可能性もあります。
でも長い時間に同じシンプル静的なスタイルページを見ることも辛いので、ブログのスタイルを静的から動的へ変えこと
を決意しました。
■スタイル変動主な内容：
①時間段によるヘッダー画像を自動的に変わる（対応済み）
→２時間毎で時間帯を示すことができるシーンの画像を自動的に適用される
→月～日に毎日シーンの違う画像が現れる
※画像を探すことはすごく困りました、結局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 }