CSS切替えマニュアル: Idimetaのマスター日記

2003.12.12

CSS切替えマニュアル

　下で参照したリンクを辿ったところに、[E`] M::T: StyleswitchingでCSS切り替えという記事があってわかりやすかったので、それを参考にしてココログ用に書き換えてみました。

１．A List Apartのstyleswitcher.jsをダウンロード。
※これはmozilla系では動かないので、idimetaが使用しているスクリプト推奨。talk to oneself 2: styleswitcher作者からTrackBack、おおたに氏の投稿を参考にしてます。
２．気に入ったスタイルシートを用意する（ココログ用のもので、３ペインか２ペインどちらかに統一した方が無難）
３．クリック用アイコンを用意する。
４．上記1,2,3を、都合のよい名前にしてアップロード。
　例：スタイルシート・・・style-2,3,4・・・.css、（styles.cssはデフォルト用)
　　　アイコン　　　・・・style-2,3,4・・・.jpg、（デフォルト用として、default.jpgも用意）
５．[サブタイトル]に下記の通り記述。
※"http://(blog).cocolog-nifty.com/(blog)/"は、各自のアカウントのurlに書き換えて下さい
</body><head><link rel="stylesheet" href="http://(blog).cocolog-nifty.com/(blog)/styles.css" type="text/css" title="Default" /><link rel="alternate stylesheet" href="http://(blog).cocolog-nifty.com/(blog)/style-2.css" type="text/css" title="Style-2" /><link rel="alternate stylesheet" href="http://(blog).cocolog-nifty.com/(blog)/style-3.css" type="text/css" title="Style-3" /><link rel="alternate stylesheet" href="http://(blog).cocolog-nifty.com/(blog)/style-4.css" type="text/css" title="Style-4" /><script type="text/javascript" src="http://(blog).cocolog-nifty.com/(blog)/styleswitcher.js"></script></head><body>

６．[マイリスト]のどれか（リンクタイプのメモ欄がいいようです）に下記の記述をする。
<a href="#" onclick="setActiveStyleSheet('Default'); return false;"><img src="http://(blog).cocolog-nifty.com/(blog)/default.jpg"></a><a href="#" onclick="setActiveStyleSheet('Style-2'); return false;"><img src="http://(blog).cocolog-nifty.com/(blog)/style-2.jpg"></a><a href="#" onclick="setActiveStyleSheet('Style-3'); return false;"><img src="http://(blog).cocolog-nifty.com/(blog)/style-3.jpg"></a><a href="#" onclick="setActiveStyleSheet('Style-4'); return false;"><img src="http://(blog).cocolog-nifty.com/(blog)/style-4.jpg"></a>

＊うまく動作しない場合は[サブタイトル]に記述した、title="Default" と[マイリスト]に記述したsetActiveStyleSheet('Default')の名前部分が同じになってるか確認。大文字小文字にも注意
＊＊無茶なやり方でございますとも。

01:07 PM in ウェブログ・ココログ関連 | Permalink