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

代替スタイルシートの指定方法 -- 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="青" />

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

代替スタイルシートの使い方 -- 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: 2009-01-02 (金) 22:42:16
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.277 sec.

OSDN