moji.jpgここの中の人が最近、老眼が進行してきたようで、私のブログの文字サイズが小さくて読みにくいぞゴルァ(ﾟДﾟ#)と言われてしまったので、小粋空間 さんの ●スタイルシート切り替え というエントリーを参考にスタイルシート切替スクリプトを組みました。

設置自体は簡単ですが、例によって私のスキル不足で設置にだいぶ手間取りました。ありがとうございました。

今のところ順調に動いているようですが、未検証の問題？が見受けられました（私が手こずった内容）。検証したいのですが、いい加減疲れたので検証はまたの機会にして、とりあえず、検証すべき内容だけ列挙しときます。

  • スクリプト、styleswitcher.jsの置き場所はスタイルシートファイルがある置き場所と同一の方が良いような・・・。いろんなディレクトリに置いてみたのですが、反映されたと思ってたら反映されなかったりしたので。現状はスタイルシートと同じ場所においてあります。以下にソース転記

    • <!– スタイルシート切り替え開始 –>
    <script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>
    <!– スタイルシート切り替え終了 –>

  • スイッチ部分（私の場合、大・中・小の部分）のhtmlの書き順はスタイルシートの並び順と同一にしとかないと切替が反映されない。以下にスタイルシートとスイッチ部分のソース転記。

    • <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="default" />
    <link rel="alternate stylesheet" href="<$MTBlogURL$>middle.css" type="text/css" title="middle" />
    <link rel="alternate stylesheet" href="<$MTBlogURL$>large.css" type="text/css"
    title="large" />

    <a href="#" onclick="setActiveStyleSheet(‘default’); return false;"><img alt="shou.jpg" class="bt" src="画像の置き場所/shou.jpg" width="20" height="20" />
    </a>
    <a href="#" onclick="setActiveStyleSheet(‘middle’); return false;"><img alt="chu.jpg" class="bt" src="画像の置き場所/chu.jpg" width="20" height="20" />
    </a>
    <a href="#" onclick="setActiveStyleSheet(‘large’); return false;"><img alt="dai.jpg" class="bt" src="画像の置き場所/dai.jpg" width="20" height="20" />
    </a><br />
    上記ボタンをクリックすることによってメインのエントリー部分の文字サイズが変更できます。デフォルトの文字サイズは"小"です。

  • PHPでモジュール化して、PHPの呼び出しソースを使用するとスタイルシートを読んでくれない。
    →これはMTのインクルードタグを使用することで解決しました。以下にソース転記。

    • <!– 文字サイズ切り替え–>
    <div class="sidetitle" id="foname">
    文字サイズ切替
    </div>
    <div class="side" id="folist">
    <$MTInclude file="styleswitcher.php"$>
    </div>
    <!– 文字サイズ切り替えend–>

  • 設定後、再構築してMTの管理画面からサイトの確認を行うとスタイルシートを使用しないプレーンな状態で起動してしまう。→現状は大丈夫なようですので様子見。

厳密には全てURLをきちんと指定しているので大丈夫なはずですが、読み込みに失敗してしまうことが何度か・・・。ロリポのサーバーが大分重たかったので、そのせいで読み込みに失敗してたのかと思いつつも、今度暇な時に一個づつ検証してみようと思います。

以下、設置手順メモメモ。


　

  1. 新しいスタイルシートの作成
    既存のスタイルシートをコピペしてエディタで開き変更します。Styles-site.cssをコピーしてlarge.cssと、middle.cssを作りました。で、そのスタイルシートの確認方法ですが、メインインデックス・ファイルをローカルへ保存し、スタイルシートのurl部分（青字部分）をローカルパスに書き換え、ブラウザでそのローカルファイル（メインインデックス・ファイル）を開いて行いました。

    2. <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="default" />

    　　　↓

    <link rel="stylesheet" href="d:\hoge\styles-site.css" type="text/css" title="default" />

  2. MT管理画面より”新しいインデックステンプレートを作る”をクリックし、上記で作成したスタイルシートの内容をコピペして新しいスタイルシートを作成します。
  3. スタイルシートの切替を行いたいテンプレートに上記で作成したスタイルシートを追加します。追加内容は下記青字部分です。切替のための記述も入ってます。

    4. <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="default" />
    <link rel="alternate stylesheet" href="<$MTBlogURL$>middle.css" type="text/css" title="middle" />
    <link rel="alternate stylesheet" href="<$MTBlogURL$>large.css" type="text/css"
    title="large" />

  4. styleswitcher.jsを任意のディレクトリに配置します。オリジナルのサイトからは取得できないようですので右よりダウンロードしてください。→styleswitcher.js
  5. 上記スクリプトを各テンプレートに追加します。

    6. <script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>

  6. サイドバーに追加するためのモジュールを下記のように作成します。PHP化を行っていることが前提です。”setActiveStyleSheet”の後ろにあるパラメータは、先に指定したtitle属性の名称（middleやlarge等）と一致するように設定てください。でないと、読み込んでくれません。

    7. <a href="#" onclick="setActiveStyleSheet(‘default’); return false;"><img alt="shou.jpg" class="bt" src="画像の置き場所/shou.jpg" width="20" height="20" />
    </a>
    <a href="#" onclick="setActiveStyleSheet(‘middle’); return false;"><img alt="chu.jpg" class="bt" src="画像の置き場所/chu.jpg" width="20" height="20" />
    </a>
    <a href="#" onclick="setActiveStyleSheet(‘large’); return false;"><img alt="dai.jpg" class="bt" src="画像の置き場所/dai.jpg" width="20" height="20" />
    </a><br />
    上記ボタンをクリックすることによってメインのエントリー部分の文字サイズが変更できます。デフォルトの文字サイズは"小"です。

  7. 最後に、上記モジュールをサイドメニューの任意の場所に下記のように設定します。

    <!– 文字サイズ切り替え–>
    <div class="sidetitle" id="foname">
    文字サイズ切替
    </div>
    <div class="side" id="folist">
    <$MTInclude file="styleswitcher.php"$>
    </div>
    <!– 文字サイズ切り替えend–>

以上。