代替スタイルシートの指定方法のバックアップソース(No.3)

バックアップ一覧
差分を表示
現在との差分を表示
代替スタイルシートの指定方法へ行く。
- 1 (2004-08-18 (水) 16:37:49)
- 2 (2004-08-21 (土) 01:00:43)
- 3 (2005-03-09 (水) 17:20:17)
**代替スタイルシートの指定方法 [#c3261a5a]
#contents
***代替スタイルシートの指定方法 -- [[reimy]] [#u10f8832]
 <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]] [#n06aa7c8]
-Mozilla 1及びNetscape 6/7
~表示(V)→スタイルを使う→スタイルシートを選択
-Internet Explorer 5/6
~IEに組み込んだ[[ス切りボ:http://www.xinada.ne.jp/~handa/tech/CSS/SuKiBo/]]ツールバーのスタイルシートボタンの右側の▼をクリック→スタイルシートを選択

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

#comment
***スタイルシートによってロゴを変える方法 -- [[reimy]] [#n70eddab]
~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;
 }
というように指定すればスタイルシートでロゴを切り替えられる。

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

#comment
***background-imageで表示したロゴにアンカーリンクを張る方法 -- [[reimy]] [#z8dd351c]
~スキンの<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>
とすることでも対処可能ですが(笑い)、こういうのは恥ずかしいですよね。

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

#comment
***スタイルシート内でのURL指定時の注意 -- [[reimy]] [#wa9577b8]
~スタイルシート(cssファイル)内でbackground-imageなどで指定するURLは相対指定しないほうが無難です。
~本来はcssファイルを読み込むHTMLファイルの位置とは無関係に、cssファイルの位置からの相対指定となるのが正しいのですが、一部のブラウザはcssファイル内に記述された相対指定のURLをHTMLファイルのある位置からの相対指定と解釈してしまうものもあります。

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

#comment
代替スタイルシートの指定方法 のバックアップソース(No.3)

代替スタイルシートの指定方法のバックアップソース(No.3)
