2004年09月07日

●スタイルシート切り替え

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


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

Posted by yujiro at 2004年09月07日 00:02
トラックバックURL

このエントリーのトラックバックURL:
http://yujiro.dyndns.org/blog/koikikukan/mt-tb.cgi/235

トラックバック実行後、タイムアウトした旨のメッセージが表示されることがありますが、トラックバック先の処理は(これまでの経験上)正常に終了しています。正常に送信されたかどうかはトラックバック先の個別アーカイブページ等をご確認ください(タイムアウトについてはこちらの記事を参照ください)。
また同一のトラックバックが重複してしまった場合、こちらで気がついた時に適宜削除しておりますので削除のご連絡は不要です。ただし期間が空いている場合(数日とか)は気がつかない場合がありますのでご連絡ください。

トラックバック

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

トラックバック時刻: 2004年09月30日 10:38

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

トラックバック時刻: 2004年10月07日 04:46

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

トラックバック時刻: 2004年10月12日 02:03

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

トラックバック時刻: 2004年10月19日 00:35

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

トラックバック時刻: 2004年10月27日 18:04

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

トラックバック時刻: 2004年12月10日 20:17

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

トラックバック時刻: 2005年01月27日 03:38
コメント

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

投稿者 Copland : 2004年10月07日 04:43

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

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

投稿者 yujiro : 2004年10月07日 11:55

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

投稿者 さえら : 2004年12月03日 17:01

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

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

投稿者 yujiro : 2004年12月04日 01:45

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

投稿者 さえら : 2004年12月04日 08:02

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

投稿者 yujiro : 2004年12月05日 03:13

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

投稿者 さえら : 2004年12月06日 16:14

>さえらさん
思いきり期待されているような…(笑)

投稿者 yujiro : 2004年12月06日 23:55

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

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

投稿者 Guderian : 2004年12月10日 12:45

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

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

投稿者 yujiro : 2004年12月11日 00:57

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

投稿者 Border. [TypeKey Profile Page] : 2004年12月14日 17:20

>Border.さん
こんにちはー。
承りました(笑)。

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

投稿者 yujiro : 2004年12月14日 18:21

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

投稿者 GOMA : 2005年01月12日 15:38

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

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

投稿者 yujiro : 2005年01月12日 22:08
コメントする




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)

コメントありがとうございます。投稿が反映されるまでに時間がかかる場合がありますが「投稿」ボタンを続けてクリックされないようお願い致します。またコメント投稿処理が終了しない場合、トップページに反映されない場合がありますがコメントは正常に投稿されています(サーバ側の不具合のようです。こちらで操作してページに反映させています)。また1回のクリックでも重複してしまう場合がありますが適宜削除しておりますのでご連絡は不要です。