Category:Design, CSS

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


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

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


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>

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


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

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

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


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

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

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



トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-05-21 (月) 13:09:38
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.274 sec.

OSDN