◇ 相互リンク募集!
◇ ハムにメールを送る時はここから
ハムからみんなへお願い&お知らせ
12月06日(Thu)
jQueryでフォントサイズを変更する方法
jQueryでフォントサイズを変更する方法
最近はユーザビリティを考えて、
文字のサイズを選択できるようなサイトが増えていますよね。
特に市役所とか公共機関のサイトに多くみられますね。
こんなやつ↓
上のはゆうちょ銀行のサイトのです。
最近こういうのが多いですよね。
あとはこんなのも。
日本郵政と郵便局のサイトの一部分。
ブラウザの文字サイズ変更方法を教えているのもありますよね。
北海道のもブラウザでの変更方法。
(参考サイトへのリンクは一番したの参考サイト参照。)
僕の部署で扱っているサイトも、
今はコレを取り入れようとしています。
これがjQueryでできないかなって思ったので、調べたら
案外簡単にできそうだ。
でも、検索で出てくるのはCSSをのファイル自体を入れ替える方法ばかり。
なので、それを元にCSSはあらかじめファイルに記述しておいて、
classを可変にすることでスタイルを変更する方法を作ってみた。
まずはjQueryをダウンロード。
そして使うためにheadの中に使うファイルを記述
●●の部分はそのjQueryをおくまでのパスに変換。
そしてclassを変更するためのスクリプト
これを「fontsize.js」とでも名前をつけて保存して、
そのファイルも読むようにhead内に記述を加える
ちょっと説明。
今回は<body>と書かれる部分にクラスを指定するようにしてみた。
コレがそれ。
bodyにclassでfont_Lかfont_Mかfont_Sがつくようになっている。
最初の
これはクリックでのアクションであることと、
aというアンカー要素でclassがsize_Lの部分で動作することを示している。
つまり動作させたい部分のことを書けばいいのである。
ちなみに僕のやつだと、HTMLはこうなる。
あとはCSSを記述しておけばOK
フォントのサイズも任意でも大丈夫。
120%とか1.5emとか各自で好きなように。
ここでは僕のをサンプルとしてだせませんが、
上ので皆さんもためしてみてください。
時間があれば、上のスクリプトを
クッキーに保存しておいて全部のページで
有効にする方法を解説しますね!
ま、僕も勉強段階でこれを書いたので、
ちゃっちぃ内容かもしれませんし、
もっとこうしたほうがいい!
ってのがあるかもしれません。
その場合はコメントにてご指導お願いします。
参考サイト:
タグ:jQuery、文字サイズ、サイズ変更
最近はユーザビリティを考えて、
文字のサイズを選択できるようなサイトが増えていますよね。
特に市役所とか公共機関のサイトに多くみられますね。
こんなやつ↓
上のはゆうちょ銀行のサイトのです。
最近こういうのが多いですよね。
あとはこんなのも。
日本郵政と郵便局のサイトの一部分。
ブラウザの文字サイズ変更方法を教えているのもありますよね。
北海道のもブラウザでの変更方法。
(参考サイトへのリンクは一番したの参考サイト参照。)
僕の部署で扱っているサイトも、
今はコレを取り入れようとしています。
これがjQueryでできないかなって思ったので、調べたら
案外簡単にできそうだ。
でも、検索で出てくるのはCSSをのファイル自体を入れ替える方法ばかり。
なので、それを元にCSSはあらかじめファイルに記述しておいて、
classを可変にすることでスタイルを変更する方法を作ってみた。
まずはjQueryをダウンロード。
そして使うためにheadの中に使うファイルを記述
<script src="●●/jquery.js" type="text/javascript">
●●の部分はそのjQueryをおくまでのパスに変換。
そしてclassを変更するためのスクリプト
$(function(){
$("a.size_L").click(function(){
$("body").removeAttr("class");
$("body").addClass("font_L");
return false;
});
$("a.size_M").click(function(){
$("body").removeAttr("class");
$("body").addClass("font_M");
return false;
});
$("a.size_S").click(function(){
$("body").removeAttr("class");
$("body").addClass("font_S");
return false;
});
});
これを「fontsize.js」とでも名前をつけて保存して、
そのファイルも読むようにhead内に記述を加える
<script src="●●/fontsize.js" type="text/javascript">
ちょっと説明。
今回は<body>と書かれる部分にクラスを指定するようにしてみた。
$("body").removeAttr("class");
$("body").addClass("font_L");
コレがそれ。
bodyにclassでfont_Lかfont_Mかfont_Sがつくようになっている。
最初の
$("a.size_L").click(function()
これはクリックでのアクションであることと、
aというアンカー要素でclassがsize_Lの部分で動作することを示している。
つまり動作させたい部分のことを書けばいいのである。
ちなみに僕のやつだと、HTMLはこうなる。
<ul>
<li><a href="#" class="size_L">フォントを大にする</a></li>
<li><a href="#" class="size_M">フォントを中にする</a></li>
<li><a href="#" class="size_S">フォントを小にする</a></li>
</ul>
あとはCSSを記述しておけばOK
.size_L{font-size:large;}
.size_M{font-size:medium;}
.size_S{font-size:small;}
フォントのサイズも任意でも大丈夫。
120%とか1.5emとか各自で好きなように。
ここでは僕のをサンプルとしてだせませんが、
上ので皆さんもためしてみてください。
時間があれば、上のスクリプトを
クッキーに保存しておいて全部のページで
有効にする方法を解説しますね!
ま、僕も勉強段階でこれを書いたので、
ちゃっちぃ内容かもしれませんし、
もっとこうしたほうがいい!
ってのがあるかもしれません。
その場合はコメントにてご指導お願いします。
参考サイト:
- jQuery(http://jquery.com/)
- jQueryでフォントサイズを変更する(4GALAXYのメモ)
- jQueryでcookieを超簡単に扱う方法 (4GALAXYのメモ)
- Cookie Plugin for jQuery(jquery.cookie.js)
- jQueryを使ったcookieの制御(いきなり!社長宣言!!)
- jQuery plugins
- 北海道の公式HP(http://www.pref.hokkaido.lg.jp/)
- 日本郵政(http://www.japanpost.jp/)
- 郵便局(http://www.jp-network.japanpost.jp/)
- ゆうちょ銀行(http://www.jp-bank.japanpost.jp/)
タグ:jQuery、文字サイズ、サイズ変更
JUGEMテーマ:インターネット
- 2007.12.06 Thursday
- Webデザイン
- 23:35
- comments(1)
- trackbacks(0)
- by ハム
- コメント
クリちゃんペロペロしってきったよぉぉぉ!!!!
時間なくてハメハメできなかったけど、3万もらってウマウマ!!(゚∀゚)
ていうかコレ、ち○こ突っ込んだら、金額やばいことになるんじゃね?笑
http://m-vrh-k.mik.blue-ski.info/m-vrh-k/
-
- たくや
- 2011/03/25 6:40 PM
- コメントする
- この記事のトラックバックURL
- トラックバック
| /PAGES |
- categories
- archives
-
- March 2008 (3)
- February 2008 (1)
- January 2008 (8)
- December 2007 (18)
- November 2007 (33)
- October 2007 (31)
- September 2007 (30)
- August 2007 (12)
- July 2007 (4)
- recent comment
-
- 札幌バレーボールチーム
⇒ ウチアゲ』運用事務局 (03/09) - 引越し先、構築完了!
⇒ AtoZ (08/26) - 引越し先、構築完了!
⇒ ふにゃバット (06/03) - 引越し先、構築完了!
⇒ 粒あん (04/21) - jQueryでフォントサイズを変更する方法
⇒ たくや (03/25) - 引越し先、構築完了!
⇒ とろろいも (01/17) - 引越し先、構築完了!
⇒ カドルト (01/11) - 引越し先、構築完了!
⇒ へっぽこなめ太郎 (10/03) - 引越し先、構築完了!
⇒ チュパカブラ (07/03) - 引越し先、構築完了!
⇒ なんぞコレぇぇえぇ!!!! (02/11)
- 札幌バレーボールチーム
- recent trackback
-
- 36STICKS
⇒ 札幌社会人のブログ「大学生に戻りたい!」 (11/28) - H姫とプールデート
⇒ 札幌社会人のブログ「大学生に戻りたい!」 (11/28) - 大学生時代の仲間と飲み会〜サプライズ企画〜
⇒ 札幌社会人のブログ「大学生に戻りたい!」 (11/28) - おでんとなべ
⇒ 札幌社会人のブログ「大学生に戻りたい!」 (11/28) - 女子バレー部(?)札幌市民体育大会ブロック優勝
⇒ 札幌社会人のブログ「大学生に戻りたい!」 (11/19) - CSS nite Sapporoに参加
⇒ CSS Nite公式ブログ (11/14) - 「3年B組金八先生」第8シリーズ 出演生徒一覧
⇒ 金八先生に関する情報です (11/04) - 札幌の大学生とSEO
⇒ 札幌社会人のブログ「大学生に戻りたい!」 (11/02) - 研修最後でした
⇒ 札幌社会人のブログ「大学生に戻りたい!」 (10/31) - ローソンとっておき宣言とリラックマ
⇒ みっちーの日記 (10/16)
- 36STICKS
- friend links
- link list
-
- search this site.
- tag cloud search
-
- sponsored links