いぶろぐ part2

日々創作




TVの壁掛け工事

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

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



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

本日も仕事合間にテンプレートの質を上げるべくせっせと私事をしていたそんなとき!
IEでは綺麗に表示されるのだけれど、FireFoxでは全然CSSが適用されてない!という事態に。

背景画像が表示されなかったというのは今まで2回あって、前回のははっきりとした原因がわからなかったものの、今回のはばっちりわかった。
ということで備忘録として記しておく。

今回追記したのは次のコード

.LatestEntries h2,
.Categories h2,
.Archives h2,
.RecentComments h2,
.RecentTrackbacks h2,
.Links h2,{
display : block;
width : 220px;
height : 31px;
background-image : url(http://www.wednesdaylove.jp/2006/jugem/rooms/roomparts/TitleBar220x31.jpg);
background-position : 0px 0px;
background-repeat : no-repeat;
text-align : center;
margin-left : auto;
margin-right : auto;
padding-top : 2px;
}


これがmoziraには全く読み込まれなかった。
色々と格闘の末発見したのはカンマ

CSSの記述の際には、同時にいくつかのタグやクラスなどをまとめてスタイル定義する際に、カンマでくぎって記述していく。
僕は当初、今回のコードの適応先を次のように記述していた。
.LatestEntries h2 .BoxTitle,
.Categories h2 .BoxTitle,
.Archives h2 .BoxTitle,
.RecentComments h2 .BoxTitle,
.RecentTrackbacks h2 .BoxTitle,
.Links h2 .BoxTitle,{


めちゃ長い・・・。

もちろん面倒くさがりやの僕は、重複する部分はすべてコピペ。
そのときに最後のカンマまでコピペしてしまっていたみたい。
ようするに、スタイルを記述し始めるの手前にまでカンマをコピペしてしまっていた。
けれど、これは間違い。
IEでは認識してくれたものの、mozilaではこのスタイルを丸ごと認識してくれなかった。
mozila以外に適用させるハックとしても使えそうだけれど、古いブラウザやネスケでは確認してないので、今回のことは気をつけなければいけないケアレスミスとして備忘録に記しておく。



半透明背景サンプル
背景画像としてPNGを用いると、WinIEではうまく行かない。
filterを使えるのはWinIE。
これをうまく組み合わせられるかな??
そのテストのためのエントリー。
このBOXはIEの拡張命令で半透明化しているけれど、その場合中の文字も半透明化されてしまう。つまり文字の色自体も薄くなり可読性が落ちるので、アンダースコア(アンダーバー)ハックなどをする必要があるかも?
ちなみにこちらのBOXの背景画像はFireFoxで透過してない!ネスケでも同様に淡色塗りつぶしの背景。これはスタイルをタグの中に直接記入してしまっているから起こっている現象みたい。
こちらのBOXはアンダースコアハックにより、文字色を赤にしたサンプル。FireFoxでは背景が表示されない???これはタグに直接スタイルを書き込んでいるからかな???
ネスケでも同様に表示がおかしくなってしまった。




ということで、こちらのほうではスタイルの記述を外部にしてみたサンプル。その1「class=hantoumei1」
またなぜかFireFoxではしばらくウインドウを最小化した後に再表示すると、背景画像が薄黒くにごる現象があった。念のためFilterもアンダースコアハックしてみる。
結果としてはどうやらPNGの半透明背景画像の再描画部分でエラーがある模様。
「class=hantoumei2」
子BOXpadding:10px + color:#000こちらはBOX(div)を入れ子にしてみたサンプル。どうやらこれでもIEの文字色は薄くなってしまう模様。ちなみにこちらは親BOXでopacity:0.5を指定してみたところ、FireFoxもIE同様に子BOXの文字色まで薄くなった。また半透過PNGが更に薄くなった。ネスケ7.1では影響なし。


「class=hantoumei3」FireFoxではスタイルの記述をhtmlに直接書き込んだ際にアンダースコアを含めてしまうと、そのスタイルすべてが無効になってしまうみたい。とおもったら、BOXのwidth属性はちゃんと効いてるんだよねぇ・・・・。かといってブログの投稿欄では通常改行させると<br>が挿入されてしまうから困ったもの。
こちらは特に幅や高さを指定しないBOXでの表示例。
指定してない状態だと半透過にならない・・・・。

なんにしても、さて、どうしたものか。

「class=hantoumei4」ということで、幅だけを指定してみたら?

「class=hantoumei5」ということで、高さだけを指定してみたら?


まとめ

表示された画像を見て思ったのは、ネスケやFirefoxはPNGの半透過背景画像に対応している。しかし、Firefoxは一度画面から隠れた後に再表示させると、汚くなってしまう場合がある。(半透過せずに黒ずむ)
またIEの _filter:Alpha(opacity=50); はその中の文字や子要素に対しても影響を及ぼしてしまう。またアンダースコアハック自体推奨されていない。(※アンダースコアハックとは、スタイルの記述の前にアンダースコア・下線・を入れることによって、IE以外がその行を無視してしまう特性を使ったハック)
更には、IEの場合、widthかheightを指定しないと反映されない模様。
また色味で言うと、今回は透過率50%の赤っぽいPNG画像を使用したが、IEでのフィルター使用後の色と、Firefox、ネスケで標準的にサポートする透過PNGの色とでは濃さにかなりの差があった。近似色で言うと、IEで透過させた場合(50%)の色はFirefoxで言うと50%透過PNGを更に opacity:0.5; と指定して表示された色に近い表示となる。また、opacity:0.5;というスタイルはIE6もネスケ7.1もサポートされず、影響はない。ただ今後のことを考えると -moz- opacity:0.5; というように、Mozilla系限定で適用させてもいいかもしれない。すべてをそろえるなら、同様の-moz-ハックでFirefoxの、アンダースコアハックでIEの背景画像を(少しだけ濃くした色の透過PNGに)変えてしまってもいいかもしれない。
つまり
ネスケ→デフォルトで薄い透過PNG
IE→少しだけ濃い透過PNGをフィルターで薄くする。文字色も濃くする。(実質PNGである必要はないけれど、他のブラウザなどでどうなるかわからないので、一応使用する画像は透過PNGだけにしておきたい)
Firefox→少しだけ濃い透過PNGをopacityで薄くする。文字色も濃くする。頭に-moz-を使う。

あ!単純にIEの透過率を下げればいいのか!
どうやら頭が煮詰まってて灯台下が見えてないみたい・・・。
こんなところでどうだろう?

※テンプレートを変更した際に、今回実験的に作ったcssを破棄してしまって、表示がきちんとされていない可能性もあります。

参考までに今回追加したスタイルシートの内容↓

.hantoumei1{
background-image : url('http://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
width:200px;
height:200px;
float : left;
color : #0f0;
_color : #000;
_filter:Alpha(opacity=50);
}
.hantoumei2{
background-image : url('http://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
filter:Alpha(opacity=50);
width:200px;
height:200px;
float : left;
opacity:0.5;
_color : #000;
}
.hantoumei3{
background-image : url('http://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
color : #022;
_color : #200;
_filter:Alpha(opacity=50);
}
.hantoumei4{
background-image : url('http://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
width : 400px;
color : #022;
_color : #200;
_filter:Alpha(opacity=50);
}
.hantoumei5{
background-image : url('http://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
height : 25px;
_filter:Alpha(opacity=50);
}



今回はサイトのリニューアルに伴い、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の原則による)というわけ。

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




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

Popular Threads

Powered by Disqus
totaltodayyesterday

2018

1234567
891011121314
15161718192021
22232425262728
293031    
<< July 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へ▲