カテゴリ毎に違ったデザインに自動で変えちゃおう計画

　デザインが、まあ思うように変更できたので、

今度はさらにカテゴリ表示毎にデザインを自動的に変更してみたーーーーーい！！

まあ、デザイン変更するより、こっちが本来の目的だったんだけど、
JavaScriptというのは、なぜか新しいことを自分がやろうとすると、
いろいろな問題が、いつも起こる。

というより仕様を知らないで作るので、いろいろブラウザから懲らしめられるんだけど、
それを解決しながら、作るのが、大変なんだよね。

今回も同じでした。T T);;

ということで、その奮闘記を書いてみた。

でも、結論は簡単なんだけど、そこまで辿り付くのがかなり大回りしたみたい。^^);;

【BLOCKBLOGで書式を変更するには】

・以前、自分のＨＰの文字サイズを画面サイズに合わせて自動的に変更したことあるが、
　デザイン変えるのも同じように出来るのかと思ったが
　ＭＳサイトで調べたら、どうもBLOCKBLOGで使用しているような外部ＣＳＳファイル形式では、
　ＣＳＳファイル自体を置き換えるしかないようだ。

【JSファイルでの裏技が必要】

・ＭＳサイトにあったように別のＣＳＳファイルをサーバ（まずは自分のＰＣ内）に置いて、
　これで置き換えるようにＪＳファイルに書いて試してみたが、
　書式が反映されない表示になってしまった。

・いろいろ試してみたところ、ＪＳファイルを持ちいると駄目みたい。
　そこで、ＨＴＭＬ文内に置き換える部分を直接書いて見ると、
　確かにＣＳＳファイルで置き換えができた。

　ということは、ＪＳファイルの中身を、SCRIPTタグも含めて
　すべてdocument.writeすると上手くいくかも。
　で、やってみたら、上手くいった。

　注）2005.01.20 IE6,Mozilla 1.8a4,Opera7.23で見てみたが、
　　　特にdocument.writeしなくてもＯＫだった。
　　　何が原因だったのか、もう後の祭りだ。^^)
　　　ということで、この章は削除ということで。^^);;;

【ＤＯＭでの変更のやり方】

・次にＤＯＭではどうやって置き換えるのかなと思って、ＤＯＭの仕様を見てみたが良く分からん。
　「はぎさんのＨＰの外部CSSを切り替える」と「とほほのＷＷＷ入門の中のＤＯＭの記述」を見ていて、
　どうもＬＩＮＫタグのＨＲＥＦを書き換えてやればＯＫみたい。

　で、BLOCKBLOGにはＩＤ属性はないので、ＬＩＮＫタグとＲＥＦ属性で
　目的のＣＳＳファイル指定のＬＩＮＫタグを見つけ、
　そのＨＲＥＦを目的のＣＳＳファイルで置き換えればいいようだ。

【デザイン変更の切っ掛け】

・自分のブログは、大きなカテゴリ分けになっていて、
　本来ならそれぞれ単独のブログで書く内容だけど、
　ひとつのブログにカテゴリ分けして書いている。
　なので、カテゴリ毎にデザインを変えてみてはと思いつく、

　では、どうやって変えるのか？と考えたところ、

　BLOCKBLOGでは各表示されるページの先頭の記事にはSPANタグのClass属性でCategolyとあり、
　この中のAタグのURLでBLOCKBLOGのカテゴリ名があるので、
　これを判断材料に、デザインを変更すればよい。

【どうやってカテゴリ名を見つけるの】

・まず、DOMの方は、「とほほのＷＷＷ入門のDOM」の記述を見て
　document.getElementsByTagName("SPAN")でSPANタグを見つけ、
　その中でClass属性の名称が"categoly"をattributes.getNamedItem("class").valueで
　一致するものを探し、
　その中の文字列をinnerHTMLで取得し、
　その中の自分で指定したカテゴリ名を探せばよい。

・同じようにIEのDOM以前のものは、「とほほのＷＷＷ入門のエレメント」の記述を見て
　document.all.tags("SPAN")でSPANタグを見つけ、
　その中でClass属性の名称が"categoly"をclassNameで一致するものを探し、
　その中の文字列をinnerHTMLで取得し、
　その中の自分で指定したカテゴリ名を探せばよい。

【ただし落とし穴が】

