Fontsize : [ Large Size ] / [ Default Size ]

Home : Blog(What's New / Memo)

index > 更新履歴 > その他 > 更新 font-size変更アイコン設置

更新 font-size変更アイコン設置

現在このサイトは移転のため更新停止しています。
新しい記事はVERSIONFIVEにて更新されていきますのでそちらをご利用下さい。

また一部のエントリは新しいサイトに一部修正加筆されて再掲されています。[再掲されているエントリ一覧]

Thumbnails

今更ですが、見送っていたフォントサイズ変更アイコンを設置しました。

比較的文章が多いhomeabouteventsboardに設置してあります。
(他はレイアウトが崩れるのであえて設置していません)

以下アイコンの設置方法など。

javascriptを用いて代替スタイルシートに切り替えることでフォントサイズを変更しています。
また、cockieが利用可能であれば最後に選択したスタイルシートが次回に保持選択されるようになるそうです。
設置の方法は小粋空間さまの記事にて詳しく書かれていますのでそちらをご覧になっていただければ一番よいかと思います^^

スタイルシート切り替え by 小粋空間

さて、これをサイドバーに組み込むだけでは面白くないのでヘッダー(タイトルイメージの右)にスタイルシートにて装飾して配置します。
以下設置メモ。(当サイトの場合です

(X)HTMLの記述

<p id="fontsize">
<span>Fontsize : </span>
<a href="#" onclick="setActiveStyleSheet('large'); return false;" id="large-size" title="Large Size"><span>[ Large Size ]</span></a>
<span> / </span>
<a href="#" onclick="setActiveStyleSheet('default'); return false;" id="default-size" title="Default Size"><span>[ Default Size ]</span></a>
</p>

これをヘッダーの<h1>タグのあるブロック要素の下に記述します。

使用する画像  *これは配布物ではありません

画像(1) 背景画像

画像(2) Largeサイズアイコン *透過gif

画像(3) Defaultサイズアイコン *透過gif

画像(2)と(3)の高さは画像(1)と同じ、横幅は画像(1)の2つの白い部分の横幅にしてください。

cssの記述

#fontsize {
margin:-(画像(1)の高さ) 12px 0 0;  /*負の上マージンの値で配置*/
height:(画像(1)の高さ);
background:url('画像(1)のURI') no-repeat right;  /*背景右寄せ*/
}
#fontsize a {
margin:0;
padding:0;
height:(画像(1)の高さ);  /*高さ指定*/
display:block;  /*ブロック要素に*/
float:right;  /*ブロック要素にした<a>を右フロート*/
background-repeat:no-repeat;
}
#fontsize span {display:none;}  /*テキスト隠す*/
#large-size {
width:(画像(2)の横幅+1px);  /*横幅指定*/
background-image:url('画像(2)のURI');
}
#default-size {
width:(画像(3)の横幅+1px);  /*横幅指定*/
background-image:url('画像(2)のURI');
}

これでレイアウトはできます。(IE6、Firefox1.0、Opera8で確認済み)
まぁ、自分用のメモなのであまり参考にはならないと思いますが・・・。

(9/16追記)ちなみに(というかここ重要)、なぜかFirefoxで機能しません!!(; Д)゚ ゚
<link>要素でrelを指定しているものが複数ある場合、スタイルシート(標準と代替)を指定している<link>要素を先頭に持ってきてください。

例)<head>~</head>内

<link rel="stylesheet" href="~/style.css" title="default" media="all" />
<link rel="alternate stylesheet" href="~/style2.css" title="large" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="~/index.rdf" />
<link rel="alternate" type="application/atom+xml" href="~/atom.xml" />

これでFirefoxでも適用できました!!ヽ(´Д`)ノ
また、これでも適用されない場合、我楽さまにて検証をされていますのでこちらも参照してみてください。

スタイルシートの切替。 by 我楽

ちなみにFirefoxは[ 表示 > スタイルシート ]で代替スタイルシートが選択できます

この設置にあわせてaboutのフォントサイズの欄の記述を変更、boardのスキンを多少修正しました。

更新履歴 > その他 | - | -

[ Skip To Top ]



Sub Contents

Weblog Navigation

Latest Entries
Category
Recent Comments
Recent Trackback
Archives
Recommend

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト 「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」

WEBの歴史からXHTML,CSSの解説さらにはアクセシビリティにも触れられているまさに「教科書」

Serene Bach オフィシャルガイド~カスタマイズ自在のウェブログツール 「Serene Bach オフィシャルガイド~カスタマイズ自在のウェブログツール」

Serene Bachユーザ必読のガイドブック

世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル 「世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル」

有名サイトのCSSデザインテクニックが学べます

Joined

Other