忍者ブログ
[333] [725] [335] [336] [337] [724] [339] [340] [341] [342] [343]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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

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

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

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

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

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

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

拍手[0回]



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

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

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

・MSサイトにあったように別のCSSファイルをサーバ(まずは自分のPC内)に置いて、
 これで置き換えるようにJSファイルに書いて試してみたが、
 書式が反映されない表示になってしまった。

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

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

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

【DOMでの変更のやり方】

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

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

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

【デザインを作る】

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

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

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

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

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


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

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

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

よくよく調べたら、
先頭の<!DOCTYPE指定を、
ローカルでは、以前のスライダー表示の時に!マークを削除していたようで、

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

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

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

これもIEのバグっぽい?

【仕方なく方針転換】

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

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

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

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

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

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

そしたら、左側のBOX内のMENU領域の背景画像を指定するところの
PADDING-LEFTを0から15に変更していた。
これを0にしたらOKになった。

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

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

【いや、ちょっと待て】

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

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

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

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

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

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

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

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

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

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

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

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

【あっ、footerがあった!!】

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

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


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

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

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

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

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

【注意点のまとめ】

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

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

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

 ここ見てね。

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

PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


トラックバック
この記事にトラックバックする:
忍者ブログ [PR]
カレンダー
07 2017/08 09
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析