シングスブログ

中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

メニュー

スタイルシートを切り替えるJavaScript「CssSwitcher」

スタイルシートを切り替える JavaScript に「styleswitcher.js」があります。styleswitcher.js は、おもに文字の大きさを変えたりするのによく使われて便利。JavaScript で link 要素の代替スタイルシート (Alternate stylesheet) を切り替える形で実装している。

またスタイルシートは、フォントサイズ、レイアウト、カラーなど複数のスタイルシートを適用することを仕様で定めている。その場合は、link要素のグループ化 (Preferred style sheet) でできる仕様だが、ブラウザ毎に実装がまちまちのようだ (詳細)。ほか、フォントサイズ×レイアウト×カラーの組み合わせを実現したいが、グループ化では固定されてしまう。別々に設定できない。やろうとすると、それぞれの組み合わせの分だけのスタイルシートを用意するなど管理面でも面倒。

ということで、あらたな設計で「CssSwitcher」をつくってみた。

  • Persistent Style Sheet だけを使用
    • 必要な外部スタイルシートファイルだけその都度ダウンロード (Alternate stylesheetは 適用されなくても、すべてのファイルをダウンロードする)
  • データ構造にテキストベースのデータフォーマット JSON をベースに
    • 複数のスタイルシートを適用、いくつでも
    • スタイルシートの組み合わせを柔軟に
  • セッションにクッキー採用
    • それも一つだけ発行

以上を実装。

デモサンプル

いろいろテストしたものもあわせて

ウェブサイトのデザイン全体に適用のほか、一覧表示から画像表示に変更とコンテンツの一部に適用できたり、タグクラウド表記を変えたりと部分適用にも使える。

フォントサイズ

レイアウト

一覧表示から画像表示に

JavaScript 第5版
大型本「JavaScript 第5版
改訂第4版 JavaScript ポケットリファレンス
単行本(ソフトカバー)「改訂第4版 JavaScript ポケットリファレンス

リスト表示からタグクラウドに

つかいかた

1. スタイルシートの用意

デフォルトとなるスタイルシートファイルと切り替え用のスタイルシートを用意します。サーバにまとめてアップロード。

デフォルト layout.css、font.css、color.css、切り替え用として layout_fix.css、font_small.css、font_big.css、color_bule.css、color_red.css な感で。

2. スタイルシートファイルを header 要素に追加

追加の際、id属性を設定すること。id名は好みで。

<link rel="stylesheet" type="text/css" href="layout.css" id="layout" />
<link rel="stylesheet" type="text/css" href="font.css" id="font" />
<link rel="stylesheet" type="text/css" href="color.css" id="color" />

3. スクリプトのダウンロード、初期設定

cssswitcher.js をダウンロードして初期設定

// Settings
CssSwitcher.cssPath = "http://domain/path/to/css/";
CssSwitcher.idList = [ 'layout', 'font', 'color' ]; // List up id attribute
// Cookie Settings
CssSwitcher.domain = "";
CssSwitcher.path = "/";
CssSwitcher.expires = 7; // days or Wdy, DD-Mon-YYYY HH:MM:SS GMT (ex. Fri, 01-Dec-2010 20:40:03 GMT)
CssSwitcher.secure = 0; // 0 or 1

基本設定

  • 「CssSwitcher.cssPath」スタイルシートファイルのディレクトリパス
  • 「CssSwitcher.idList」スタイルシートのIDリスト、link要素に追加したid名

Cookieの設定を必要に応じて

  • 「CssSwitcher.domain」Webサーバー名
  • 「CssSwitcher.path」パス名
  • 「CssSwitcher.expires」有効期限 日数 または Wdy, DD-Mon-YYYY HH:MM:SS GMT形式
  • 「CssSwitcher.secure」セキュリティ

保存してサーバにスクリプトをアップロード

4. HTML の header 要素に JavaScript ファイルを追加

スタイルシートファイルより下部に追加

<script type="text/javascript" src="cssswitcher.js"></script>

5. HTML にリンク設置

リンクタグで CssSwitcher.change() に JSON 形式で変数設定

id : link要素に追加したID
theme : 拡張子.cssを除いたスタイルシート名

<a onclick="CssSwitcher.change([{'id':'font','theme':'font_small'}]);">小</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'default'}]);">標準</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_big'}]);">中</a>

複数のスタイルシートを設定する場合

<a onclick="CssSwitcher.change([{'id':'font','theme':'font_big'},{'id':'color','theme':'color_red'}]);">赤</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_small'},{'id':'color','theme':'color_blue'},{'id':'layout','theme':'layout_fix'}]);">固定レイアウト</a>

技術的な課題:

  • ブラウザのボタン操作でのページ遷移とブラウザキャッシュ
    ブラウザの戻るボタンでの前のページに戻る際に、先のページで変更したスタイルシートが反映されない場合がある。

Download:

cssswitcher.js

Changes:

Licenses:

Dual licensed under the MIT and GPL licenses.

jQuery Plugin「CssSwitcher」もどうぞ!!

関連サイト

シェア

スタイルシートを切り替えるJavaScript「CssSwitcher」への 2 件のコメント

  1. dk

    非常にいいですね。
    使いたいのですが、IE6で動かしたところエラーが出ました。
    82行目の最後のカンマ(,)が原因のようで、削除すると問題なく動作しました。
    修正版をアップしていただけると助かります。

  2. nlogn

    簡潔に書かれていてしかも高機能なスクリプトで助かります。役に立ちました。

コメントを残す

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

購読