スタイルシートを切り替えるカスタマイズ｜Materializing [マテリアライジング]

ビジターを飽きさせない工夫と、サイト構築の際の動作確認という両立性を備えたカスタマイズです。文字サイズを固定させている際には、例として大・中・小も文字サイズを設定したスタイルシートを用意する事で、ユーザビリティの向上を目指す事が出来ます。

また、サイトの構成をスタイルシートで行っている際には、回り込みの設定等を用いて、構造そのものを切り替える事が可能です。

切り替えるためのスタイルシートを用意する

もとのスタイルシートをコピーして適度に改変したり、新しく作成したりして、サイトで使用しているデフォルトと異なるスタイルシートを用意します。

テンプレート→インデックスタブ
テンプレートを新規作成　(例です)

テンプレートの名前：スタイルシート02
出力ファイル名：styles-site02.css
このテンプレートにリンクするファイル：空白
再構築オプション：チェック外す

読み込ませているスタイルシートへのリンクを加筆修正

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>styles-site02.css" type="text/css" title="Style02" />

一番上のスタイルシートがデフォルトとして選択されるものになります。

styleswitcher.js のダウンロード

下記リンクより　styleswitcher.js　をDLします。

■A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

※ページ下部に「Download styleswitcher.js」のリンク

DLしたらブログのルートディレクトリと同じ階層にアップ(トップディレクトリ)

styleswitcher.jsを読み込ませる

下記を＜head＞～＜/head＞間に記述する

<script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>

切替メニューを追加

任意の箇所に以下を記述します。サイドメニューやヘッダー部など。

リンク表示の場合

<a href="#" onclick="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Style02'); return false;">Style02</a><br />

プルダウンメニュー　(状態保持なし)

<form>
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Style02">Style02</option>
</select> 
</form>

プルダウンメニュー　(状態保持あり)

<form id="stylesheet">
<select name="select" onchange="setActiveStyleSheet(this.form.select.value);">
<option value="Default">default</option>
<option value="Large">Large</option>
<option value="Netscape">Netscape</option>
</select> 
</form>

<script type="text/javascript">
<!--
var style = readCookie('style');
var nodes = document.getElementById('stylesheet').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
    if(nodes[i].value == style){
        nodes[i].selected = true;
    }
}
//-->
</script>

フォームidに属性が付き、状態保持のためのスクリプトが追加されてます。

以上。

参考記事：
■小粋空間: スタイルシート切り替え　[小粋空間]

■小粋空間: スタイルシート切り替え（プルダウンメニュー版）　[小粋空間]

2006/10/18 06:08:18：記事書き直し

スタイルシートを切り替えるカスタマイズ｜Materializing [マテリアライジング]