XREA top
Advertisement

スタイルシート切り替えスクリプト

前置き

外部スタイルシートを使うとき、ひとつのHTML文書に複数の代替スタイルシートを指定することで、それらを切り替えて使うことが可能です。

この切り替えは、例えばNetscape6ではメニューの「表示＞スタイルシート」で行えますが、残念ながら世間でシェアが最も多いブラウザであるMicrosoft Internet Explorerでは標準の機能にありません。

ところが「outsider reflex」（このサイトはデザインが格好いいので必見です）でMSIEでもスタイルシートを切り替られるスクリプトを紹介していました。

それに刺激を受けて、私も似たようなスクリプトを作ってみました。

ここで公開するスクリプトは、「三日坊主＋＋の部屋」（現在は閉鎖）で公開されていた、MSIE5で代替スタイルシートを扱う方法を使わせて頂いています。

ソース

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<link rel="alternate stylesheet" type="text/css" href="coolblue.css" title="クールブルー">
<link rel="alternate stylesheet" type="text/css" href="formal.css" title="フォーマル">
<link rel="stylesheet" type="text/css" href="simple.css" title="シンプル">
<link rel="stylesheet" type="text/css" href="none.css">
<script type="text/javascript" src="changess.js" charset="Shift_JIS"></script>
（中略）
</head>
<body>
<h1>おまけ</h1>
（中略）
<address>製作：いちゆう</address>
</body>
</html>

Javascript (changess.js)

/* スタイルシート切り替えスクリプト */

if ( document.styleSheets
 && !(navigator.userAgent.indexOf("Mac_PowerPC") != -1
 && navigator.userAgent.indexOf("MSIE 4") != -1)) {
 /* Scriptでスタイルシートを扱えるブラウザのみ実行される */

/* 以下設定 */

label="スタイル選択："; // 選択フォーム左の文字列
cdomain=".nifty.com"; // サイトのドメイン名
cpath="/critical/"; // サイトのパス
cdays=10; // クッキーの有効日数 0=ブラウザ終了まで
insertform=true;
 /* 選択フォームを自動的に挿入するかどうか
    true=挿入する
    false=挿入しない(手動でフォームを書き込む) */
targetelement="address"; 
 /* 選択フォームは、ここで指定した要素で一番最初に現れるものの
    直前に挿入される(自動的に挿入するとき) */
addss=true;
 /* スタイルシートを追加するかどうか
    true=追加する
    false=追加しない */
addstyles=new Array(
 '初夏' , 'http://homepage1.nifty.com/critical/summer.css' ,
 'ノート' , 'http://homepage1.nifty.com/critical/notebook.css' );
 /* 追加するスタイルシートを名前とURLの組で指定する */

/* 以上設定 */

 main();
}

function main(){
 /* メイン関数 */
 N6 = navigator.product == "Gecko";
 sfTitles="";
 writeafter=false;

 if(addss) {
  userstyles = fGetCookie('userstyles');
  if (userstyles!='noCookie') {
   var addstylesstring = addstyles.join(',') + ',' + userstyles;
   addstyles = addstylesstring.split(',');
  }
  for (i=0; i < addstyles.length; i+=2){
   fAddLink(addstyles[i+1], addstyles[i]);
  }
 }
 sheet = fGetCookie('sheet');
 if(!N6){
  /* Mozillaでないとき、スタイルシートの一覧を取得し既定のスタイルに切り替える */
  fGetStyleTitles();
  if(sfTitles.indexOf(sheet)==-1) sheet=sS[0].title;
  fChangeSS(sheet);
 }
 else if(sheet!="noCookie")
  document.write('<META http-equiv="Default-Style" content="'+ sheet +'">');
  /* Mozillaのとき、最初にスタイルシートの一覧を取得すると不具合を生じるので、
     meta要素で既定のスタイルを設定する */
 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+=",";
   }
  }
 }
 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;
 for(i=0; i<sS.length; i++)
  sS[i].disabled = ((sS[i].title==ssTitle)||(!sS[i].title)) ?
   false : true;
 fSetCookie('sheet',ssTitle);
}

function fSelectSS(obj){
 /* 選択されたスタイルシートに切り替える */
 var index=obj.selectedIndex;
 sheet=obj.value;
 fChangeSS(sheet);
 window.focus();
 obj.selectedIndex=index;
}

function fInit(){
 /* ページが読み込まれたときの処理 */
 if(N6){
  /* Mozillaのとき、ここでスタイルシートの一覧を取得する */
  fGetStyleTitles();
  if(sfTitles.indexOf(sheet)==-1) sheet=sS[0].title;
  fChangeSS(sheet);
 }
 if (insertform) fAddForm();
 if (writeafter) fWriteAfter();
}

