Harukiya Archives

2005/12/11

category / javascript

あー、更新のしかたが思い出せない。（忘年会の威力）

スタイルチェンジ - それはCSSイジラー（誰。というか何語？）なら1度は考える。今やBlog界はCSSを変更するよりテンプレを変えるほうがお手軽だし、独自変数の追加による構造の変化などもありうるので、あまり実用的ではない。でも、2年越しの夢だからやってみたいとも思うフクザツな年頃なの。次にいつ時間が取れるか、また気力があるかわからないので、全体的に中途半端ですがスタイルシート切り替えスクリプトをアップします。ネーミングセンスゼロなので仮称。

β版です。人身御供になってやるという奇特な方向け（あるいは日曜日に休めたり、冬休みがあって「テンプレいじりまくるぜ」とか企んでる人向け。ついでに、これの改良・完成もおながいします）。いずれ内容・取り説ともちゃんとする（かも。このモンゴン、今年何回書いただろうか）。なんか久々に書くと文章がグチっぽくないか？（タイプもめさ遅くないか）。などとイブカリつつ記事は続くのであった。

テーマは、インターフェイス部を管理人が制御可能で、簡単な（かつ妥協できるラインな）記述でCSS切り替えを実装する。

> changes_ss.js （適当なCSSの例）

手順

1. 上記外部スクリプトを使用テンプレに組み込みます。<link>要素（群）よりも後に記述してください。
2. 切り替えるCSSを用意します（たぶんコレが一番のネック）。テンプレwreatheを使っていただいてる方は、うちにあるCSSにリンクするかDLして好みに編集ののち、自サバにアップするとちょっとだけ楽かも。
3. 使用テンプレのHTMLの任意の位置、または投稿記事内に
   1. <a href="CSSファイルのアドレス" class="js_cssfile">スタイル名（または適当なテキスト）</a>
   のように予約classNameを付け、リンクを張る。以上終了。

仕様

• リンクで参照されたCSSファイルを<link>要素に置き換えるスクリプトです。
• javascriptとcookieを有効にしているユーザ（観覧者）が、このリンクにアクセスするとCSSが切り替わります。両方またはどちらかが無効な環境ではCSSファイルそのものが表示されます。
• 複数のCSSファイルをlinkしている場合、最後の<link>要素を置き換えます。例えば、レイアウト用CSSファイル/カラー用CSSファイルがあり、この順で<link>要素が記述されていた場合、カラーだけを変更するという用途にも使用できます。
• 上記の条件でも、alternate stylesheet（代替スタイルシート）指定がされた<link>要素は除外します。

注意点

• リンク先がCSSファイルか否かのチェックは拡張子のみで行います。内容、そのHTML用のCSSであるか、などはチェックしません。
• CSS切り替えは本文読み込み前で処理しますが、<a>要素を調べるのは読み込みの後になり、タイムラグが発生します。すべての読み込み終了前に該当リンクにアクセスされた場合、切り替わらずにCSSファイルが表示されます。（対処法としては、本文の最後の方に記述しとく、速い回線を使ってもらう（殴。など）
• デフォルトのスタイルに戻す場合にも切り替えと同様のリンク記述・参照が必要です。デフォルトCSSは以下のFC2変数が使えます。
  1. <a href="<%css_link>" class="js_cssfile">default.css</a>
  （戻すための隠しコマンドもあるけど別の機会に）
• cookieの保存期限はブラウザを閉じるまでです。スクリプトを編集することで変更可能。
• 投稿記事内でCSSファイルをリンクして、その後テンプレを変更、でもスクリプトは使い続ける、という場合に整合性がとれなくなります。が、これはちょっとした工夫で回避できるので、その時はお問い合わせを。
• 難点は他にもあると思いますが、おいおい。 ヾ(￣-￣;) ｵｲｵｲ

writeback

1. CHOU-FLEUR ： また良質なスクリプトですね。
   人柱バージョンから正式版になった頃合いを見て、色々と使わせて欲しいと思います。期待アゲ。-11日23時
2. マス ： こんばんは。
   これは共有テンプレ向けのスクリプトじゃないですね。趣味のブログデザイン（怒られないだろうか）な方向で。-14日19時
3. お名前 ： 　パス ：
   ご意見・ネタ・苦情など

< コックピット | Easy Run > | 表紙へ戻る | 探す | 案内