about

ごはんにかけるふりかけを簡単に変えられるモノ。

※「…？」ってヒトはご参考に。面白いですヨー。→ 「ふりかけ味スタイルシート」 @ しるきぃうぇぶ © ありみかさとみ

history

更新履歴など。

2004.06.07
できました。いろいろ変わったんでご注意くだされ。
ファイルの名前も変わったので、それも重ねてご注意を。
ちなみにCCS はCSS-Change-Scriptの略です。 別にカードな魔法少女とは関係ないです。
以前のをお使いだった方は、「クッキーの名前」の設定を必ず変えてください。
2004.05.28
スクリプト見直すので、しばらくお待ち下さい。
2004.05.26
OperaでデフォルトのCSSと混ざることがある、 と報告を受けたので誤魔化してみる.
できなかったら131行目の行末 〜略〜,10); の値を多くしてみてください。1/1000秒単位.
あと、よく見てみたらIE以外では title 指定してなくても Off になりそうだったのでこっそり修正.
2004.05.19
ページ移動の際の挙動を修正したりなんだり.
タグの前後に挿入、の際の入れ方を変更.
2004.05.18
自動挿入される位置の修正.
2004.05.16
Operaにも対応. ソース追加.
2004.05.15
選択フォームを select と radio と選べるように.
2004.05.14
ひとまず完成.
2004.05.13
作り始め
download

お好きなのをどーぞ。

ccs.js
普通の。説明付き。15kb。
ccss.js
サイズ縮小版。説明、スペース等なし。機能は変わりません。11kb。
css.js
以前の。

対象をファイルに保存でひとつ。
スタイルシートのファイルはついてきません。

install

順番に。

  1. ccs.jsをダウンロードする。
  2. つけたいHTMLの中の<head>の中に次のように書く。
    → <script type="text/javascript" src="ccs.js"></script>
  3. ついでに、いま使ってるCSSのリンクには、title属性つける。
    → <link rel="stylesheet" type="text/css" href="default.css" title="default">
  4. ccs.jsをメモ帳で開く。
  5. 「スタイルシートの名前」 と 「スタイルシートのファイル名」 を設定する。
    └ 実際あるファイル名(URL)にすること。 ファイル名空白ならスタイル無しモード。
  6. アップロードする。
  7. HTMLページを見てみる。
  8. ページに、CSS選択フォームがでてることを確認する。
  9. 切り替えて遊んでみる。
  10. あとはccs.jsの設定を、好みに変えていく。

説明終わり。

motive

HTMLとCSS作ってると、いちいちCSS外して確認するのが、 そりゃもう面倒になってきたので。

で、あー、そういや「スタイル切り替え」ってやつがあったなー、と思い出し、
帝さんとかカヤさんとか使ってるいちゆうポータルさんからもらってきた、

･･･のはよかったんですが、

セレクトフォーム自動挿入はよいのですが、 一番初めにマッチしたタグに挿入することしかできなく＿|￣|○
<address>タグに入れよう思ったら、スキンダウンロードのとこに入ったりして。
あと結構、選択のタグも、勝手に入っちゃうので、なんかかんか。
つまり、もうひとこえほしかったわけで。
Operaじゃできないし。

んじゃ自分で作るか、と。(ぉ

そんな感じで、作ってみました(*´ー｀)-3
いちゆうさんのと、なんかぐぐってひっかかったkanさんのページを見ながら、あーでもこーでも。
JavaScriptの関数とかサッパリだったので、数時間費やしましたがどーにかこーにか。

で、とりあえずできたこと。

CSS選択フォームを自動で挿入する？
挿入しない.(手動)
最初にマッチしたキーワードの、前に挿入.
最初にマッチしたキーワードの、後に挿入.
最後にマッチしたキーワードの、前に挿入.
最後にマッチしたキーワードの、後に挿入.
CSS選択フォームを挿入するキーワード
フォームは↑で指定した位置に入ります.
キーワードに指定できるのは↓のもの
キーワードの種類と挿入位置は、
id属性 : その id 要素の中の一番前か後に挿入.
タグ要素 : そのタグの中の最初か最後に挿入.
テキスト文字列 : そのテキストの直前か直後
指定なし : ページ最上部か最下部.
CSS選択フォームの造り.
選択フォームの前後を挟むタグ
↑のタグのid属性.
↑のタグのクラス属性.
選択フォームは、select:セレクトBOX, radio:ラジオBOX
そのタグのクラスなど.
そのタグの直前に入れるテキスト.
そのタグの直後に入れるテキスト.

･･･が自分で変えられるようにヽ(´▽｀)ノ

つまり、最初だけでなく、最後の<address>タグに挿入できたり、
最後でも、<address>の前にいれるか、後ろにいれるか指定できたり、

ほかにも、例えばあれですよ、スキンみたく、HTMLに、
<!--CSS_SELECT-->
って書いて、その部分に挿入できたり、

よく使われそうな<div id="footer"> 〜 </div>の中の、 最前部か最後部に入れられたりとか、

面倒なときとかテストしてるときは、 ページ最上部にいれたり、最下部にいれてみたりとか、

･･･うん、つまりこれがしたかったんですよ、的な。

(´ー｀)ｙ−

そんな。

note

使用上・仕様上の注意、など。

Script内の仕様での注意、など。

thanks

参考にさせていただきました。
面白い発想と解説ありがとうございます。

links

他にもスタイルシート切り替えなスクリプトを作ったりしてらっしゃる方々へのリンク。
発見し次第追加御免。