・これをJSファイルで単に記述した場合、
　本文が右側に表示されるデザインでは、
　先頭の記事が出現する前にJSファイルが処理されてしまうため
　目的の先頭の記事が見えない。

・そこで、onloadイベントハンドラを使い、onload時に上記CSS変更を行うように
　onloadイベントハンドラに上記を関数化して登録すればよい。

ということで、デザイン変更が出来ました。

【デザインを作る】

問題は、ほかのデザインを作る方が大変なんだけど。。。。。はあ
で、カテゴリ毎にデザイン作ってたら、数が多すぎるので、
新しく作るのは、「てんてん丸」と「カラオケ」の２つに絞った。

デザインの才能はないので、カッコいいのはもちろん出来ないため、
現在のデザインの基本系は変えずに、背景画像を変えるだけにした。

「てんてん丸」は、かわいい系ということで、ピンクをベースに。
「カラオケ」は、青、ピンクと来たので、ちょっとシックに黒系で。

で、なんとか出来はしたが。。。。

5/23:「ＭＹ日記」を茶系でしぶく作ることに。
　　　ただし、画像は使わずすべてＣＳＳで作ってみた。
　　　まあ、いいものが出来たかな？？


【しかし、最大の問題が。。。】

ところが、これを実施にＵＰしてみると、なんだか画面表示が遅い。
というか、おかしくなっているっぽい。

で、再度ローカルで試してみたがＯＫなのよね。

よくよく調べたら、
先頭の＜！ＤＯＣＴＹＰＥ指定を、
ローカルでは、以前のスライダー表示の時に！マークを削除していたようで、

それでこのタグが無効になっていて、うまくいっていた。
スライダー表示と同じく、このタグがあるとおかしい。

どうおかしいかというと、ＣＳＳファイルを書き換えると、
上記タグがなければ、すぐ書き換わるが、

上記タグがあると、初めからページを読み込みはじめる。
するとonLoad時にまたＣＳＳファイルを書き換えようとするので、
永久ループになってしまう。

これもＩＥのバグっぽい？

【仕方なく方針転換】

で、onLoadでなく、BODY部にあればＯＫなんだよね。
まあ、BODY部の最後でJSファイルが実行できればＯＫなんだけど、
それが出来ないので、

先頭の記事のカテゴリにデザインを合わせるのでなく、
JSファイルが処理される前に判断できるとなると、

BLOCKBLOGの仕様では、カテゴリを判断できる情報が何もないので。T T);;
仕方なく、読み込まれるＵＲＬで判断するしかない。
そのため、カテゴリを指定した時しか、デザイン変更出来ないため、
大分、思惑と異なる仕様になっちゃいました。

【今度はデザインがおかしくなった】

で、出来たと思ったら、今度はカラオケのデザインを表示すると、
本文が下に逃げていってしまう。うーーーーなんで。。。。^^);;;

仕方なく、カラオケのＣＳＳファイルを、問題ないてんてん丸のＣＳＳファイルと見比べ
違っているところを、てんてん丸に合わせて行くことで、
どこが問題のところかを調べた。

そしたら、左側のＢＯＸ内のMENU領域の背景画像を指定するところの
PADDING-LEFTを０から１５に変更していた。
これを０にしたらＯＫになった。

この書式だと０から９まではＯＫで１０以上指定するとＮＧのようで、
要するに、左側のサイズを大きくしていくと、
右側の本文が全体の横サイズに入らなくなるので、
仕方なく下側に配置転換しているようですね。

でも、ＣＳＳファイルだけみて調整してたら、はみ出すかどうかなんて分からない。
ということは、その辺を解決してくれるＣＳＳエディタなんてものが多分あるんだろうな。

【いや、ちょっと待て】

ここで、スライダー表示の謎を解明してたら、これがバグではなく、
仕様だったのでした。この詳細は、ここを参照。

で、こちらもDOCTYPEを取ればＯＫのため、どうもこちらも仕様のようだと思い、
詳細に調べてみた。

スライダー表示とデザイン切替えを同じＪＳファイルに書いていた。
なぜなら、同じところに書いておかないと辻褄が合わなくなるので。

そしたら、スライダー表示する際にウィンドウをリサイズなどされたときに、
あるブラウザだとスライダーの位置がずれてしまうので、
これを解決するために、リサイズされたときに発生するonresizeイベントで、
その位置を元に戻すために、手を抜いて再表示をしていた。

