15 Sep 2005 23:27
更新 font-size変更アイコン設置
現在このサイトは移転のため更新停止しています。
新しい記事はVERSIONFIVEにて更新されていきますのでそちらをご利用下さい。
また一部のエントリは新しいサイトに一部修正加筆されて再掲されています。[再掲されているエントリ一覧]
今更ですが、見送っていたフォントサイズ変更アイコンを設置しました。
比較的文章が多いhome、about、events、boardに設置してあります。
（他はレイアウトが崩れるのであえて設置していません）
以下アイコンの設置方法など。
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)
*透過gif
画像(3)
*透過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は[ 表示 > スタイルシート ]で代替スタイルシートが選択できます
更新履歴 > その他 | - | -
「Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト」
「Serene Bach オフィシャルガイド~カスタマイズ自在のウェブログツール」
「世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル」