代替スタイルシートに萌え〜
■ このスレッドは過去ログ倉庫に格納されています
モヂラでしか見られないスタイルシート。
スクリプトでIE対応させてるサイトが密かに急増中。
先ずはここから
http://www.cc-net.or.jp/~piro/ >>424
あ、そっか。それでいいわけですね。重ね重ね有り難う。
>>425
一応、これまでの修正を反映させて使用中のスクリプトありますが、
どこか場所をくれればそこにアップロードします。 いまウェブに件のスクリプトをアップロードして試したら、
ローカルでは起きなかった問題が――。
A:固定シートと優先シートとがあり、代替シートの無いページ
B:優先シート無し、固定シートと代替シートがあるページ
このA-B間を行き来すると、選択もしてないのにNo-Styleになってしまった。
B-B間(Bを表示させたあと、再度Bを開く)でもやはり勝手にスタイルが解除される。
A-A間では大丈夫みたいだ。
よくわからないけど、Cookieの所為かしらん。 function fReadSS(){
/* 現在適用されているスタイルシートを読み込む */
NowSheet="Default";
for(i=0; i<sS.length; i++) {
if ((sS[i].disabled)&&(!sS[i].title)) { NowSheet='No-Style'; break; }
else if ((!sS[i].disabled)&&(sS[i].title)) { NowSheet=sS[i].title; break; }
}
}
...かな。ちゃんと検証してないけど。
それはそうとGeckoでCookieが存在する場合に、
不具合回避しつつレンダリング前に有効なスタイルを指定するためにこういうことをしていて
> document.write('<META http-equiv="Default-Style" content="'+ sheet +'" />');
要は優先スタイル指定をCookieから読み出した名前で上書きしていて
このために>>410の方法で意図される優先スタイル名を取得できなくなっている
(>>410は単にロード時にタイトル付きスタイルの有効/無効を見ているだけだから)。
気になるなら別な対策が必要になる予感。 >>429
Mozillaは自前でスタイルシート選択ができるから、いいのでは。
何とかしたいのはIEとOpera。 Safariってどうなってるのかな。スクリプトは有効かな。
誰かMacの人〜? >>429で、動作確認しました。OKです。今度こそ全て解決、かな。
function main(){/* メイン関数 */
sfTitles="";
sheet = fGetCookie('sheet');
fGetStyleTitles();
if(sfTitles.indexOf(sheet)==-1) sheet = sS.preferredTitle || 'Default';
fChangeSS(sheet);
window.onload=fInit;
window.onunload=fEnd;
}
function fGetStyleTitles(){/* スタイルシートの一覽を取得 */
sS=document.styleSheets;
for(i=0; i<sS.length; i++){
if (sS[i].title){
if (sfTitles.indexOf(sS[i].title)==-1) {
sfTitles+=sS[i].title;
sfTitles+=",";
}
var relS = sS[i].disabled ? 'alternateTitle' : 'preferredTitle';
if ( !sS[relS] ) sS[relS]= sS[i].title;
}
}
if (!sS.preferredTitle) sfTitles="Default,"+sfTitles; // 追加
sfTitles+="スタイル解除";
sfTitle=sfTitles.split(",");
} function fGetCookie(cName){/* クッキーを取得 */
var c=document.cookie, a, b;
if(c.indexOf(cName + '=')!=-1){
a=c.indexOf(cName + '=');
b=c.indexOf(';',a+cName.length+1);
if(b==-1) b=c.length;
return unescape(c.substring(a+cName.length+1,b));
}
return 'noCookie';
}
function fSetCookie(cName,cTitle){/* クッキーを設定 */
var eTitle=escape(cTitle), c;
var cexpires=new Date();
if (cTitle!='')
cexpires.setTime(cexpires.getTime() + 1000*60*60*24*cdays);
else
cexpires.setTime(cexpires.getTime() - 1000*60*60*24);
c = cName + '=' + eTitle + '; domain=' + cdomain + '; path=' + cpath
+ ((cdays!=0)?('; expires=' + cexpires.toGMTString()):';') ;
document.cookie=c;
}
function fChangeSS(ssTitle){/* スタイルシートの動的切替 */
if(!document.styleSheets) return;
sS=document.styleSheets;
for(i=0; i<sS.length; i++)
sS[i].disabled =
ssTitle=='スタイル解除' ? true :
ssTitle=='Default' ? (sS[i].title!=sS.preferredTitle && sS[i].title) : //追加
(sS[i].title!=ssTitle && sS[i].title); fSetCookie('sheet',ssTitle);
}
function fSelectSS(obj){/* 選択されたスタイルシートに切替 */
sheet=obj.value;
fChangeSS(sheet);
window.focus();
}
function fInit(){/* ページが読み込まれたときの処理 */
if (document.stylesheet) insertForm();
}
function insertForm(){/* 選択フォームを追加する */
fMakeHTML();
if(document.all) {
document.writeln('<form action="" class="selectsheet" style="direction:ltr;margin:0;background:#dfdfdf;" id="StyleChangeForm">\n'+nHTML+'</form>');
}
}
function fMakeHTML(){/* 選択フォームのHTMLを作成する */
nHTML='<ul>\n';
for(i=0; i<sfTitle.length; i++){
nHTML+='<li><input type="radio" id="id'+sfTitle[i]+'" name="Style" onclick="fSelectSS(this);" value="'+sfTitle[i];
nHTML+=(sfTitle[i]==sheet) ? '" CHECKED>' : '">';
nHTML+='<label for="id'+sfTitle[i]+'">'+sfTitle[i]+'</label></li>\n';
}
nHTML+='</ul>';
} function fEnd(){/* 終了処理 */
fReadSS();
if (NowSheet!=sheet) fSetCookie('sheet',NowSheet);
}
function fReadSS(){/* 現在適用されてゐるスタイルシートを読み込む */
// NowSheet="スタイル解除";
NowSheet="Default";
for(i=0; i<sS.length; i++) {
// if ((!sS[i].disabled)&&(sS[i].title)) NowSheet=sS[i].title;
if ((sS[i].disabled)&&(!sS[i].title)) { NowSheet='スタイル解除'; break; }
else if ((!sS[i].disabled)&&(sS[i].title)) { NowSheet=sS[i].title; break; }
}
}
あと、.jsファイルの先頭に、これね↓。 以上WinIE用でした。
/* スタイルシート切替スクリプト */
/* http://critical.s6.xrea.com/web/cssselect.html */
/* http://minatsu.pos.to/mod_changess_v02.js */
/* http://pc2.2ch.net/test/read.cgi/hp/991400015/398-410 */
/* http://pc2.2ch.net/test/read.cgi/hp/991400015/419-429 */
if ( document.styleSheets
&& !(navigator.userAgent.indexOf("Mac_PowerPC") != -1 && navigator.userAgent.indexOf("MSIE 4") != -1)) {
/* Scriptでスタイルシートを扱えるブラウザのみ実行 */
/* 以下設定 */
cdomain=".pc2.2ch.net"; // サイトのドメイン名
cpath="/hp/"; // サイトのパス
cdays=10; // クッキーの有效日数 0=ブラウザ終了まで
/* 以上設定 */
main();
} で、HTMLのhead内に
<!-- スタイル選択メニュー(IE5.5以降のみ) -->
<!--[if gte IE 5.5000 ]>
<script TYPE="text/javascript" charset="Shift_JIS" src="../changess.js"></script>
<![endif]-->
としておいてから、
HTMLソースでスタイル選択フォームを挿入したい箇所に、これを。
<!--[if gte IE 5.5000 ]>
<script type="text/javascript">insertForm();</script>
<![endif]--> >>433-439
もう少し整理して書くべきだったな。
"No-Style"は"スタイル解除"にしたのね。
relSって、何の略だ。 代替スタイルシート内の指定をprintメディアに反映しない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b108.html
でも、このページで「(スタイルシートオフ)」を選択すると
これは印刷プレビューにも反映するね。 >>432
document.styleSheets[n].titleが常にnull値を返す(S1.0)
http://cssbug.at.infoseek.co.jp/detail/safari/b005.html
>このため、スタイルシート切り替えスクリプトを使用することができない。
Safari1.2でも修正されずとか。 ランダムでスタイルシートを選ぶとかできる?
それができれば(・∀・)カコイイ!!
XSLTでもできればいいなぁ。 宇宙開発事業団ページのスタイルシート
http://www.nasda.go.jp//shared/css/forprint.css
/* ==== Netscape7 で背景画像が可愛くなる現象への対処 ==== */
他人が改造して自分のサイトで使ってるjs落として勝手に使ってもいいのかな?
マナー違反? >>447
禿しくスレ違い。
トラブルに対して一切の責任を負えるなら勝手にしろ。
そうでないなら必要な手続き踏め。それができないならやめとけ。 >>448
そうか・・・。
代替でかなりおもしろい改造スクリプト見つけたんで、
自分のところで使いたかったもんで。
やっぱり改造者に仁義切るべきかな。 >>449
仁義というか、普通に「面白いですね。うちでつかいたいんですがいいですか?」って言うだけジャン。
それを言う根性もないの?ドヘタレ? http://critical.s6.xrea.com/web/cssselect.shtml
のスタイルシート選択「なし」を表示させたくないのですが、
どこのスクリプトを変更すればよいのか分かりません。
分かる人いたら教えてください。 勉強しなさい。
せめてスレ違いだってことくらい気付けるようになりなさい。 JavaScriptの問題だが、「スレ違い」ってこともないな。
sfTitles+="なし";
を削ってみれば? >454
JavaScript の「教えてください」なスレは他にある。 >>455 しかし特にスタイル切換スクリプトに関してはこのスレッドで幾度か質問や回答がされてきたわけだが。 >456
有用な質問やら回答やらなら構わんと思うが、
「やり方がわかりません、教えてください」だけってのはどうよ。
もっと基礎的なところに立ち返ってやっていって欲しいんだが。 でもまあ許容範囲でしょ。
あんまり縦割りなのもちょっとね。 1 :笑門来福 :04/02/11 17:52 ID:???
例
Leinwand http://www.leinwand.jp/
amemix http://amemix.gogo.tc/
GIRLHOOD http://www.moon.sannet.ne.jp/rakugaki/
津波荘 http://www.ktsonline.jp/~minatsu/
2ndNewHouse http://www.ichigo.sakura.ne.jp/~2nd/
straywretchscrap http://sws.lib.net/
Y.Tsutanoontheweb http://www.tsutano.com/yutaka/
59 :Name_Not_Found :04/02/19 16:25 ID:???
>>1
・問題なし
・404
・問題なし
・問題なし
・JS切るとcss表示されない、alternate stylesheet設定無し
・切り替えられるの?
・JS切るとcss表示されない、alternate stylesheet設定無し >>459
どこの自演か一目でわかるラインナップですね。 教えて下さい
スタイルシートの切り替えはJavaScriptでないとできませんか。
HTMLだけでは無理でしょうか。
お願いします
link要素書いてれば
対応ブラウザなら一応できなくもないけど…>切り替え
あれだけだとちょっと辛い どちらにしろ閲覧する側に依存する。JavaScriptでもlink要素でも。 PHPやCGIもあるけどね、あれも内部的にはjs使ってたりして? CGI 使ってるとこもあるけど Cookie 食わせたりしてるみたいだしなぁ。
どのみちHTML *だけ* では無理。 >>470
だからMozillaやOperaなら対応してるって。HTMLだけで代替シートに切替可。 >>470
JSでもクッキー食わせてるんじゃないの? >>471
でもページ切り替わってもちゃんと値を保持していて欲しいね。
あんまり切り替えた意味ないし。
>>472
おそらく。 >>471>>473
Firefox ならページ切り替えても title 追っかけてるんじゃないかな。
ブラウザ依存しまくりなので HTML だけでは無理といえなくもない。
(閲覧者の環境に依存しまくるから作成者の意図通りにはならないってこと) >>474
Firefoxでも無理ですた。
コンテキストメニュー拡張にそういう機能がいちおうあるけど。。。
Not Foundになる。無くなってしまったのか?
スタイルシート切り替え&リンクボタン「ス切リボ」
http://www.xinada.ne.jp/~handa/tech/CSS/SuKiBo だいぶ前になくなってたよ。てか1ヶ月放置でも生きてるのか・・。
Web制作板ってほんと過疎だな・・ javascript質問スレから誘導されてきました。
当方が使っているCSS切り替えスクリプトなんですが、
MacIEに対応していないんです。当方、Macを所持して
いないので、もし宜しければ、どなたかMacIEに対応
させる追加ソースを代わりに書いて下さいませんでしょうか。
宜しくお願い致します。
dat落ちしそうなのでageておきますね。 >>481
とりあえず、今使ってるものを提示してもらわないことには
修正コードなんて誰にも描けないと思うぞ。
個人的には、MacIEに対応済みのスクリプトを拾ってくりゃ終わる話だと思うけど。 参考まで。
http://babu.jp/~useyan/m/css.html 代替CSS選択Javascriptってフォームをdocument.writeで出してるのが多いからapplication/xhtml+xmlでは動作しないんだよな。
>>485のはOKだけど 切り替えスクリプト使いたいんだけど、スクリプト云々の前にCSSのlinkにtitle属性指定したら、何故か一瞬だけしかCSS適応されなくてすぐに解除される・・・orz
title属性消したら普通に適応される。なんでだろう・・・誰か教えてください >>490
ページ読み込み後に切り替えてるスクリプトならチラつくことあるよ。
代替スタイルシートの設定の仕方あってる?
rel="stylesheet"でtitle属性が違うLINK要素が2つ以上とか無い? >>491
それは大丈夫です。ちなみにIEだとちゃんと適応されました。Firefoxだと解除されます○| ̄|_ チラつきはIEでもOperaでもGeckoでも起こる。
CSSのサイズが若干大きいとHTMLレンダリングの開始にCSS読み込みが間に合わなかったらチラつく。
レンダリングが開始される前にCSSの読み込み(キャッシュ含)が終わっていればチラつかない。 一昨日くらいまで490とまったく同じ症状だった。
IEとかネスケでは大丈夫なのに、Firefoxだと、
一瞬だけCSS適応されてすぐに解除される。
だけど、今日まで忙しくてサイトに触れていなかったら、
急にちゃんと適応されるようになった。
もともとHTMLやCSSに問題はなかったし、
ブラウザがなんか故障したんだろう程度にしか
思わなかったが 普通にオプションで切れる。
IE ? まだそんなもん使ってんの?深い場所にあるからよく見ろよ googleの検索結果でnewwindow=1にしてもキャッシュや関連ページは
新しいウィンドウにならないんですが、ユーザスタイルシートで
こいつらを新しいウィンドウで開くように出来ないでしょうか?
ブラウザはIE6です。 そんな事言われても…。
フレームの構成はページスタイルともいえなくもないし、
複数ページだって文書スタイルといえなくもない…
とかなんとかようするに何らかのHTML書換えフィルタとか
ブラウザの振る舞いで対処するしかないわけですね?
firefoxなら拡張で何とかなるかな?
ごみんね。じゃ、時間だしこの辺で。 クッキーで代替
ttp://ramutei.com/ 読み込ませる限度って、最大でいくつぐらいまで?
調子に乗って5つもCSSを用意してしまったが…… >>507
うちは三つ
head部分やmenu、footer部分などのメインCSS
中身の制御のCSS、
その他なんかてきとうにCSS >>508
分けてるのね
>>507
漏れ全部のスタイル入れ込んだ代替CSSを10くらい読み込ませてるよ・・・('A`)ダメナノカナ >>509
IEは代替スタイルも全部読み込んでから表示する。
ので、重くなるぞ。 >>510
げっ。マジで?
優先スタイルシート読み込んで表示開始、だと思ってた。
トップのHTML自体は4KBのサイトだけど
代替CSS・背景画像ふくめたら80KB超えてるよ
どれを削ろう…… >>511
PHPのスクリプトなら問題ないよ。
選択されているCSSしか読み込まないから。 本来は、linkタグにalternateスタイルシートを記すのが、筋。 ほんとだよ。書き込み確認FLOWと刺さないと駄目だな 一つ代替スタイルシートを作ったので寝る。
完成していないけど。 ユーザスタイルシートで文字の大きさを制限したいと思っています。
FirefoxやOperaは最小フォントサイズを指定できますがこれだけでは不満です。
個人的に一番理想的なのは、たとえば最小9pt〜最大14ptと指定したとして、
そのページにある最小〜最大サイズまでのレンジを自動的に制限レンジの
9〜14ptに内比を保って変換してくれる事です。
CSSではこんな事はできるはずもないので、これに近いことをしたいのですが
何か良い方法はないでしょうか?
最大サイズの指定できるだけでも構わないのですが…。
現在はIE6やOperaでは全て固定サイズにするユーザCSSを使用しています。
これはこれで悪くないのですが、できれば避けたいです。
Firefoxだけは最小フォントサイズ指定とデフォルトフォントサイズだけで、
ユーザCSS無しでなんとか我慢できる範囲になっているようです。 Opera9P2はOpera:configとやるとmax_fontsizeという項目が有った…。
あとはIE6だけだ…。 保守してみる。
みんなどんな代替用意してる?
当方は
・基本(青系)
・白黒(読みやすさにより配慮)
・黒板風(目が疲れない?)
・ピンク系(かわいい)
・2ちゃんねる風(ネタ)
の5つ。
元がかなりストリクトでタグの種類も少ないミニマムなHTMLなんで、
シートも少ししか書かなくていいから手軽。 補足
>>464のスクリプトはすごくいいね。
サイト内全体にクッキーが適用されるから、
ページごとにいちいち選択し直さなくて良い。 ■ このスレッドは過去ログ倉庫に格納されています