最近、仕事関係で、「jQuery」がどうのこうのという話が出てきたこともあり、「jQuery」について少々調べてみました。
そうしたら、「jQuery」でcssの切り替えができるとのことでしたので、以下のページなどを参考に、導入を試みてみました。

CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie

なんとか「jQuery」の実装は完了したのですが、デフォルトのcssがcookieで指定されているcssに置き換わるまでにタイムラグがあるからなのか、一瞬デフォルトのcssで表示された後に、cssが置き換わります。この動作がどうにも気持ち悪く、なんとか調整できないものかと。。

以下のページで、「jQuery」のプラグインとして「jqswitch.js」を配布してましたので、こちらを入れてみることにしました。

jQueryを使ってCSS切替機能を実装

多少、cssが置き換わるまでの時間が短縮された気もしますが、やっぱりデフォルトのcssが一瞬表示されるのは改善されませんでした。

ここは仕方ないと「jQuery」を捨て、以下のページを参考に「styleswitcher.js」を導入。

styleswitcher.js-スタイルシート切り替えjavascript

これで、ちゃんとcookieで指定されたcssが表示されるようになりました。（サイト右上のサルアイコンで変更できます。）

"だから何？"的な機能ではありますが、今回の試行錯誤がいつか仕事に活かされる日が来るのではないかとｗ

＃以下、Seesaaブログでの導入手順を簡単にメモ。
【1】デフォルトのcssをコピーして、適当な名前で保存。変更したい箇所を修正。場合によって画像なども作る。
【2】上記ページから、「styleswitcher.js」をダウンロード。
【3】変更したcss、作った画像、ダウンロードしたstyleswitcher.jsを、もろもろ管理画面の「ファイルマネージャ」でアップロード。
【4】管理画面の「デザイン」→「HTML」にて、head部に以下を追加。
---
<link rel="stylesheet" type="text/css" href="デフォルトのcssへのパス" title="任意の文字1" />
<link rel="alternate stylesheet" type="text/css" href="【3】でアップしたcssへのパス" title="任意の文字2" />
<script type="text/javascript" src="【3】でアップしたstyleswitcher.jsへのパス"></script>
---
【5】管理画面の「デザイン」→「コンテンツ」にて切り替えスイッチを設置したい場所に、以下のリンクを追加。
---
<a href="#" onclick="setActiveStyleSheet('任意の文字1'); return false;">デフォルトcss</a>
<a href="#" onclick="setActiveStyleSheet('任意の文字2'); return false;">【3】でアップしたcss</a>
---

Comments

<ink rel="alternate stylesheet"
は
<link rel="alternate stylesheet"
で良いのでしょうか

Posted by kobapan at 2009年01月09日 12:23

ご指摘ありがとうございました。
「ink」→「link」に修正しました。

＃間違った情報を流してはいけませんね。失礼しました。

Posted by ysk at 2009年01月09日 15:28

gucci 新作 リング

Posted by くりすちゃん at 2013年07月21日 03:52