<< March 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< 凹 | main | コーディングのスピード >>

ハムからみんなへお願い&お知らせ

相互リンク募集!
ハムにメールを送る時はここから
07月05日(Sat)

スポンサーサイト

一定期間更新がないため広告を表示しています

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • -
  • -
  • by スポンサードリンク

12月06日(Thu)

jQueryでフォントサイズを変更する方法

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とか各自で好きなように。

ここでは僕のをサンプルとしてだせませんが、
上ので皆さんもためしてみてください。

時間があれば、上のスクリプトを
クッキーに保存しておいて全部のページで
有効にする方法を解説しますね!

ま、僕も勉強段階でこれを書いたので、
ちゃっちぃ内容かもしれませんし、
もっとこうしたほうがいい!
ってのがあるかもしれません。
その場合はコメントにてご指導お願いします。

参考サイト:

タグ:
JUGEMテーマ:インターネット

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ


07月05日(Sat)

スポンサーサイト

人気blogランキング  にほんブログ村 サラリーマン日記ブログへ

  • 2014.07.05 Saturday
  • -
  • 23:35
  • -
  • -
  • by スポンサードリンク

【i2i】SEO対策ツール ロリポップ NetMile 見ると得する『CMサイト』
コメント

クリちゃんペロペロしってきったよぉぉぉ!!!!
時間なくてハメハメできなかったけど、3万もらってウマウマ!!(゚∀゚)
ていうかコレ、ち○こ突っ込んだら、金額やばいことになるんじゃね?笑
http://m-vrh-k.mik.blue-ski.info/m-vrh-k/
コメントする









この記事のトラックバックURL
トラックバック
categories
archives
recent comment
recent trackback
friend links
link list
あわせて読みたい
search this site.
tag cloud search
others
  • RSS1.0
  • Atom0.3
powered
みんなのブログポータル JUGEM
sponsored links