で、onLoadイベント時に書式を変更すると、
onresizeイベントが発生していた。このため再表示を繰り返したのが原因でした。

ただし、LINKタグの書式と同じ書式に変更時は、なにも起こらないので、
どうもLINKタグの書式と変更する書式で何らかのサイズが異なると、
onresizeイベントを通知してくれるようです。

ＭＳのサイトで調べたら、ウィンドウのリサイズ以外にも、
DIVやIMGやTABLE等のサイズが変更されても通知されるようですね。
そのため、デバッグに使用していたカラオケのＣＳＳファイルでは、
ちょっとだけ上記タグのサイズを変更したりしていたので発生していたようです。

で、手抜きを変更したら上手く行きました。

【ところが、てんてん丸が。。。】

ところが、てんてん丸の方は、上記のサイズは変えずに、文字の大きさなどを大き目に
変えていたが、その結果、レイアウトは下側にずれるが、onresizeイベントが来ない。
で、デザイン切替えの後でスライダー表示の位置ずれ補正を掛けてるが、
このデザイン切替えは、並行して処理されてるようで、補正の後からデザインが変わるため
補正は意味を持たず、結果スライダーの位置がずれてしまう。
あああーーーーああ、駄目だ。

ここで、もがいても、デザインが変わるのがいつ時だか分からないので、
またてんてん丸の画像サイズ等を変えるのは、デザインに制約を作るので好ましくない為
ここで、再度大きく方針転換し、

今までの経験を生かし、
右側にブロック配置し、それも大きなサイズの。そしたら一番下側に配置されるし、
で、このブロックを書式で見えなくしといて、ＣＳＳ切替スクリプト関数だけ呼べば、
あまり変更せずに済むかなと。

【あっ、ｆｏｏｔｅｒがあった！！】

で、BLOCKBLOGのブロック編集を見たら、なんだfooterがあるではないですか。
これって一番下に配置されるんですよね。

なあんだ、始めからこれを使っていれば、こんなに苦労せずに出来たのに。
あああーーあ、はじめからこうして置けば良かった。T T);;


ということで、大変な思いして、なんとか出来たけど。
やっぱり、仕様をちゃんと理解しないで作ってると、こういう目に合うんですね。

でも、あああーー疲れた。ということで、ＪＳファイルいじるのしばらく休憩しとこ。

【BLOCKBLOGで対応すれば簡単】
　まあ、JavaScriptでやってみたけど、これは上級者向きのことなので、
BLOCKBLOGの本来の目的には大分反しているんだけどね。

でも、段々使われてくると、その内デザインを変えて見たいという声が増えて
くるかもね。そのときは、BLOCKBLOGの目的通り初心者向きでないといけないので、
きっと、BLOCKBLOGさんで、同じ機能を作ってくれることでしょう。

BLOCKBLOGさんで対応すれば、もちろんJavaSciptなんて使わずに、
単にＨＴＭＬを生成する時にLINKタグの内容を変えるだけでできるので、
あとは、その設定画面と、LINKタグの内容を変えるだけの処理を追加するだけだと
思うので、作ろうと思えばすぐ出来ちゃう程度のものかな？

【注意点のまとめ】

?動作環境
　・ＤＯＭは、ブラウザだと、ＩＥ５以上、Mozilla、ＮＮ６以上でできるようです。
　・自分の環境は、IE6.0 SP1、Mozilla1.6とOpera7.23しかないので、これで確認し、
　　この環境のみのことで書いてある。
　　それ以外のバージョンや、他のブラウザはもちろん無視（動くかどうか不明）。
　・ＯＳは、WindowsXP SP1しかないので、これ以外のＯＳは使ったことがないため無視。
　・マシンも、ＰＣしか持ってないので、Ｍａｃとかは、もちろん無視。
　・BLOCKBLOGの文書構造に合わせて作成してあるので、
　　この文書構造以外は当然動かないです。^^);;

　・2004.09.22 Mac OS X 10.3.4/Safari 1.2.2(v125.7)で動かしたら、動いた。

【でも直ぐ使いたいという気さくな方】

　ここ見てね。

当然、内容理解できて、何が必要で、どうすればいいかを
判断できる人ね。で、自分で改造してね。
もちろん、サポート、問合せはごめんね。なしで。m(_ _)m