function fAddForm(){
 /* 選択フォームを追加する */
 var obj;
 if(document.all)
  obj=document.all.tags(targetelement).item(0);
 else if(document.getElementsByTagName)
  obj=document.getElementsByTagName(targetelement).item(0);
 if(!obj) return;
 fMakeHTML();
 if(document.all)
  obj.insertAdjacentHTML('beforeBegin',
      '<div class="selectsheet">'+nHTML+'</div>');
 else{
  var nDIV=document.createElement('DIV');
  nDIV.innerHTML=nHTML;
  nDIV.className="selectsheet";
  obj.parentNode.insertBefore(nDIV, obj); 
 }
}

function fMakeHTML(){
 /* 選択フォームのHTMLを作成する */
 nHTML='<label>' + label +
       '<select name="selectss" onchange="fSelectSS(this);">';
 for(i=0; i<sfTitle.length; i++){
  nHTML+='<option value="';
  nHTML+=sfTitle[i];
  nHTML+=(sfTitle[i]==sheet) ? '" selected="selected">' : '">';
  nHTML+=sfTitle[i];
  nHTML+='</option>';
 }
 nHTML+='</select></label>';
}

function fWriteForm(){
 /* 選択フォームを書き出す */
 if(document.styleSheets){
  if(!N6){
   fMakeHTML();
   document.write('<div class="selectsheet">',nHTML,'</div>');
  } else {
   document.write('<div class="selectsheet" id="selectform"></div>');
   writeafter=true;
  }
 }
}

function fWriteAfter(){
/* 選択フォームの中身を後で生成(Gecko用) */
 var obj;
 obj=document.getElementById("selectform");
 if(!obj) return;
 fMakeHTML();
 obj.innerHTML=nHTML;
}


function fEnd(){
 /* 終了処理 */
 fReadSS();
 if (NowSheet!=sheet) fSetCookie('sheet',NowSheet);
}

function fReadSS(){
 /* 現在適用されているスタイルシートを読み込む */
 NowSheet="none";
 for(i=0; i<sS.length; i++) {
  if ((!sS[i].disabled)&&(sS[i].title)) NowSheet=sS[i].title;
 }
}

/* スタイルシート追加 */
function fAddLink(ssurl, sstitle){
 if(document.all){
  var nLink=document.createStyleSheet(ssurl);
  nLink.title=sstitle;
  nLink.disabled=true;
 }
 else if(document.styleSheets){
  var nLink=document.createElement('LINK');
  nLink.rel="alternate stylesheet";
  nLink.type="text/css";
  nLink.href=ssurl;
  nLink.title=sstitle;
  var oHEAD=document.getElementsByTagName('HEAD').item(0);
  oHEAD.appendChild(nLink);
 }
}

ダウンロード（クッキー書き換え用HTML付き） cssselect.lzh

使い方

注意

応用例

このスクリプトをお使いになっているサイトをリンク集にて紹介させていただいております。

更新履歴

２００３年６月１６日

Mozillaで手動挿入した選択フォームが表示されない場合がある不具合を改善しました。

tDiaryでの利用について加筆しました。

２００２年９月２９日

リンクを別ページに分離しました。

２００２年８月５日

リンクを整理し、応用例として、「amemix 〜フリーゲーム製作＆配布サイト〜」、「[flow] RC3.01」、「ラクガキgarden」、「Le Mode」を追加しました。

２００２年４月１０日

応用例として、「津 波 荘」、「Obimatsu Web」、「怠慢堂本舗」に、関連サイトとして「なぞぺーじ」にリンクを追加しました。

２００２年２月２１日

スクリプトでスタイルシートの追加を行なえるようにしました。クッキーを利用して閲覧者の指定したスタイルシートも追加できます。

２００２年１月１２日

湾岸道さんの「Crime Claim Shower」移転。

２００２年１月２日

応用例として、「ほーむぺーじ厨房」を新たに紹介しました。

２００２年１月１日

応用例として、湾岸道さんのサイト「Crime Claim Shower」、および関連サイトを新たに紹介しました。

２００１年１２月８日

応用例として、motosenさんのサイトを紹介しました。

２００１年８月９日

Mozillaのメニューからスタイルシートを選びなおしても次に引き継がれるようにしました。また、ちょっぴり汎用っぽくしました。

２００１年６月１５日

「三日坊主＋＋の部屋」の記事を参考に、Netscape6で全部のスタイルが表示されるようにした。

製作：いちゆう