小粋空間: スタイルシート切り替え

Top ＞ CSS ＞スタイルシート切り替え

News

各種ブログテンプレート

2004年9月 7日

エントリー本文

スタイルシート切り替え

Posted at September 7,2004 12:02 AM
Category：[CSS]
Tag：[]

~~メイン~~各ページのスタイルシートを右上のリンクで切り替えられるようにしました。スタイルシートを切り替えるとページ全体のデザインをダイナミックに変更できます。ここでの目的はフォントサイズを変更できるようにするために用いています。とりあえず「Default」「Large」「Netscape」の3種類を用意しました。「Default」は現在のスタイル。「Large」は本文のフォントを大きくします。「Netscape」はNetscape利用者用にサイドバーのフォントを1px大きくしたものです。
注：現在は異なる設定にしています。

この機能はGoing My Wayさんのスタイルシート切り替えスクリプトを参考にカスタマイズしました（こちらのサイト右上のカラーボタンをクリックするとスタイルシートが切り替わります）。オリジナルはStyleswitching JavaScriptです。cookieを利用しているのでブラウザでcookieが利用できる設定になっていれば、最後に利用したスタイルシートが次回ブラウザ起動時に自動的に選択されるようになります。また各テンプレートに設定しておけば状態が引き継がれます。例えば個別アーカイブがマルチカラムでない場合は後述する手順の2・4だけを行えばうまく引き継ぐことができます。
以下、スタイルシート切り替えの手順です。

１．新しいスタイルシートの作成
元のスタイルシートをコピー等して新しいスタイルシートを作成します。ちなみに私の場合はMovable Typeの管理画面上で新しいスタイルシートを作るという作業はしていません。単なるコピーです。ここではStyles-site.cssをコピーしてLarge.cssと、Netscape.cssを作りました（名称は任意で結構です）。
作成したスタイルシートはStyles-site.cssと同じディレクトリに配置します。

まず Large.css 用のテンプレートを作ります。管理画面のテンプレートの「インデックステンプレート」右上にある「新しいテンプレートを作る」をクリックします。次のページで下記を設定します。

テンプレートの名前：スタイル（Large）

出力ファイル名：Large.css

このテンプレートにリンクするファイル：空白のまま

再構築オプション：チェックを外す

テンプレートの中身はスタイルシート（styles-site.css）の内容を丸ごとコピーします。
コピーしたスタイルシートの内容を修正します。Large.css はフォントを大きくするためのものなので、font-size と書かれた部分を大き目のフォントサイズ（赤字から青字）、

.blogbody {
    font-size: 12px;
    font-size: 14px;
}

に書き換えます。もちろんフォント以外のスタイルも自由に変更して構いません。
修正が終わったら、保存・再構築します。

Netscape.css についても「新しいテンプレートを作る」をクリックし、

テンプレートの名前：スタイル（Netscape）

出力ファイル名：Netscape.css

このテンプレートにリンクするファイル：空白のまま

再構築オプション：チェックを外す

という設定にして、後は Large.css と同じ作業を繰り返してください。

２．テンプレート修正
テンプレート上部にある既存のスタイルシートの設定を、赤色から青色に変更します。

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

一番上に書かれたスタイル

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

が起動時にデフォルトとして選択されるものです。その下に2つの新しいスタイルシート

<link rel="alternate stylesheet" href="<$MTBlogURL$>Large.css" type="text/css" title="Large" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>Netscape.css" type="text/css" title="Netscape" />

をそれぞれ追加しており、以降で説明する切り替え用リンクをクリックすることでこれらのスタイルが選択されます。設定したタグの href 属性に、作成したスタイルシートのファイル名、title 属性に任意の名称を設定します。これが次項のスクリプトで起動される際のキー情報となります。

３．styleswitcher.js のダウンロード・アップロード
下記の公式サイトに styleswitcher.js があります。

A List Apart：Alternative Style: Working With Alternate Style Sheets

