Safari 5.1はalternate stylesheetが使えない為、styleswitch.jsを導入
過去にこのブログでjavascriptをつかって、
CSSを切り替えるというstyleswitcher.jsというのを使っていました。
しかし、Safariが5.0にバージョンアップしたあたりから上のスクリプトが動かなくなりました。
これはSafariだけの現象でした。
しばらく外していたのですが、原因はどうも
Safari 5.1から、alternate stylesheetの指定が出来なくなっているようでした。
以下のAppleのコミュニティーで話題になっているので、
どうもここに原因があるようです。
Safari 5.1 won't load "alternate stylesheets" properly : Apple Support Communities
Safari 5.1がリリースされたのが、2011年8月辺りのようなので、
その内にこの問題は解決されると思っていますが、
最近リリースされたSafari5.1.1では変わっていませんでした。
そこでいろいろ探して、上記のApple Support Communitiesで見つけたのですが、
Style Sheet SwitcherというスクリプトのSafari 5.1対応版を作った人がいたようです。
という事で、そのスクリプトを導入したので、続きに導入記録を載せておきます。
やり方は、styleswitcher.jsの時と同じく、
・ 新しいCSSファイルの作成
・ スクリプトの入手、変更、アップロード
・ テンプレートの変更
・ CSS切り替えメニューの追加
となります。全体的な流れは、
小粋空間: スタイルシート切り替え
を参考にして下さい。
尚、現在このサイトで使用しているMTは4.261ですので、
他のバージョンの場合は適宜変更して下さい。
- 新しいCSSファイルの作成：
デザイン→テンプレートと画面を移動。画面左上にある、
「インデックステンプレートを作成」をクリックして新しいスタイルシートを作成します。
画面の下の方にある「テンプレートの設定」は、
のように設定します。
ファイル名は、任意の***.cssファイルで指定します。
スタイルシートは必要な数作成します。 - スクリプトの入手
入手するスクリプトは、以下のフォーラムのスレッド
Style Sheet Switcher (v1.1) - Dynamic Drive Forums
の
jscheuer1さんの投稿にあるstyleswitch.jsのリンクよりスクリプトをダウンロードします。
スレッドがなくなった場合とかに備え、ファイルへの直接リンク先を表示しておきます。 - スクリプトの変更
ダウンロードしたstyleswitch.jsの8、９行目に
ランダム表示、表示の期間を指定する部分がありますので、
好みによって変更して下さい。
よくわからない場合、そのままで使用して問題ありません。 - スクリプトのアップロード
styleswitch.jsをローカルのサイトパス（ブログのindex.html又はindex.phpと同じディレクトリー）
にアップロードします。 - テンプレートの変更（alternate stylesheetの追加）
テンプレート上部にあるスタイルシート指定の部分に以下のようなalternate stylesheetを追加します（赤文字の部分）。ファイルの名前（***.css）やtitleは、それぞれ変更してください。
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>white.css" type="text/css" title="white" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>gray.css" type="text/css" title="gray" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>black.css" type="text/css" title="black" /> - テンプレートの変更（スクリプトのインクルード）
テンプレートの<head>～</head>に、以下を追加します。
青文字の部分は削除せずにそのまま追加してください。
<script type="text/javascript" src="<$MTBlogURL$>styleswitch.js">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script> - CSS切り替えメニューの追加
CSSを切り替える適当な場所へ、切り替えメニューを追加します。
このサイトの場合、サイドバーに追加したいので、
ウィジェットテンプレートを作成します。
デザイン→ウィジェットと画面を移動。画面左中にある、
「ウィジェットテンプレートを作成」をクリックして新しいウィジェットテンプレートを作成します。
styleswitcher.jsに紹介されている、
setActiveStyleSheetを記述したやり方はなぜか動かなかったので、
以下のStyle Sheet Switcher (v1.1)のページを参考にしました。
Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)<a href="javascript:chooseStyle('default', 7)"><img src="http://herethere.cressel.com/logjp/archives/images/sq-white.jpg" title="デフォルト スタイルシート"></a>
<a href="javascript:chooseStyle('white', 7)"><img src="http://herethere.cressel.com/logjp/archives/images/sq-white.jpg" title="「白」 スタイルシート"></a>
<a href="javascript:chooseStyle('gray', 7)"><img src="http://herethere.cressel.com/logjp/archives/images/sq-gray.jpg" title="「グレー」 スタイルシート"></a>
<a href="javascript:chooseStyle('black', 7)"><img src="http://herethere.cressel.com/logjp/archives/images/sq-black1.jpg" title="「ブラック」 スタイルシート"></a>chooseStyleで指定されるスタイルシートの名前、default, white, gray, black等
画像ファイルの指定
title=の指定
は、先に変更したテンプレートの内容に合わせてそれぞれのサイト用に変更して下さい。
数字の7の部分はクッキー保持日数です。また上記のページに紹介されているラジオボタンを使った方法も使えます。
<form id="switchform">
<input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">DEFAULT<br />
<input type="radio" name="choice" value="white" onClick="chooseStyle(this.value, 60)">WHITE<br />
<input type="radio" name="choice" value="gray" onClick="chooseStyle(this.value, 60)">GRAY<br />
<input type="radio" name="choice" value="black" onClick="chooseStyle(this.value, 60)">BLACK
</form>
という事で、暫くの間うまく解決できなくて悩んでいたのがうまく表示できるようになりました。
ただし、styleswitcher.jsに比べて
画面をリロードした時にちょっと時間がかかるような気がしないでもありません。
もしかしたら今日のベトナムのネットの状況（少し重い）からかもしれません。
Safariでalternate stylesheetが使えるようになったら、styleswitcher.js
に戻したほうがよさそうな気がします。
コメントする