ないブログに表示されています。新しい記事を書く事で広告が消えます。今度はさらにカテゴリ表示毎にデザインを自動的に変更してみたーーーーーい!!まあ、デザイン変更するより、こっちが本来の目的だったんだけど、JavaScriptというのは、なぜか新しいことを自分がやろうとすると、いろいろな問題が、いつも起こる。いうより仕様を知らないで作るので、いろいろブラウザから懲らしめられるんだけど、それを解決しながら、作るのが、大変なんだよね。T);;ということで、その奮闘記を書いてみた。結論は簡単なんだけど、そこまで辿り付くのがかなり大回りしたみたい。・以前、自分のHPの文字サイズを画面サイズに合わせて自動的に変更したことあるが、デザイン変えるのも同じように出来るのかと思ったがMSサイトで調べたら、どうもBLOCKBLOGで使用しているような外部CSSファイル形式では、CSSファイル自体を置き換えるしかないようだ。書式が反映されない表示になってしまった。・いろいろ試してみたところ、JSファイルを持ちいると駄目みたい。確かにCSSファイルで置き換えができた。いうことは、JSファイルの中身を、SCRIPTタグも含めてすべてdocument.writeすると上手くいくかも。やってみたら、上手くいった。document.writeしなくてもOKだった。何が原因だったのか、もう後の祭りだ。^^)ということで、この章は削除ということで。・次にDOMではどうやって置き換えるのかなと思って、DOMの仕様を見てみたが良く分からん。「はぎさんのHPの外部CSSを切り替える」と「とほほのWWW入門の中のDOMの記述」を見ていて、どうもLINKタグのHREFを書き換えてやればOKみたい。BLOCKBLOGにはID属性はないので、LINKタグとREF属性で目的のCSSファイル指定のLINKタグを見つけ、そのHREFを目的のCSSファイルで置き換えればいいようだ。本来ならそれぞれ単独のブログで書く内容だけど、ひとつのブログにカテゴリ分けして書いている。カテゴリ毎にデザインを変えてみてはと思いつく、では、どうやって変えるのか?と考えたところ、BLOCKBLOGでは各表示されるページの先頭の記事にはSPANタグのClass属性でCategolyとあり、この中のAタグのURLでBLOCKBLOGのカテゴリ名があるので、これを判断材料に、デザインを変更すればよい。・まず、DOMの方は、「とほほのWWW入門のDOM」の記述を見てdocument.getElementsByTagName("SPAN")でSPANタグを見つけ、その中でClass属性の名称が"categoly"をattributes.getNamedItem("class").valueで一致するものを探し、その中の文字列をinnerHTMLで取得し、その中の自分で指定したカテゴリ名を探せばよい。・同じようにIEのDOM以前のものは、「とほほのWWW入門のエレメント」の記述を見てdocument.all.tags("SPAN")でSPANタグを見つけ、その中でClass属性の名称が"categoly"をclassNameで一致するものを探し、その中の文字列をinnerHTMLで取得し、その中の自分で指定したカテゴリ名を探せばよい。先頭の記事が出現する前にJSファイルが処理されてしまうため目的の先頭の記事が見えない。・そこで、onloadイベントハンドラを使い、onload時に上記CSS変更を行うようにonloadイベントハンドラに上記を関数化して登録すればよい。いうことで、デザイン変更が出来ました。問題は、ほかのデザインを作る方が大変なんだけど。新しく作るのは、「てんてん丸」と「カラオケ」の2つに絞った。現在のデザインの基本系は変えずに、背景画像を変えるだけにした。「てんてん丸」は、かわいい系ということで、ピンクをベースに。「カラオケ」は、青、ピンクと来たので、ちょっとシックに黒系で。なんとか出来はしたが。5/23:「MY日記」を茶系でしぶく作ることに。画像は使わずすべてCSSで作ってみた。いいものが出来たかな??【しかし、最大の問題が。】ところが、これを実施にUPしてみると、なんだか画面表示が遅い。いうか、おかしくなっているっぽい。再度ローカルで試してみたがOKなのよね。先頭の<!DOCTYPE指定を、ローカルでは、以前のスライダー表示の時に!マークを削除していたようで、それでこのタグが無効になっていて、うまくいっていた。スライダー表示と同じく、このタグがあるとおかしい。上記タグがあると、初めからページを読み込みはじめる。永久ループになってしまう。これもIEのバグっぽい?【仕方なく方針転換】で、onLoadでなく、BODY部にあればOKなんだよね。先頭の記事のカテゴリにデザインを合わせるのでなく、JSファイルが処理される前に判断できるとなると、BLOCKBLOGの仕様では、カテゴリを判断できる情報が何もないので。T);;仕方なく、読み込まれるURLで判断するしかない。大分、思惑と異なる仕様になっちゃいました。本文が下に逃げていってしまう。^^);;;仕方なく、カラオケのCSSファイルを、問題ないてんてん丸のCSSファイルと見比べ違っているところを、てんてん丸に合わせて行くことで、どこが問題のところかを調べた。したら、左側のBOX内のMENU領域の背景画像を指定するところのPADDING-LEFTを0から15に変更していた。これを0にしたらOKになった。仕方なく下側に配置転換しているようですね。CSSファイルだけみて調整してたら、はみ出すかどうかなんて分からない。いうことは、その辺を解決してくれるCSSエディタなんてものが多分あるんだろうな。この詳細は、ここを参照。スライダー表示とデザイン切替えを同じJSファイルに書いていた。同じところに書いておかないと辻褄が合わなくなるので。したら、スライダー表示する際にウィンドウをリサイズなどされたときに、あるブラウザだとスライダーの位置がずれてしまうので、これを解決するために、リサイズされたときに発生するonresizeイベントで、その位置を元に戻すために、手を抜いて再表示をしていた。onLoadイベント時に書式を変更すると、onresizeイベントが発生していた。このため再表示を繰り返したのが原因でした。LINKタグの書式と同じ書式に変更時は、なにも起こらないので、どうもLINKタグの書式と変更する書式で何らかのサイズが異なると、onresizeイベントを通知してくれるようです。MSのサイトで調べたら、ウィンドウのリサイズ以外にも、DIVやIMGやTABLE等のサイズが変更されても通知されるようですね。そのため、デバッグに使用していたカラオケのCSSファイルでは、ちょっとだけ上記タグのサイズを変更したりしていたので発生していたようです。手抜きを変更したら上手く行きました。【ところが、てんてん丸が。】ところが、てんてん丸の方は、上記のサイズは変えずに、文字の大きさなどを大き目に変えていたが、その結果、レイアウトは下側にずれるが、onresizeイベントが来ない。デザイン切替えの後でスライダー表示の位置ずれ補正を掛けてるが、このデザイン切替えは、並行して処理されてるようで、補正の後からデザインが変わるため補正は意味を持たず、結果スライダーの位置がずれてしまう。あああーーーーああ、駄目だ。右側にブロック配置し、それも大きなサイズの。したら一番下側に配置されるし、で、このブロックを書式で見えなくしといて、CSS切替スクリプト関数だけ呼べば、あまり変更せずに済むかなと。【あっ、footerがあった!!】で、BLOCKBLOGのブロック編集を見たら、なんだfooterがあるではないですか。これって一番下に配置されるんですよね。なあんだ、始めからこれを使っていれば、こんなに苦労せずに出来たのに。あああーーあ、はじめからこうして置けば良かった。T);;ということで、大変な思いして、なんとか出来たけど。仕様をちゃんと理解しないで作ってると、こういう目に合うんですね。いうことで、JSファイルいじるのしばらく休憩しとこ。【BLOCKBLOGで対応すれば簡単】まあ、JavaScriptでやってみたけど、これは上級者向きのことなので、BLOCKBLOGの本来の目的には大分反しているんだけどね。使われてくると、その内デザインを変えて見たいという声が増えてくるかもね。そのときは、BLOCKBLOGの目的通り初心者向きでないといけないので、きっと、BLOCKBLOGさんで、同じ機能を作ってくれることでしょう。・DOMは、ブラウザだと、IE5以上、Mozilla、NN6以上でできるようです。SP1、Mozilla1.6とOpera7.23しかないので、これで確認し、この環境のみのことで書いてある。それ以外のバージョンや、他のブラウザはもちろん無視(動くかどうか不明)。SP1しかないので、これ以外のOSは使ったことがないため無視。・マシンも、PCしか持ってないので、Macとかは、もちろん無視。・BLOCKBLOGの文書構造に合わせて作成してあるので、この文書構造以外は当然動かないです。1.2.2(v125.7)で動かしたら、動いた。【でも直ぐ使いたいという気さくな方】ここ見てね。内容理解できて、何が必要で、どうすればいいかを判断できる人ね。サポート、問合せはごめんね。HOME正確に記述しないとしっぺ返しを食らう。Mayumi][-]最新記事TIN無しでもアメリカで源泉徴収された税金を全額取り戻したい。(03/11)今日はバレンタインディーだが、バンカラに行ってきた。(02/15)いやーー素晴らしいカラオケ居酒屋だった。(06/30)みなさん腹式呼吸が大事と言うが。(06/25)カラオケ喫茶で、カラオケ大会に出ている方がいる。誕生(10/28)はじめたきっかけ(11/11)公開したけどアクセスは50件(12/13)JavaScriptとの出会い(01/10)HPの内容を変える画期的な出会い(01/10)アクセス。