Movable Type 備忘録

テンプレートのスタイルを動的に切り替える

May042007
Author: bzbell
Categories: Customize
Tags: Customize, StyleSheet, styleswitcher.js

おはよです^^

昨日午前中のうちに「バベル」を観てきました。
どっと疲れたのかお昼寝してしまって、挙句の果てに寝れなくて夜更かししてるbzbellです (;￣∇￣A

今日も午前の部で「ハンニバル・ライジング」を観に行く予定なんだけど…大丈夫だろうか (。－ω－)

それはさておき、訪問者さんからのご質問がありましたので、この場をお借りしてお答えします。

わたしのサイトで配布しているテンプレートの一部には、ナビゲーションバーにて各色のテンプレートを切り替えられるようにしたものがあります。
テンプレート・フォー・ユー１、２、６
 テンプレート・フォー・ユー３、４、７

今回はスタイル切り替えの方法についてのご紹介です(￣∇￣)/

元々、わたしは1つのテンプレートでいろんなスタイルを楽しむ(切り替える)のを目的としています。
なので、XHTMLは変更せずにCSSが異なるテンプレートの配布が主です。

上記URLのテンプレートでは、JavaScriptを使って各色のCSS(イメージ含む)を切り替えています。

そのJavaScriptは、何年も前に小粋空間さんのところで紹介されてたもので、A List Apartさんで配布されているものを使わせてもらってますの。
Alternative Style: Working With Alternate Style Sheets

スタイルシート切り替えのための環境

以下に上記URLのテンプレートの環境について記します。

http://bzbell.com/annex/
  |
  +-- index.html
  |
  +-- mt-memo/
  |     +-- base-weblog.css
  |     |
  |     +-- black/                  <-- テンプレート・フォー・ユー１用
  |     |     +-- 1column-fixed.css
  |     |     +-- ajax-loader.gif
  |     |     |         ：
  |     |     |   (テンプレート・フォー・ユー１用イメージファイルたくさん)
  |     |     |         ：
  |     |     +-- stlipe.png
  |     |
  |     +-- brown/                  <-- テンプレート・フォー・ユー２用
  |     |     +-- 1column-fixed.css
  |     |     +-- ajax-loader.gif
  |     |     |         ：
  |     |     |   (テンプレート・フォー・ユー２用イメージファイルたくさん)
  |     |     |         ：
  |     |     +-- stlipe.png
  |     |
  |     +-- sakura/                  <-- テンプレート・フォー・ユー６用
  |     |     +-- 1column-fixed.css
  |     |     +-- ajax-loader.gif
  |     |     |         ：
  |     |     |   (テンプレート・フォー・ユー６用イメージファイルたくさん)
  |     |     |         ：
  |     |     +-- stlipe.png
  |     |

mt-memo/ディレクトリを基準に、各テンプレートで共通なスタイルシート(base-weblog.css)を直下に配置します。
そして、各テンプレート固有のスタイルシートおよび、イメージファイルは、各ディレクトリ(black/、brown/、sakura/)に格納します。

カスタマイズ

まずJavaScriptを入手します。
こちらのAlternative Style: Working With Alternate Style Sheetsからstyleswitcher.jsを入手してください。
入手したらstyleswitcher.jsをサーバにアップロードします。
アップロード先はどこでも構いませんので、各自の環境に合わせてアップロードします。
次にテンプレートを変更します。
通常だとスタイルシートの定義として、<head>～</head>の間に以下のように記述すると思います。
1. <link rel="stylesheet" href="http://●●●/styles-site.css" type="text/css" />
ここの部分で切り替えるスタイルシートすべてを定義します。
具体的には以下のようになります。
スタイルシート定義文
1. <link rel="stylesheet" href="http://bzbell.com/annex/mt-memo/sakura/1column-fixed.css" type="text/css" title="css-sakura" />
2. <link rel="alternate stylesheet" href="http://bzbell.com/annex/mt-memo/black/1column-fixed.css" type="text/css" title="css-black" />
3. <link rel="alternate stylesheet" href="http://bzbell.com/annex/mt-memo/brown/1column-fixed.css" type="text/css" title="css-brown" />
上記は実際にわたしのサイトで使っているものです。
優先度があって、1番上に定義した(1番上のように記述した)ものがデフォルトのスタイルシートとなります。
初めて表示した場合には、このスタイルシートが適用されます。

2番目以降で、スタイルシートの数だけ増やすことができます。
青い字の部分を各自の環境に合わせてURLを変更します。

重要なところは赤い字の部分と緑の字の部分になります。

1行目の赤い字の部分と2番目以降では異なりますのでご注意ください。

緑の字の部分で各スタイルシートの識別名称を指定します。
ココが重複してしまうと思った動作をしなくなりますのでご注意ください。
次にナビゲーションバーを変更します。
わたしのサイトで使っているナビゲーションバーを以下に抜粋します。
ナビゲーションバーの変更
1. <div id="navibar">
2. <ul>
3. <li><a href="javascript:void(0);" onclick="setActiveStyleSheet
4. ('css-black','http://bzbell.com/annex/mt-memo/black/1column-fixed.css'); return false;">Black</a></li>
5. <li><a href="javascript:void(0);" onclick="setActiveStyleSheet
6. ('css-brown','http://bzbell.com/annex/mt-memo/brown/1column-fixed.css'); return false;">Brown</a></li>
7. <li><a href="javascript:void(0);" onclick="setActiveStyleSheet
8. ('css-sakura','http://bzbell.com/annex/mt-memo/sakura/1column-fixed.css'); return false;">Sakura</a></li>
9. </ul>
10. </div>
青い字の部分は各スタイルシートのURLを記述します。
ココを間違えると思った動作しませんのでご注意ください。

赤い字の部分がブラウザから見たメニュー名称です。
そして、緑の字の部分が先ほど説明した、各スタイルシートの識別名称になります。
ココも間違えると思った動作しませんのでご注意ください。
最後に、styleswitcher.jsの記述を<head>～</head>の間に追加します。
JavaScriptの定義
1. <script type="text/javascript" src="http://●●●/js/styleswitcher.js"></script>
一通り変更したら、保存して再構築します。
そして、ナビゲーションバーで各スタイルの適用確認を行います。