Topお知らせblog > 2006年9月
2006年9月29日

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

September 29,2006 1:25 AM
Tag:[]
Permalink

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

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

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3