■ css切りかえscript

posted at 2004-02-19 22:37
昨日からやってみているcss切りかえ。なんか中途半端だけどやり方はこんな感じ。

基本はIdimetaさんCSS切替えマニュアル@Idimetaのマスター日記を参考にしてます。


□必要なモノ
・いろいろなCSSファイル
・切りかえJavaScriptファイル
・以上のモノをおくホームページスペース


□方法
1.切りかえJavaScriptをIdimetaさんのblog中ほどからダウンロード
 5行目「…dimetaが使用しているスクリプト推奨」のあたり

2.各CSSファイルにわかりやすい名和えをつける
 例:styles2.css、styles2.css、styles3.css・・・

3.以上のファイルをサーバーにアップ

4.プロフィール欄に以下の文を記述[各cssファイルとjsファイルの読み出し]
</body><head>
<link rel="stylesheet" href="styles.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="http://xxxxx/styles2.css" type="text/css" title="Style2" />
<link rel="alternate stylesheet" href="http://xxxxx/styles3.css" type="text/css" title="Style3" />
<link rel="alternate stylesheet" href="http://xxxxx/styles4.css" type="text/css" title="Style4" />
<link rel="alternate stylesheet" href="http://xxxxx/styles5.css" type="text/css" title="Style5" />
<script type="text/javascript" src="http://xxxxx/styleswitcher.js"></script>
</head><body>

5.その下に切りかえボタンの設定文を明記
</div><br /><div class="colors">color changer<br />
<a href="#" onclick="setActiveStyleSheet('Default'); return false;"><font color="#ffd42b">■</font></a>
<a href="#" onclick="setActiveStyleSheet('Style2'); return false;"><font color="#ff2e1b">■</font></a>
<a href="#" onclick="setActiveStyleSheet('Style3'); return false;"><font color="#289c48">■</font></a>
<a href="#" onclick="setActiveStyleSheet('Style4'); return false;"><font color="#396ef7">■</font></a>
<a href="#" onclick="setActiveStyleSheet('Style5'); return false;"><font color="#8e8e8e">■</font></a>

僕は切りかえボタンを■にしてそれぞれ色を付けてます。

以上で再構築すればOK。
プロフィール欄は改行に勝手に<br />をつけちゃうので、実際に書くときは改行をなくしてください。


cookieを利用して最後に見たスタイルを最初に読み込むようになってます。何もないときはDefault(Seesaaで設定するcss)がよみこまれます。


□欠点
cssファイルをおくためのサーバーが必要
ココログはftp権限が与えられてるのかなぁ。ファイルがおけるのはうらやましい

一瞬Defaultのcssが見えてしまう
HTMLは上から読むので、下の方にあるプロフィール欄(js設定ファイル)を読む前にDefaultcssファイルを元に記事を表示してしまう。
jsファイルを少しでも上に置けば解決するかもしれないけどseesaaではそれができないので残念。

cssが増えて管理がめんどう
これは僕の問題ですね。突貫で作ったのでアラだらけ…


このままじゃなんなのでちょっとカスタマイズする予定。まだまだだぜぃ。


posted by hirotomo | ☀ | permalink | Comment(3) | TrackBack(3) | ブログモロモロ
comments
すばらしい。。。
Posted by F田 at 2004-02-20 00:46
すばらしい!の一言に尽きます(^o^)
色替えは思いつかなかった〜。というか
そういう技術がないんで(。。

でもボタン一つでCSSの切り替えができるって面白いですね?
色だけじゃなくてデザインの切り替えもできるのかな〜。
Posted by Candy at 2004-02-20 13:03
すごい。渡りに舟。わたしも「cssを着せ替えみたいにできないかな」と思っていた矢先だったもので。背景色を任意に変えるジャバスクは知っていたのですが、cssもできるとは。教えてくれてとありがとうございます。こちらでも使わせていただきます。
Posted by やすこ at 2004-02-20 21:56

post a comment
name: [必須入力]

e-mail:

URL:

保存しますか?

comment:

認証コード: [必須入力]


・画像の中の文字を半角で入力してください



・半角英数字のみのコメントは投稿できません

救いの手?!

excerpt: ありふれた生活さんとこにこんな記事が。 もしかしてこれを使ったら、↑文字だけになっちゃったウチの「メニュー」に色が戻せるかも…??? 「プロフィール欄」で&amp;lt;/body&amp;gt;..
weblog: cucumber papa
tracked: 2004-02-19 23:25

かえたいとこー!

excerpt: ありふれた生活さんで「css切りかえscript」を見つけました。以前からcssを切り替えたいなぁって思って考えていたのです。   java scriptで切り替えるのは知ってたのですが、cssファイ..
weblog: ブルグ
tracked: 2004-02-20 16:23

css切りかえscript 修正版

excerpt: 先週やってみたcss切りかえscript。やってみたはいいけど基本cssが一瞬見えてしまうのがどうもイマイチ。 一瞬見えてしまうのは、cssを呼び出すJavascriptがHTMLの下の方にあるわけ..
weblog: ありふれた生活
tracked: 2004-02-24 00:05



×

この広告は180日以上新しい記事の投稿がないブログに表示されております。