2004年09月07日
●スタイルシート切り替え
メイン各ページのスタイルシートを右上のリンクで切り替えられるようにしました。スタイルシートを切り替えるとページ全体のデザインをダイナミックに変更できます。ここでの目的はフォントサイズを変更できるようにするために用いています。とりあえず「Default」「Large」「Netscape」の3種類を用意しました。「Default」は現在のスタイル。「Large」は本文のフォントを大きくします。「Netscape」はNetscape利用者用にサイドバーのフォントを1px大きくしたものです。
この機能はGoing My Wayさんのスタイルシート切り替えスクリプトを参考にカスタマイズしました（こちらのサイト右上のカラーボタンをクリックするとスタイルシートが切り替わります）。オリジナルはStyleswitching JavaScriptです。cookieを利用しているのでブラウザでcookieが利用できる設定になっていれば、最後に利用したスタイルシートが次回ブラウザ起動時に自動的に選択されるようになります。また各テンプレートに設定しておけば状態が引き継がれます。例えば個別アーカイブがマルチカラムでない場合は後述する手順の2・4だけを行えばうまく引き継ぐことができます。
以下、スタイルシート切り替えの手順です。
このエントリーのトラックバックURL:
http://yujiro.dyndns.org/blog/koikikukan/mt-tb.cgi/235
トラックバック実行後、タイムアウトした旨のメッセージが表示されることがありますが、トラックバック先の処理は（これまでの経験上）正常に終了しています。正常に送信されたかどうかはトラックバック先の個別アーカイブページ等をご確認ください（タイムアウトについてはこちらの記事を参照ください）。
また同一のトラックバックが重複してしまった場合、こちらで気がついた時に適宜削除しておりますので削除のご連絡は不要です。ただし期間が空いている場合（数日とか）は気がつかない場合がありますのでご連絡ください。
≫ スタイルシート切り替えを実装 from Simple...
今現在，MovableTypeのテンプレートを [続きを読む]
≫ 文字サイズの変更２ from On The Road
TOPページ以外のページも文字サイズが変更できるようにしました。 TOPページはPHPでスタイルシートの切り替えをしているのですが、その他のページはPHPが... [続きを読む]
≫ スタイルシートの切替。 from 我楽
ここの中の人が最近、老眼が進行してきたようで、私のブログの文字サイズが小さくて読みにくいぞゴルァ(ﾟДﾟ#)と言われてしまったので、小粋空間... [続きを読む]
≫ CSS 切り替え機能つきました from りとろぐらくらく計画(仮)
ゴザ掲示板のほうで、つけたいけどうまくいかない、とか言った矢先になんですが、ついちゃいました。とりあえず2スタイル間の切り替えだけ。もっといいデザインがひらめい... [続きを読む]
≫ ここ数日でしたオイタ from Stupid excuse
ちょこちょこいじくっているんで、自分でもいつやったのか
ドコのサイトを参考にさせ... [続きを読む]
≫ Change site design from END SPEED
スタイルシートをJavascriptで変更できるようにてみた。左上にある■をクリックすると切り替わる... [続きを読む]
≫ HINAGATA iPad mini スタイルシートの切り替え from ネットで稼ぐブロッグ （ ＾-＾）_$10,000
「HINAGATA SKIN - Boxes hinaPad mini」 の５... [続きを読む]
参考にさせて頂きました。
丁寧に書かれていて、非常に分かり易かったです。
ありがとうございます。
＞Coplandさん
はじめまして。
参照＆コメント、どうもありがとうございました。
最近カスタマイズ記事にtypoが散見されていたため、無事にできホッとしております。
MyBlogList登録させて頂きました。
今後ともよろしくお願い致します。
こんにちは～。今度はこれを真似しちゃいました。ただ、臆病なので（ホントかょ）あんまりすんごいデザインの変化はやめて、フォントの色だけささやかに変わるようにしてみました。デフォルトが青っぽいので、ピンクっぽいのなどを。。。それで、またまた面倒な質問なのですが、月送りカレンダーをインラインフレームで覗かせてるんですけど、このカレンダーのスタイルシートを 同時に切り替えるようにはできないでしょうか？本体とカレンダーを別々にならできそうな気がするんですけど、ピンクをクリックしたら、カレンダーもピンクのスタイルシートになるように・・・できたら素敵なんですけど、ちょっと自分で挑戦してみましたが、できなくてそのままになってます。
＞さえらさん
こんばんはー。
記事参照ありがとうございます。
スタイルシート切り替えはJavaScriptで動作していますので、メインページのリンクがクリックされてからstyleswitcher.jsでiframeオブジェクトの中身を操作できれば切り替えは可能かもしれません（推測ですが…）。
またはカレンダーをもうひとつ作って、フレーム自体を切り替えるという手もありそうです。
簡単で恐縮ですがご連絡まで。
（￣～￣; ）ウーン・・・これは自分でやる自信がないですねぇ・・・
てことで、デフォルトでもピンクでも違和感のないグレイ系のカレンダーにしようかな。
つまり、カレンダーのところは、切り替わらなくてもいいように・・・（逃）
＞さえらさん
こんばんはー。
では時間をみて検討したいと思います。
期待しないでお待ちになってくださいませ。
はい、期待しないでお待ちしておりまする。(个_个) ジト～～～～ッ
なぁ～～～んて。一応、紫とグレーで なにやら良い感じにはできました。
＞さえらさん
思いきり期待されているような…（笑）
＞Guderianさん
はじめまして。
記事参照くださりありがとうございます。
お洒落なデザインのサイトですね！
それでは今後ともどうぞよろしくお願い致します。
＞ yujiroさん
カテゴリ整理してたら無用なトラバを送ってしまいました。すみません。削除ってください。m(__)m
![[TypeKey Profile Page]](http://yujiro.dyndns.org/blog/koikikukan/nav-commenters.gif)
: 2004年12月14日 17:20はじめまして。
css切り替え、真似させていただきました。とてもわかりやすくてよかったです。
ただうちのblog、htmlを弄れないので強引にやったせいか IEではそこそこ動作するのですが、Firefoxでは切り替えても5～10秒ほどでデフォルトのcssに戻ってしまいます（笑）
html弄れないのは辛いです^^;
＞GOMAさん
はじめまして。
記事参照ありがとうございます。
こちらのWindows2000+FireFoxでは元に戻らず正常に切り替えられてますよ。
html編集できないというのはかなり辛いですね。