記事の下の方に「download」または「Download styleswitcher.js」というリンクがありますので、クリックして styleswitcher.js をダウンロードしてください。そしてダウンロードした styleswitcher.js をそのままローカル・サイト・パス（index.html と同じディレクトリ）にアップロードします。

４．テンプレートに styleswitcher.js インクルードの設定
２項で修正した各テンプレートの <head>～</head> の間に下記を追加します。既にJavaScriptが存在すればそこに埋め込んでも構いません。この行だけ丸々独立させて埋め込んでも大丈夫です。

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

５．切り替えメニューの追加
各テンプレートのサイドバーに以下のタグを追加します。なおデザイン自体を変更するような使用方法であればタイトルバナー部分に切り替えメニューを設定しているサイトが多いようです。

<div class="sidetitle">
Stylesheet
</div>
 
<div class="side">
<a href="#" onclick="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Large'); return false;">Large</a><br />
<a href="#" onclick="setActiveStyleSheet('Netscape'); return false;">Netscape</a>
</div>

"setActiveStyleSheet" の後ろにあるパラメータは、先に指定した title 属性の名称（Large や Netscape等）と一致するように設定します。

以上です。

６．FAQ
Q：スタイルが反映されませんが？
A：古いデータがキャッシュに残って変更が反映されない場合があるようですのでIEであれば更新ボタンをクリックするか、一時ファイルを削除してください。

Q：表示が崩れました。
A：全てのテンプレートに同じ設定がされていないとページを移動した瞬間やスタイルを切り替えた瞬間に表示が崩れる可能性があります。もし表示が崩れてしまったら、元のスタイルのリンクをクリックするか、きちんと表示できていたページに戻って、スタイルを切り替えれば元に戻ります。

2005.08.12
スタイルシートの作成方法について修正しました(テンプレート)として保存する方法に変更）。また他の内容についても全面的に見直しました。

Posted by yujiro

« リンクのアンダーライン一部削除 | Main | 自宅サーバ再構築（その1） »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

トラックバック

≫ スタイルシート切り替えを実装 from Simple...
　今現在，MovableTypeのテンプレートを [続きを読む]

Tracked on September 30, 2004 10:38 AM

≫ 文字サイズの変更２ from On The Road
　TOPページ以外のページも文字サイズが変更できるようにしました。　TOPページはPHPでスタイルシートの切り替えをしているのですが、その他のページはPHPが... [続きを読む]

Tracked on October 7, 2004 4:46 AM

