そうしたら、「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>
---
は
<link rel="alternate stylesheet"
で良いのでしょうか
「ink」→「link」に修正しました。
＃間違った情報を流してはいけませんね。失礼しました。