小粋空間  -  a cheap joke and a play on words site

文字拡大ツールを利用する

フォントサイズ切り替えツールの紹介です。

50ism.com：ブログ文字拡大ツールα版

これは提供されているスクリプトをサイトに貼り付けるだけで、フォントサイズ切り替え用のアイコン（左）が表示されるというもので、フォントサイズを大・中・小の三段階に切り替えらることができます。 このサービスでは2種類のスクリプトが用意されていますが、片方のスクリプト（ページ上）はフレーム表示に切り替わるため、個人的にはもう一方（ページ下）の

<script language="javascript" src="http://www.50ism.com/blogsize/js/normal.js"></script>

がお勧めです。

ただしスタイルが予め設定されているため、若干手を加え、公開テンプレートのサイドバーにぴったり収めるためのカスタマイズを紹介します。

注：公開テンプレートに設置したところ、中央カラム本文のみがフォントサイズ切り替え対象となるようです（全体のフォントサイズを切り替えられるようにするにはCSSの修正が必要と思われますが、そこまで手が回っていません）。

１．スクリプトの設定

提供されているスクリプトを表示したい部分に貼り付けると同時に、青色のタグを追加します。

<div id="blogsize">
<script language="javascript" src="http://www.50ism.com/blogsize/js/normal.js"></script>
</div>
<script type="text/javascript">
div = document.getElementById('blogsize').getElementsByTagName('div')[0];
div.style.margin = '0';
</script>

追加したタグとスクリプトは予め設定されているマージンをクリアするためのものです。

２．CSS 修正

フォントサイズ切り替え用のアイコンは幅 170px なので、公開テンプレートのサイドバー（幅 155px）に設定するとレイアウトが崩れます。
ということで、スタイルシートのサイドバー幅を修正します。

ここでは3カラム固定レイアウトの場合を例に示します。赤色を削除して青色を追加してください。

変更前

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}

変更後

.layout-three-column #box {
    width: 867px;
    _width: 865px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #links-left-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-right-box {
    float: left;
    width: 202px;
    _width: 200px;
}

ここでは右サイドバーに設置することを想定して、#links-right-box の幅を 202px（または200px）にしていますが、左サイドバーに設置する場合は #links-left-box の設定と #links-right-box の設定を入れ替えてください。