≫ スタイルシートの切替。 from 我楽
ここの中の人が最近、老眼が進行してきたようで、私のブログの文字サイズが小さくて読みにくいぞゴルァ(ﾟДﾟ#)と言われてしまったので、小粋空間... [続きを読む]

Tracked on October 12, 2004 2:03 AM

≫ CSS 切り替え機能つきました from りとろぐらくらく計画(仮)
ゴザ掲示板のほうで、つけたいけどうまくいかない、とか言った矢先になんですが、ついちゃいました。とりあえず2スタイル間の切り替えだけ。もっといいデザインがひらめい... [続きを読む]

Tracked on October 19, 2004 12:35 AM

≫ ここ数日でしたオイタ from Stupid excuse
ちょこちょこいじくっているんで、自分でもいつやったのかドコのサイトを参考にさせ... [続きを読む]

Tracked on October 27, 2004 6:04 PM

≫ Change site design from END SPEED
スタイルシートをJavascriptで変更できるようにてみた。左上にある■をクリックすると切り替わる... [続きを読む]

Tracked on December 10, 2004 8:17 PM

≫ HINAGATA iPad mini スタイルシートの切り替え from ネットで稼ぐブロッグ（＾-＾）_$10,000
「HINAGATA SKIN - Boxes hinaPad mini」の５... [続きを読む]

Tracked on January 27, 2005 3:38 AM

≫ 再々再々リニューアル from LEFTY HEARTS
またまたまたリニューアルしてしまいました・・・　今回はスタイル切り替え機能を... [続きを読む]

Tracked on February 20, 2005 11:39 PM

≫ デザイン変更 from grayish-life
Blogのデザインを閲覧者が選択できるようにしたいと思う。参考にさせていただいた... [続きを読む]

Tracked on March 15, 2005 1:30 PM

≫ CSS切り替えプロジェクト＠ラブログ風味 from Cafe+Luna**（なまえかんがえちゅう）
もうお気づきの方もいると思いますが、 LOVELOG+3columnsのコーナーを大幅に改造しました（・ω・）ポイントはワンクリックでCSSを入れ替え... [続きを読む]

Tracked on April 8, 2005 9:19 PM

≫ スタイルシート切り替えを実装 from Simple...
　今現在，MovableTypeのテンプレートを [続きを読む]

Tracked on May 25, 2005 9:38 AM

≫ スタイルシートを切り替えてみる from BEATITUDE
このテンプレートをデザイン、配布している「今日の覚書き」の”もそ”さんが新しい... [続きを読む]

Tracked on August 6, 2005 5:42 PM

≫ スタイルシートの切り替え実装 from SecoHanBlog
　少し前に、このブログの字が見えづらいというお話を聞いたので、フォントを大きくしていたのだが、私としては中くらいのフォントサイズのほうが見やすいと感じたので、こ... [続きを読む]

Tracked on August 7, 2005 2:33 PM

≫ ■スタイルシート切り替え。 from Liar's web
はたまた小粋空間さんのところとHINAGATAさんのスキンを使用してみた。まだす... [続きを読む]

Tracked on August 9, 2005 6:22 AM

≫ 更新 font-size変更アイコン設置 from [ VERSION510 ]
今更ですが、見送っていたフォントサイズ変更アイコンを設置しました。比較的文章が多いhome、about、events、boardに設置してあります。（他はレイア... [続きを読む]

Tracked on September 16, 2005 1:18 AM

≫ スタイルが切り替わる。 from どぐそ
TITLE: スタイルが切り替わる。 URL: http://www.dj-enzo.net/2007/05/post_15.html IP: 60.47.34.244 BLOG NAME: どぐそ DATE: 05/03/2007 03:20:42 AM [続きを読む]

Tracked on May 3, 2007 3:20 AM

≫ styleswitcher.jsを用いたスタイルシート切り替えにおけるfirefoxでの不具合（？）と対策 from 郷愁マキナ
当サイトでも利用しているstyleswitcher.jsを使ったスタイルシート切り替え機能が正常に動作しない現象を確認したのでここに記しておきます。sty... [続きを読む]

Tracked on February 16, 2008 7:21 PM

参考にさせて頂きました。
丁寧に書かれていて、非常に分かり易かったです。
ありがとうございます。

[1] Posted by Copland : October 7, 2004 4:43 AM

＞Coplandさん
はじめまして。
参照＆コメント、どうもありがとうございました。
最近カスタマイズ記事にtypoが散見されていたため、無事にできホッとしております。

MyBlogList登録させて頂きました。
今後ともよろしくお願い致します。

[2] Posted by yujiro : October 7, 2004 11:55 AM

こんにちは?。今度はこれを真似しちゃいました。ただ、臆病なので（ホントかょ）あんまりすんごいデザインの変化はやめて、フォントの色だけささやかに変わるようにしてみました。デフォルトが青っぽいので、ピンクっぽいのなどを。。。それで、またまた面倒な質問なのですが、月送りカレンダーをインラインフレームで覗かせてるんですけど、このカレンダーのスタイルシートを同時に切り替えるようにはできないでしょうか？本体とカレンダーを別々にならできそうな気がするんですけど、ピンクをクリックしたら、カレンダーもピンクのスタイルシートになるように・・・できたら素敵なんですけど、ちょっと自分で挑戦してみましたが、できなくてそのままになってます。

[3] Posted by さえら : December 3, 2004 5:01 PM

＞さえらさん
こんばんはー。
記事参照ありがとうございます。
スタイルシート切り替えはJavaScriptで動作していますので、メインページのリンクがクリックされてからstyleswitcher.jsでiframeオブジェクトの中身を操作できれば切り替えは可能かもしれません（推測ですが…）。
またはカレンダーをもうひとつ作って、フレーム自体を切り替えるという手もありそうです。

簡単で恐縮ですがご連絡まで。

[4] Posted by yujiro : December 4, 2004 1:45 AM

（￣?￣; ）ウーン・・・これは自分でやる自信がないですねぇ・・・
てことで、デフォルトでもピンクでも違和感のないグレイ系のカレンダーにしようかな。
つまり、カレンダーのところは、切り替わらなくてもいいように・・・（逃）

[5] Posted by さえら : December 4, 2004 8:02 AM

＞さえらさん
こんばんはー。
では時間をみて検討したいと思います。
期待しないでお待ちになってくださいませ。

[6] Posted by yujiro : December 5, 2004 3:13 AM

はい、期待しないでお待ちしておりまする。(个_个) ジト????ッ
なぁ???んて。一応、紫とグレーで　なにやら良い感じにはできました。

[7] Posted by さえら : December 6, 2004 4:14 PM

＞さえらさん
思いきり期待されているような…（笑）

[8] Posted by yujiro : December 6, 2004 11:55 PM

はじめまして。
こちらを参考にさせて頂き無事にスタイルシートの切り替えができるようになりました。

ありがとうございました。

[9] Posted by Guderian : December 10, 2004 12:45 PM

＞Guderianさん
はじめまして。
記事参照くださりありがとうございます。
お洒落なデザインのサイトですね！

それでは今後ともどうぞよろしくお願い致します。

[10] Posted by yujiro : December 11, 2004 12:57 AM

＞ yujiroさん
カテゴリ整理してたら無用なトラバを送ってしまいました。すみません。削除ってください。m(__)m

[11] Posted by Border. : December 14, 2004 5:20 PM

＞Border.さん
こんにちはー。
承りました（笑）。

新しいスタイルシートができたのか？と思って慌てて見に行きました（笑）。

[12] Posted by yujiro : December 14, 2004 6:21 PM

はじめまして。
css切り替え、真似させていただきました。とてもわかりやすくてよかったです。
ただうちのblog、htmlを弄れないので強引にやったせいか　IEではそこそこ動作するのですが、Firefoxでは切り替えても5?10秒ほどでデフォルトのcssに戻ってしまいます（笑）
html弄れないのは辛いです^^;

[13] Posted by GOMA : January 12, 2005 3:38 PM

＞GOMAさん
はじめまして。
記事参照ありがとうございます。

こちらのWindows2000+FireFoxでは元に戻らず正常に切り替えられてますよ。
html編集できないというのはかなり辛いですね。

[14] Posted by yujiro : January 12, 2005 10:08 PM

今日は。
先日はあちらでアドバイスありがとうございました。
自己紹介スレにも関わらず質問してしまい、すみませんでした。続きはこちらのほうがいいかと思いまして、こちらでさせて頂きます。
UTF-8にしてみたのですが、フォントサイズの切り替えは出来るのですが、サイトデザインがおかしなことになってしまいます。折りたたみ式にしたメニューバーのフォントまで大きくなるのと、エントリの背景が反転してしまいます。
これはどの辺りをいじれば直る見込みがありますでしょうか。
「切り替えメニューの設定」の部分の一部タグをインクルードしたのが悪かったのかと思い戻したりしたのですが、相変わらずです。
お忙しいとは思いますが、よろしくお願いします。

[15] Posted by カオル : August 12, 2005 4:57 PM

＞カオルさん
こんばんは。
説明不足ですいません。「UTF-8にする」というのはスタイルシートの1行目の

@charset "utf-8";

ではなく、ファイルを保存する時の文字コードを指しています。Windowsであればメモ帳を開いて「名前をつけて保存」で「文字コード」を「UTF-8」を選択して保存します。
スタイルシートの文字コードを確認するには、Firefox で styles-site.css までの URL、例えば

http://asimov.chu.jp/blog/Large.css

と指定してブラウザに表示させた後、ツールバーの「表示」→「文字エンコード」で該当の文字コードが確認できます。

また本文にテンプレートとしてスタイルシートの作り方法を加えました（この方法であれば文字コードは一意になります）ので、そちらでお試しいただいても結構です。

以上です。
それではどうぞよろしくお願い致します。

[16] Posted by yujiro : August 13, 2005 9:51 PM

今晩は。
おっしゃる通りにやってみましたら、出来ました！
なるほど、ファイルそのものにも文字コード指定があるんですね。
また一つ勉強になりました。

ブログを見に来てくれている盲の方は、片目が全くで、もう片方も視力が失せつつあるようです。なので32px~でないときついみたいです。世にあるブログはどれも文字が小さく、見えない見えないと言っていたので、せめて自分のブログくらいは32px表示も出来るようにしようと思いました。
本当に助かりました、ありがとうございます！

[17] Posted by カオル : August 13, 2005 11:49 PM

＞カオルさん
こんばんは。
うまくできたようで良かったです。

文字サイズの件、勉強になりました。
私も検討してみたいと思います。

[18] Posted by yujiro : August 14, 2005 12:40 AM

こんばんは。
この切り替えですが、プルダウンにはできないのでしょうか？
yujiroさん、以前やってた気がするのは
私の勘違いですかね？

[19] Posted by みさと : October 14, 2005 3:21 AM

＞みさとさん
こんばんは。
ご返事が事後になりましたがスタイルシート切り替え（プルダウンメニュー版）に記しました。

[20] Posted by yujiro : October 16, 2005 12:46 AM

こんにちは。
styleswitcher.jsを使わせてもらっているのですが、cookieを有効にしているにも関わらず【更新】したり、ページを切り替える度に２つ目のスタイルになってしまいます。。。
IE６を使ってるのですが、ブラウザの設定が悪いのでしょうか？

[21] Posted by hiro : May 24, 2006 3:54 PM

＞hiroさん
こんばんは。
こちら（Windows IE/Firefox/Opera）で確認したところ、正常に動作しているようです。
ブラウザのキャッシュや一時ファイル、および履歴を一度クリアしてみていただけますでしょうか。
それではよろしくお願い致します。

[22] Posted by yujiro : May 26, 2006 12:24 AM

一時ファイルなど一度削除してみたのですがダメでした。。。
でも、Firefoxで見たら問題なかったし、他のPCのIE6で確認したら正常に動作してたので『今使ってるPCのIEが変！』という事で。。。
確認していただきありがとうございましたm(__)m

[23] Posted by hiro : May 26, 2006 4:02 PM

＞hiroさん
ご連絡ありがとうございました。
もし何か分かりましたら改めてご連絡します。
お役にたてず申し訳ありません。
ではでは！

[24] Posted by yujiro : May 27, 2006 2:42 AM

いつもお世話になっております。このスタイルシート切替をエントリー内のTOP部分のみに紹介文、バナーなどを含めて設置したいと思っているのですが現在、各記事の上に同じように設置されてしまいます。どの部分をどのように修正すればいいのでしょうか？お手数ですがサポート宜しくお願いします。

[25] Posted by panser : July 5, 2006 9:34 PM

＞panserさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件は解消されたようですが、不具合が継続しているようでしたら再度ご連絡ください。
それではよろしくお願い致します。

[26] Posted by yujiro : July 9, 2006 12:24 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

小粋空間 - a cheap joke and a play on words site

スタイルシート切り替え