(c) Hiro Konda. 2005/07/15
カスタマイズ例は、当Script "Stylesheet Selector Standards EDITION (css-select-std.js) "をご利用になっている事を前提に提供しています。 JavaScriptリファレンス及び、他の一般(JavaScript)ソースとの共有パーツを目的に提供するものではありません。
何をしているのか意味もわからずにソース混合させると役立たずになるかもしれませんので、予めご了承ください。
(c) Hiro Konda. 2005/07/27
共通のページや特定のページのみでスタイルシートを追加するカスタマイズを考えます。
この追加 Scriptは、IE 5 - 6, Opera 7 - 8, Gecko (Netscape 6 - 8, Firefox)で動作します。
どのページ階層からでもCSSファイルへのリンクアドレスを呼び出せる様にする場合は、 共通するパス部分(CSS共通ディレクトリの最下位パス)を固定化しなければなりません。
createCssLink()
を追加する。(JavaScriptファイルの最後辺り)cssInIt()
内部の makeCssSelectForm()
関数実行の直前で、リンク要素追加用関数 createCssLink()
を実行させる。共通変数を追加して、開始チェック関数 cssInIt()
内部の makeCssSelectForm()
関数実行の直前で、
createCssLink()
スタイル追加関数を実行させます。
// Debug
の下行は、デバッグコードです。共通ディレクトリパスが正しいかどうかの確認用できます。
/* +++ 共通変数追加 +++ */ /* CSS共通ディレクトリの最下位パス */ var cssSitePath = '/css/'; /* ディレクトリパスを確定させる */ var cssBaseDir = w.location.href.substring(0,w.location.href.indexOf(cssSitePath)+cssSitePath.length); // Debug // w.alert(cssBaseDir); /* +++ 開始チェック関数 cssInIt() 内部に追加修正 +++ */ /* 開始チェック (各種エラー避け) */ function cssInIt() { /* 最低限これが動かなきゃ...。 */ if (!(d.getElementsByTagName || d.getElementsByTagNameNS)) { return;} /* IE 専用ですか? */ if (cssFormIeOnly && !((winIe || macIe))) { cssErrFunc(1,''); return;} /* Opera 7.5+ は、application/xhtml+xmlでこけます。(head 要素の存在確認) */ if (op7 && isXHTML) { var checkOpe = GetElementsByTagName(nsURI,'head'); if (checkOpe.length == 0) { return;} } /* makeCssSelectForm関数の前に リンク追加関数を追加します。*/ createCssLink(cssBaseDir + 'basic-bw.css','Black on White','screen, print','Shift_JIS',1); /* さて選択フォームを作りましょう */ makeCssSelectForm(); }
共通変数を追加して、開始チェック関数 cssInIt()
内部の makeCssSelectForm()
関数実行の直前で、
createCssLink()
スタイル追加関数及び、条件分岐を実行させます。
なお、追加する sitePath (サイト共通ディレクトリの最下位パス)変数は、 製作者側のサイト環境に合わせて設定してください。
// Debug
の下行は、デバッグコードです。共通ディレクトリパスが正しいかどうかの確認用できます。
/* +++ 共通変数追加 +++ */ /* CSS共通ディレクトリの最下位パス */ var cssSitePath = '/css/'; /* ディレクトリパスを確定させる */ var cssBaseDir = w.location.href.substring(0,w.location.href.indexOf(cssSitePath)+cssSitePath.length); // Debug // w.alert(cssBaseDir); /* サイト共通ディレクトリの最下位パス */ var sitePath = (w.location.href.indexOf('%7Ekonda')! =- 1) ? '/%7Ekonda/' : '/~konda/'; /* サイト共通ディレクトリを確定させる */ var siteBaseDir = w.location.href.substring(0,w.location.href.indexOf(sitePath)+sitePath.length); // Debug // w.alert(siteBaseDir); /* +++ 開始チェック関数 cssInIt() 内部に追加修正 +++ */ /* 開始チェック (各種エラー避け) */ function cssInIt() { /* 最低限これが動かなきゃ...。 */ if (!(d.getElementsByTagName || d.getElementsByTagNameNS)) { return;} /* IE 専用ですか? */ if (cssFormIeOnly && !((winIe || macIe))) { cssErrFunc(1,''); return;} /* Opera 7.5+ は、application/xhtml+xmlでこけます。(head 要素の存在確認) */ if (op7 && isXHTML) { var checkOpe = GetElementsByTagName(nsURI,'head'); if (checkOpe.length == 0) { return;} } /* makeCssSelectForm関数の前に リンク追加関数を追加します。*/ /* ローカルや、HTTP上においても 共通ディレクトリ + 'index.html'ならば、代替スタイルシートを追加する。*/ if (w.location.href == siteBaseDir + 'index.html') { createCssLink(cssBaseDir + 'basic-bw.css','Black on White','screen, print','Shift_JIS',1); } /* さて選択フォームを作りましょう */ makeCssSelectForm(); }
createCssLink(href,title,media,charset,alternate)
の、
alternateは、1を与えると "alternate stylesheet"代替スタイルシートとなります。
/* +++ CSS追加用関数 +++ */ function createCssLink(href,title,media,charset,alternate) { if (d.createStyleSheet) { if (d.all && d.createStyleSheet) { var lastIdx = d.styleSheets.length; d.createStyleSheet(href); d.styleSheets.item(lastIdx).media = media; d.styleSheets.item(lastIdx).title = title; d.styleSheets.item(lastIdx).disabled = (alternate) ? true : false; } } else if (d.createElement) { var head = GetElementsByTagName(xmlns,'HEAD').item(0); var rel = (alternate) ? "alternate stylesheet" : "stylesheet"; CEAppendChild(head,new Array('LINK','type','text/css','href',href,'rel',rel,'title',title,'media',media,'charset',charset)); // Debug // w.alert(head.innerHTML); } }
第二版 : 2005/07/27
This URL: http://www.minc.ne.jp/~konda/web_resoce/js/css-select/customise.html