よく見かけるフォントサイズの大・中・小やSmall/Medium/Largeのやり方をご紹介します。
よく見かけるので知っている方は多いと思いますが、今回利用した物はhttp://angstrey.com/index.php/projects/jquery-text-resizer-plugin/のサイトから利用した物です。
スタイルシートを複数作って変えるという方法もあったのですが、いちいち複数CSS作るのが面倒なのでもっと手軽にできないかなと探していたらコレにたどり着きました。
スポンサーリンク
結構簡単で使いやすいですね。上記のサイトからダウンロードして
1 2 3 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.textresizer.js"></script> |
これらのファイルを読み込みます。
あとは設定jsを載せます。
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> jQuery(document).ready( function() { jQuery( "#textsizer a" ).textresizer({ target: "#content", type: "fontSize", sizes: [ ".8em", "1em", "1.5em" ] }); }); </script> |
#textsizer aのところはidが変わればここも変えて下さい！それからtargetオプションは変更するidやクラスがあるコンテンツの場所を示します。
例えばヘッダーだけ変更したい場合は#headerとかbodyを変更したい場合はtarget:”#content”,はいりません。
target:”#main,#content,#footer”,と複数指定も可能です。
typeオプションは３つあります。fontSize,css,cssClassです。fontSizeの場合はsizesがサイズになります。sizes:[“12px”,”14px”.”16px”]や%でも指定できます。
cssの場合は
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | jQuery(document).ready( function() { jQuery( "#textsizer a" ).textresizer({ target: "#maincontent", type: "css", sizes: [ // Small. Index 0 { "font-size" : "80%", "color" : "red" }, // Medium. Index 1 { "font-size" : "100%", "color" : "blue" }, // Large. Index 2 { "font-size" : "120%", "color" : "darkgreen" } ], selectedIndex: 0 }); }); |
のように指定してやります。selectedIndexはユーザーが初めてページを訪問するとき、上のサイズ配列のどのフォントサイズがデフォルトで選ばれなければならないかについて示します。これは、サイズ配列で定められる要素のゼロベースのインデックスです。つまり、最初の要素は0です、第2は1です、第3は2というふうになります。
1 2 3 4 5 6 7 8 9 10 11 12 | jQuery(document).ready( function() { jQuery( "#textsizer a" ).textresizer({ target: "#maincontent", type: "cssClass", sizes: [ "small-text", "medium-text", "large-text" ], selectedIndex: 1 }); }); |
スタイルシートをクラス指定してあるサイズに変更します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #maincontent{} #maincontent.small-text { font-size: 11px; } #maincontent.medium-text { font-size: 13px; } #maincontent.large-text { font-size: 15px; } |
あとはHTMLに配置すればできあがり！リンク先は＃nogo指定になります。
1 2 3 4 5 6 7 | <div id="textsizer">
<p>Font Size:<p>
<ul class="textresizer">
<li><a href="#nogo">Small</a></li>
<li><a href="#nogo">Medium</a></li>
<li><a href="#nogo">Large</a></li>
</ul> |
結構簡単でしょ？忘れないための覚え書きです。
因みに元々のidやclassにピクセル指定してある場合は変わりませんよ。emか%にしてやると良いです。
