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

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

Posted at September 29,2006 1:25 AM
Tag:[Font]

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

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

ブログ文字拡大ツールα版これは提供されているスクリプトをサイトに貼り付けるだけで、フォントサイズ切り替え用のアイコン(左)が表示されるというもので、フォントサイズを大・中・小の三段階に切り替えらることができます。
このサービスでは2種類のスクリプトが用意されていますが、片方のスクリプト(ページ上)はフレーム表示に切り替わるため、個人的にはもう一方(ページ下)の
<script language="javascript" src="http://www.50ism.com/blogsize/js/normal.js"></script>

がお勧めです。

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

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

1.スクリプトの設定

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

<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>

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

2.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 の設定を入れ替えてください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)