フォントサイズを切り替えるJavaScript

閲覧者の好みに合わせ、Vicunaの文字サイズをボタンスイッチによって切り替えられるようにするスクリプトを 10coin.comのmarbleさんが作成・公開してくださいました。

• フォントサイズを切り替えるJS:改

設置も簡単ながら、JSの設定によりフォントサイズを変化させる場所を任意に決めることができるという優れものです。これにより、記事部分のみ(div#main)文字サイズを拡大させたりできます。また、一度ユーザーが設定したサイズはクッキーに保存され、再び訪れたときも反映されます。すごいですね!

設置・設定方法、スクリプトのダウンロードはリンク先を参照してください。

挿入されるスイッチ部分のHTMLに対するスタイル(CSS)は追加記述する必要があります。10coin.comに設置されているものと同じ見栄えにしたい場合は、感謝の気持ちを込めながらCSS部分を拝借させていただきましょう。(これはdiv#header内に出現させたとき専用です。アイキャッチ挿入時やfutura, bazooka, warship以外のスキンでは崩れてしまうかもしれません)

/*--------------------------------------
 Font Size Switcher
 http://10coin.com/memo/2007/09/04/102154/
---------------------------------------*/

div#header ul#fontSizeSwitcher {
	float: right;
	margin: 13px 0 0;
	list-style: none;
}

div#header ul#fontSizeSwitcher li {
	margin: 0 0 0 10px;
	padding: 0.2em 5px;
	border: 1px solid white;
	float: left;
	width: 1em;
	background-color: #aaa;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}

div#header ul#fontSizeSwitcher li.current {
	color: #666;
	background-color: white;

}

上記スタイルを、CSSファイルの適当な場所にコピーペーストし、色設定等を好みに合わせて編集してください。