2009年1月26日
スタイルシートを切り替えて、文字サイズを変える
無聊写記をチェックしてくれている父や義父のために、文字の大きさを変更できるように右上に文字サイズ変更ボタンを設置しました。結構簡単にできます。以下に手順を備忘録として残しておきたいと思います。
- まずスタイルシート切り替えJavaScriptを入手
僕は、JavaScriptが全く扱えないのですが、ネット検索してみると解説＆ソース付きのスタイルシート切り替えスクリプトが配布されていました。その中からCookeiを使って前回読み込んだスタイルシートを記憶してくれる “styleswitcher.js” が良さそうなので使わせていただくことにしました。ダウンロードしたら自分のサイトへアップロードします。 - JavaScriptの読み込み
htmlファイルの<head>~</head>の間に、<script type="text/javascript" src="styleswitcher.js"></script>
を記述します。
- スタイルシートの読み込み
文字サイズ大、中、小のスタイルシートを作成します。文字サイズ"中"（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" /> - スタイルシートの切り替え
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> - ボタン用gif画像を作成しアップロードすれば完成
今日の写真
先週末、川口メディアセブンのイベント「ゴーゴー川口ミチマッピング」に参加しました。川口市内を歩いて巡りながら、川口の良いところ、面白いところを再発見しようというイベントで、楽しいのでよく参加しています。写真のプリント長そでシャツを着た六地蔵は峰ヶ岡八幡給近くの眺めがよく市内が見渡せる崖の上にある墓地にいらっしゃいます。
