pngを使う

ここでは、png(ピング)を使った表示方法を解説します。
JavaScriptを使ったCSSの切り替えのテクニックは結構有名ですので、おぼえておいても損はしないと思います。
ここでは「A List Apart」というサイト(英語)でフリーで配布されている「styleswitcher.js」というスクリプトを使用します。
一番下の近くに”Download styleswitcher.js”という項目があるので、それをクリックしてダウンロードしてください。

CSS切り替え作成の流れ

1.代替CSSを用意する
まずは、デフォルトで使用しているCSSに変更したいものを上書きする。デフォルトのCSSをコピーした場合には不必要なものは全て削除しておきましょう。

2.CSSとstyleswitcher.jsをリンクさせる
head要素内に代替CSSと「styleswitcher.js」の読み込みを行うlink要素を追加する。
今回はデフォルトCSSを「default.css」に、代替CSSを「style1.css」というファイル名にしてあります。

HTML


<head>
<link rel="alternate stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1" />
<script type="text/javascript" src="styleswitcher.js">
</head>

※代替用のスタイルシートは、linkタグのrel属性を、”stylesheet”ではなく”alternate stylesheet“としてください。
※title属性に注意してください。これが、JavaScriptの動作するポイントになるので、title属性に適当な値を入れておきましょう。

3.ファンクションを記述する
本文中の適切な箇所に下記のようにファンクションを記述する。

(X)HTML部分

<a href="#" onclick="setActiveStyleSheet(''); return false;">基本スタイル</a>
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">代替スタイルその1に変更</a>

クリックされると、linkタグのtitle属性の値が同じスタイルシートが適用されるようになります。

また、このスクリプトはクッキー機能がついていて、複数のページで同じスタイルシートを使っていると、読み込んだスタイルシートが反映されたままページ移動ができます。かなり便利なスクリプトだなぁと感動です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください