代替スタイルシートの指定方法

代替スタイルシートの指定方法†

代替スタイルシートの指定方法

代替スタイルシートの指定方法 -- reimy †

<link rel="stylesheet" href="./skin/default.css" type="text/css" media="screen" charset="shift_jis" />
<link rel="stylesheet" href="./skin/red.css" type="text/css" media="screen" charset="shift_jis" title="標準(赤)" />
<link rel="alternate stylesheet" href="./skin/blue.css" type="text/css" media="screen" charset="shift_jis" title="青" />

上から、固定スタイルシート、標準スタイルシート、代替スタイルシートの指定方法です。

固定スタイルシート
標準スタイルシート、代替スタイルシートいずれを指定したときでも読み込まれるスタイルシート。主に共通するスタイル指定を記述します。rel属性はstylesheetで title属性はなし。
標準スタイルシート
デフォルトで選択されるスタイルシート。rel属性はstylesheetで、titleを指定する。
代替スタイルシート
ユーザーが選択することで使えるスタイルシート。rel属性はalternate stylesheetで、title属性を指定する。代替スタイルシートは複数用意することができる。

↑

代替スタイルシートの使い方 -- reimy †

Mozilla 1及びNetscape 6/7
表示(V)→スタイルを使う→スタイルシートを選択
Internet Explorer 5/6
IEに組み込んだス切りボツールバーのスタイルシートボタンの右側の▼をクリック→スタイルシートを選択

とおりすがり
ス切りボって、IEコンポーネント利用のブラウザからは使えないのが厳しいですよね。タブブラウザユーザは全滅してしまう。JavaScript でスタイルシート動的切り替えの仕組みを組み込む方がいいかもしれません。
tomix
JavaScriptでの判定って一般的だけど、相手に頼ってるみたいであんまり好きじゃないんですよね。なんとなく。PHPでサーバーサイドでエージェント情報捕まえてってやるほうが、後々いろいろできるような...

↑

スタイルシートによってロゴを変える方法 -- reimy †

pukiwiki.skin.ja.php の

<a href="http:// pukiwiki.org/"><img src="pukiwiki.png" width="80" height="80" border="0" alt="[PukiWiki]" /></a><br />

の部分を

<div class="logo" title="[PukiWiki]"></div>

に変更する。

固定スタイルシートに

.logo{
    width:80px;
    height:80px;
}

標準スタイルシートに

.logo{
     background-image:logo00.png;
}

代替スタイルシートに

.logo{
     background-image:logo03.png;
}

というように指定すればスタイルシートでロゴを切り替えられる。

kawara 2002-07-02 (TUE) 18:05:02
代替スタイルシートってリンクなどで遷移するとdefaultに戻ってしまうのかな…。
kawara 2002-07-02 (TUE) 18:35:22
あと、logoの切り替えは上手くいかないようです。
seagull 2002-07-02 (TUE) 20:01:09
div の高さ指定って、通らなかったような。。。透明イメージ張り付けて、その背景を指定するという手があったはずです。
kawara 2002-07-02 (TUE) 20:15:11
divの高さはIE6では通りましたけど、NN6はダメっぽい感じでした。でも、いづれにしても背景のイメージはうまく切り替わらなかったので…。
kawara 2002-07-02 (TUE) 20:22:54
すいません、ワタクシ嘘をついておりました。どうやらlogoの切り替えはreimyさん指定の方法で上手く切り替わるようです。divの高さ指定は通らないようなので、透明イメージ貼り付けで逃げようかと思います
kawara 2002-07-02 (TUE) 20:23:41
ということで、http://www.dml.co.jp/~kawara/works/pukiwiki/pukiwiki.php として設置しています。
reimy 2002-07-02 (TUE) 20:33:26
なかなかいい感じですね。
seagull 2002-07-02 (TUE) 20:34:54
私の環境では切り替わってますねぇ。イメージのサイズが違うせいか、切れちゃいますが。
seagull 2002-07-02 (TUE) 20:39:52
でも、イメージにアンカーを付ける時、背景色つけてると、Mozillaで情けない事に。。.。(サイズの変更もそうですが)
reimy 2002-07-02 (TUE) 20:53:59
Mozilla 1.0で正常に表示できてます。
seagull 2002-07-02 (TUE) 20:48:03
あぅ、ページ遷移でデフォルトに戻ってしまうのは何とかしたいですねぇ。
kawara 2002-07-02 (TUE) 21:12:36
NN6でなぜかロゴの画像が半分くらいしか表示されないんだよなぁ…、なんだろう。
seagull 2002-07-02 (TUE) 21:27:38
あぁ、そのくらいのバージョンのMozillaにはイメージがかけるバグがあります。たくさん。
seagull 2002-07-02 (TUE) 21:30:24
Mozilla BuildID 20020626 ではイメージが表示されなくなりました。
seagull 2002-07-02 (TUE) 21:35:18
1.0.0と同時に動かして確認できないのが何とも
reimy 2002-07-02 (TUE) 21:40:49
Netscape6/7やMozillaには長いテーブルの下のほうが表示されなくなるバグもあるしね。line-height:100%以外のときにテーブルや画像のバグが出やすい。
reimy 2002-07-02 (TUE) 21:42:56
Netscape6/7やMozillaではStyleで指定すると正常なのにCSSファイルに書くと反映されない場合があったりするし…(苦笑)

↑

background-imageで表示したロゴにアンカーリンクを張る方法 -- reimy †

スキンの<div class="logo" title="[PukiWiki]"></div>を

<a href="..." class="logo" title="[PukiWiki]"></a>

に変更し、固定スタイルシートも次のように変更します。

.logo{
 display:block;
 height:80px;
 width:80px;
 border:0px;

}

本来インライン要素である<a>をdisplay:blockでブロック要素化してまう裏技を使います。

W3CのDTDに則らない不正なタグのマークアップをすることが平気な人なら

<a href="..."><div class="logo"></div></a>

とすることでも対処可能ですが(笑い)、こういうのは恥ずかしいですよね。

とおりすがり 2002-07-03 (WED) 09:06:57
空の a 要素ってのもちょっと気持ち悪いですよね。visibility: hidden; をいれて適当なテキストいれておきましょう。

↑

スタイルシート内でのURL指定時の注意 -- reimy †

スタイルシート(cssファイル)内でbackground-imageなどで指定するURLは相対指定しないほうが無難です。

本来はcssファイルを読み込むHTMLファイルの位置とは無関係に、cssファイルの位置からの相対指定となるのが正しいのですが、一部のブラウザはcssファイル内に記述された相対指定のURLをHTMLファイルのある位置からの相対指定と解釈してしまうものもあります。

seagull 2002-07-03 (WED) 01:04:19
相対指定の時、どこを基準にするかを指定する方法があったような。。
reimy 2002-07-03 (WED) 05:30:26
それはHTMLの<base>のことでしょ。CSSファイル内のURLの相対指定には無関係です。

PukiWikiについて

Info in English

このサイトについて
- WebTrack
- Web委員日誌

お試し
- PukiWiki 1.5

↑

Developer

代替スタイルシートの指定方法