ビジネスマンの徹底パソコン奮闘サイト

お知らせ
2011-03-16: 目次を作成しました。
2010-09-17: Google Map 2 記事一覧を作成しました。
2010-07-03: Google Map 3 記事一覧を作成しました。

スポンサーサイト

--年 --月--日 (-- )
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryでサイトのフォントを変更する

2011年 03月29日 (火 )
jQueryを使用してサイトのフォントを大きくしてみます。

以下のリンクをクリックするとこのサイトのフォントが大きくなります。
非常に見にくくなりますが、例なので極端に大きくしてみました。

文字を大きくする

コードは下記の通りです。


このコードではリンククリック時にbodyタグの中のフォントサイズを変更するようになっているため、
その子要素でフォントサイズが設定されている要素には影響がありません。
なのでこのブログでは一部のタイトルが大きくなるだけで、
あんまり派手に変わりませんでした。

良くホームページにあるフォントサイズ変更ボタンで

文字サイズを変更 大 中 小

の様にしたい場合は、変更したい要素にclass="font_change_element"とか付けておいて、
12行目のところで、
$(".font_change_element").css("font-size", "30px");
とかすれば良いと思います。

その際、要素の幅などをpx単位ではなく、
em単位で設定しないとレイアウトが結構崩れてしまうと思うので注意が必要です。

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://pcrice.blog129.fc2.com/tb.php/112-999c4b09
  ビジネスマンの徹底パソコン奮闘サイト  
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。