いぶろぐ part2

日々創作




TVの壁掛け工事

こちらのテンプレート(JUGEM用)はフリーダウンロードできるようになっています。
お使いになりたいからはこちらからどうぞ。 テンプレート[Rooms YouTube対応版]
テレビ無しのシンプルバージョンはこちら。 テンプレート[Rooms]
また感想やご意見、改訂版の確認などはこちらの記事へ。 [Rooms]シリーズサポート

一定期間更新がないため広告を表示しています



  • Category > -
  • Written by > スポンサードリンク

今回はサイトのリニューアルに伴い、javascriptとcssの連携に関して備忘録を作ることにした。
これは通常のサイトだけではなく、ブログのテンプレートなどにも応用できるもので、逆に言えばものすごく基本的なことなのだけれど、やはり忘れないように記録しておくことにする。

内容はいたって単純で、曜日ごとに適用させるCSSを切り替えると言うもの。
少し変えれば時間ごとや、記念日だけ特別に、何てことも可能。
以前は曜日ごとに表示するフラッシュを変えるなんて事をしていたこともある。

どの程度CSSに変化をもたせるかによって、使い分けてもいいと思うのだけれど、僕が使っている構文は大まかに書いて以下の二つ。

その1
<SCRIPT type="text/javascript">
<!--
n=(new Date()).getDay();
document.write("<style type='text/css'><!");
document.write("-- .hyoushi{");
document.write("background-image : url(pict/");
document.write("Gazou-" + n + ".jpg);}--></style>");//-->

これは、htmlのなかに直接CSSを記入している例なのだけれど、今回のリニューアルで使用している構文。
トップの画像だけを変えるスクリプトなのだけれど、imgタグなどの中身を書き換えたりするのではなく、あくまでclass指定しているブロック要素の背景画像だけを変えるというやり方をしている。以下に簡単な説明を。
スクリプトの中身、最初の行のn=(new Date()).getDay();の部分で現在の日付から曜日を数字で取得し、nに代入。
次の行から続いているdocument.write("〜")はhtml内に直接6quot;&qut内の文字を打ち出す命令。
つまり、htmlの中に以下の文字が打ち出されているのと同様の意味を持つ。
<style type='text/css'><!-- .hyoushi{background-image : url(pict/Gazou-n.jpg);}--></style>
ここで2点注意。
ひとつは前述したけれど、実際
nの部分は0〜6の数字となっている。
それからもうひとつ。
javascriptのdocment.writeは改行をせずに文字を出力するので、今回のように何行かに分けて書いても、実際に出力される際には改行無しでつながったように出力されるという特徴がある。(逆に言えば改行をしたいなら改行コードを入れるかdocment.writelnを使う。)で、今回なぜこのように何行にも分けてコードを記述したかと言うと、まずは見栄え、見易さのため。またバグの回避のためである。
コードの中に<!--が入っているとうまく処理がなされなかったため、<!と--を別の行に記述した。すべてのブラウザで同様なのかはわからないけれど、少なくともIE6ではだめだった。


このコードは以上のように、少ない箇所を単純に切り替える際には使いやすい記述なのではないかと思う。

その2
<SCRIPT type="text/javascript">
<!--
youbi=(new Date()).getDay();
if (youbi==0) {document.write('<LINK REL="stylesheet" HREF="../NichiYoubi.css"
TYPE="text/css">');};
if (youbi==1) {document.write('<LINK REL="stylesheet" HREF="../GetsuYoubi.css"
TYPE="text/css">');};
if (youbi==2) {document.write('<LINK REL="stylesheet" HREF="../KaYoubi.css"
TYPE="text/css">');};
if (youbi==3) {document.write('<LINK REL="stylesheet" HREF="../SuiYoubi.css"
TYPE="text/css">');};
if (youbi==4) {document.write('<LINK REL="stylesheet" HREF="../MokuYoubi.css"
TYPE="text/css">');};
if (youbi==5) {document.write('<LINK REL="stylesheet" HREF="../KinYoubi.css"
TYPE="text/css">');};
if (youbi==6) {document.write('<LINK REL="stylesheet" HREF="../DoYoubi.css"
TYPE="text/css">');};
//-->

これはその1を踏まえて考えると単純にわかると思うのだけれど、今回はnの代わりにyoubiという変数を使用しているけれど、中に代入される数字は一緒。ただその後、その数字を直接使っているのではなく、その数字によって適用させるCSSファイル自体を選んでいる。
もちろん、外部にそれらCSSを用意する必要があるけれど、その分レイアウト全体を変化させることもできるので、曜日によって全く違うサイトに見えるという処理も不可能ではない。
またその1と組み合わせて考えると、外部CSSの参照にifを使用せずに
document.write('<LINK REL="stylesheet" HREF="../' + youbi + '.css"
TYPE="text/css">');

なんて使い方もいいと思う。どちらかというと、そうした方がスマートかな?ただ、今回はどれが何曜日になるのかがわかりやすいように記述しただけなので。
それからこちらのスクリプトがdocment.write('と言うようにシングルクオーテーションを使っているのは、表示する文字の中にダブルクオーテーションが含まれるため。逆にその1ではtext=''と表示する文字列の方をシングルクオーテーションに変えてある。

また、今回僕のサイトではjavascriptは外部ファイルにして読み込んでいるのだけれど、もちろんユーザーによってはjavascriptが使えない(ようにしている)環境の方もいると思う。
そこで、javascriptが動作しない環境の場合にそなえて<noscript>で記述するのが基本だけれど、今回僕は次のような処置をしている。

<link rel="stylesheet" href="2006/css/entrance2006.css" type="text/css" />
<script src="2006/js/entranceimagecss.js" type="text/javascript"></script>


どういうことかというと、最初の行が基本的なCSSファイルの指定。その次の行がその1で記述したのと同様のことが書かれているjavascriptfaileを読み込んで実行させている部分。
今回javascriptから読み込まれて実行されるCSSは、既に基本的なCSSファイルのほうで指定されている。もちろんそちらは曜日によって変化などしないのだけれど、javascriptが機能しなかった場合はそちらのCSSが適用され、javascriptが機能した場合には後からのCSSが適用される(※重複する部分は、後からの指定を優先させると言うCSSの原則による)というわけ。

検索などできてくれた方にはわかりにくい記述になってしまったかもしれないけれど、備忘録として残しておこうと思う。





  • Category > -
  • Written by > スポンサードリンク

Comments


東京・埼玉で地デジ工事
blog comments powered by Disqus
▼コメントする









Trackbacks

Trackback URL

東京・埼玉でオール電化工事を頼むなら
このpageのtopへ▲

Popular Threads

Powered by Disqus
totaltodayyesterday

2018

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
<< December 2018 >>
RSS & Recommends

アスクル
Add to google
iriver eストア(Cover Story Basic)
マウスコンピューター/G-Tune
AdobeWebPremiumCS5
 iTunes Store(Japan)
 iTunes Store(Japan)
いぶろぐも使っている JUGEM PLUS
スーパーバッド 童貞ウォーズ
DIRECTORS LABEL ジョナサン・グレイザー BEST SELECTION
ROUTES

Recent Comment

Recent Trackback

***
デザイナーズ・フォントセレクト1000
フリーフォントガイドブックFOR WINDOWS Vol.2 (2) (I/O BOOKS)

スカウター : いぶろぐ part2
このpageのtopへ▲