スタイルシートを切り替える(フォントサイズの切替)

見やすいサイト作りと自分の勝手な美意識とのハザマで結構悩んだりしてます。
テキストを読みやすくするには文字色と背景色の組み合わせにも左右されると思いますが1番はフォントサイズなのかなぁ…
でも「大きいフォントサイズはスマートじゃない！」って強く思ってるんですよね…
ついでに「英数字の全角はスマートじゃない！」とも思ってたりします。
(↑の表現オブラートに包んでます…アハ)
まぁこれは個人の主観ですけどね…
そんなワケでメインのエントリー部分はフォントサイズ11pxにしています。
これがワタシにとって1番ちょうどいいサイズだからです。
(逆に言うとメインが10px以下の場合読むのがとても疲れます…)

でも文字サイズが小さいせいで見に来てくれる方のストレスになったり見る気がなくなったりして素通りされてたりしたらそれは本末転倒というか非常に悲しい事です。

スタイルシートで指定しているせいでブラウザで文字サイズを自由に変えられないんですよね…
そこで閲覧している方が文字サイズを簡単に変えられるようにしてみました。

参考にさせていただいたのはこちら↓

なかよしこよし: 閲覧者がページで文字を大小させる

JavaScript で閲覧者がスタイルシートを自由に切り替えるという方法です。

1)JavaScript をサーバーにUP
A List Apartへ行って下の方の「Download styleswitcher.js」のリンクからstyleswitcher.jsを保存
FTPでサーバーにUP
(デフォルトのstyles-site.cssと同じ場所です)

2)切り替えるスタイルシートを用意
「新しいインデックス・テンプレートを作る」でスタイルシートを作ります。
テンプレートの名前→スタイルシート(フォントサイズ大)
出力ファイル名→styles-big.css
テンプレートの中身→デフォルトのstyles-site.cssを丸々コピーして修正
*ワタシはメインのエントリー部分のみ文字サイズを変更しますのでbodyの文字サイズ部分のスタイルをfont-size: 13px;に変更

3)テンプレートの修正
*head部分[1]

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

↓に変更

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" /> <link rel="alternate stylesheet" href="<$MTBlogURL$>styles-big.css" type="text/css" title="Large" />

*head部分[2]

↓の記述を追加

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

*スタイルシート切替リンク
リンクを表示したい箇所に以下のソースを追加

Font-size : <a title="フォントサイズ(小)に切替" href="#" onclick="setActiveStyleSheet('Default'); return false;">Small</a>*<a title="フォントサイズ(大)に切替" href="#" onclick="setActiveStyleSheet('Large'); return false;">Large</a>

4)リビルドして完了♪

ワタシは全てのテンプレートのバナー下の部分に表示しました。

これはもっと面白い応用ができそうです！

Now Playing...
Ministry - 「Kaif」 (Dark Side Of The Spoon)