スタイルシートを切り替えて、文字サイズを変える

無聊写記をチェックしてくれている父や義父のために、文字の大きさを変更できるように右上に文字サイズ変更ボタンを設置しました。結構簡単にできます。以下に手順を備忘録として残しておきたいと思います。

1. まずスタイルシート切り替えJavaScriptを入手

僕は、JavaScriptが全く扱えないのですが、ネット検索してみると解説＆ソース付きのスタイルシート切り替えスクリプトが配布されていました。その中からCookeiを使って前回読み込んだスタイルシートを記憶してくれる “styleswitcher.js” が良さそうなので使わせていただくことにしました。ダウンロードしたら自分のサイトへアップロードします。

2. JavaScriptの読み込み

htmlファイルの <head>~</head>の間に、

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

を記述します。

3. スタイルシートの読み込み

文字サイズ大、中、小のスタイルシートを作成します。文字サイズ”中”（css名：buryoshaki.css、title属性名：Default）のスタイルシートは、デフォルトで読み込むことにしたので rel=“stylesheet”と記述します。切り替え用の文字サイズ”小”（css名：buryoshaki-s.css、title属性名：Small）、“大”（css名：buryoshaki-l.css、title属性名：Large）のスタイルシートは初期値で使用しないので rel=“alternate stylesheet”で読み込みます。以下、私のソースです。

<link rel="stylesheet" href="<$MTBlogURL$>buryoshaki.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>buryoshaki-s.css" type="text/css" title="Small" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>buryoshaki-l.css" type="text/css" title="Large" />

4. スタイルシートの切り替え

a要素にonclickイベントを追加し、styleswitcher.jsのsetActiveStyleSheet関数にtitle属性を与えることにより、その属性のcssファイルを読み込ませます。

<div id="header-ctrl">
<span>
<img alt="文字サイズ" src="<$MTBlogURL$>moji-size.gif" />
<a href="#" onclick="setActiveStyleSheet('Small'); return false;">
<img alt="小" src="<$MTBlogURL$>button_small.gif" />
</a>
<a href="#" onclick="setActiveStyleSheet('Default'); return false;">
<img alt="中" src="<$MTBlogURL$>button_default.gif" />
</a>
<a href="#" onclick="setActiveStyleSheet('Large'); return false;">
<img alt="大" src="<$MTBlogURL$>button_large.gif" />
</a>
</span>
</div>

5. ボタン用gif画像を作成しアップロードすれば完成

今日の写真

峯八幡宮脇の崖沿いの道を行くとある六地蔵です。

無聊写記