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

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

代替スタイルシートの指定方法 -- 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 でスタイルシート動的切り替えの仕組みを組み込む方がいいかもしれません。-- とおりすがり?
• JavaScriptでの判定って一般的だけど、相手に頼ってるみたいであんまり好きじゃないんですよね。なんとなく。PHPでサーバーサイドでエージェント情報捕まえてってやるほうが、後々いろいろできるような...-- tomix

スタイルシートによってロゴを変える方法 -- 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;
}

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

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

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>

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

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

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

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

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

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

スタイルシート切り替えスクリプト -- ななみ †

いちゆうさんが公開されている、スタイルシート選択スクリプトが便利です。

実装方法は、暇になったら書きに来ます。

• JavaScript offやCookie offにしている場合に機能しないのでは？ IEユーザーにJavaScriptをonにさせるのはセキュリティの面でよくない -- 2004-05-15 (土) 12:52:27