CSS切替なしでフォントサイズを変更するjQueryのスクリプト
前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階(標準・大とか小・中・大みたいな)もいくつでも設定できます。ちなみにプラグイン風?に作りました。もちろん自己満の為です。
画像タイプDemo
テキストタイプDemo
対応ブラウザ
- Google Chrome
- Safari4~
- Firefox3~
- Internet Explorer6~
- Opera11
- ※Windowsのみの確認です。
- ※IE6はテキストタイプの場合、
a
要素を使用していない為ホバー機能が効きません。a
要素を追加しても問題ないかと思いますが、リンクじゃないのにa
要素を使うの嫌だった個人的に身勝手な考えの為です。(反論意見求む)
必要なファイル
※2012/4/7 jquery.cookie.jsがダウンロード出来なくなっていましたので、リンク先を変更しました。
コーディング&設定
HTML
head
要素内でjquery.js、jquery.cookie.jsを読み込む。
ディレクトリは任意です。
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script>
body
要素内で以下の様に記述。
#changeArea
でフォントサイズを変更する範囲を囲む。フォントサイズ変更ボタンの記述位置は#changeArea
の中でも外でもよい。
id名、class名、ボタンの数等は変更可。(合わせてJavaScriptの変更も必要)
画像タイプ
<ul id="fontSize"> <li><img class="changeBtn" src="sample-s.gif" alt="小"></li> <li><img class="changeBtn" src="sample-m.gif" alt="中"></li> <li><img class="changeBtn" src="sample-l.gif" alt="大"></li> </ul> <div id="changeArea"> <!-- ここからはフォントサイズが変更される --> <p>テキストテキストテキストテキストテキスト</p> <!-- ここまではフォントサイズが変更される --> </div>
テキストタイプ
<ul id="fontSize"> <li class="changeBtn">小</li> <li class="changeBtn">中</li> <li class="changeBtn">大</li> </ul> <div id="changeArea"> <!-- ここからはフォントサイズが変更される --> <p>テキストテキストテキストテキストテキスト</p> <!-- ここまではフォントサイズが変更される --> </div>
JavaScript
以下のスクリプトを記述。
4、10~159~16行目をHTMLや仕様に合わせて変更。
(function($){ $(function(){ fontsizeChange(); }); function fontsizeChange(){ var changeArea = $("#changeArea"); //フォントサイズ変更エリア var btnArea = $("#fontSize"); //フォントサイズ変更ボタンエリア var changeBtn = btnArea.find(".changeBtn"); //フォントサイズ変更ボタン var fontSize = [100,116,131]; //フォントサイズ(HTMLと同じ並び順、幾つでもOK、単位は%) var ovStr = "_ov"; //ロールオーバー画像ファイル末尾追加文字列(ロールオーバー画像を使用しない場合は値を空にする) var activeClass = "active"; //フォントサイズ変更ボタンのアクティブ時のクラス名 var defaultSize = 0; //初期フォントサイズ設定(HTMLと同じ並び順で0から数値を設定) var cookieExpires = 7; //クッキー保存期間 var sizeLen = fontSize.length; var useImg = ovStr!="" && changeBtn.is("[src]"); //現在クッキー確認関数 function nowCookie(){ return $.cookie("fontsize"); } //画像切替関数 function imgChange(elm1,elm2,str1,str2){ elm1.attr("src",elm2.attr("src").replace(new RegExp("^(\.+)"+str1+"(\\.[a-z]+)$"),"$1"+str2+"$2")); } //マウスアウト関数 function mouseOut(){ for(var i=0; i<sizeLen; i++){ if(nowCookie()!=fontSize[i]){ imgChange(changeBtn.eq(i),changeBtn.eq(i),ovStr,""); } } } //フォントサイズ設定関数 function sizeChange(){ changeArea.css({fontSize:nowCookie()+"%"}); } //クッキー設定関数 function cookieSet(index){ $.cookie("fontsize",fontSize[index],{path:'/',expires:cookieExpires}); } //初期表示 if(nowCookie()){ for(var i=0; i<sizeLen; i++){ if(nowCookie()==fontSize[i]){ sizeChange(); var elm = changeBtn.eq(i); if(useImg){ imgChange(elm,elm,"",ovStr); } elm.addClass(activeClass); break; } } } else { cookieSet(defaultSize); sizeChange(); var elm = changeBtn.eq(defaultSize); if(useImg){ imgChange(elm,elm,"",ovStr); imgChange($("<img>"),elm,"",ovStr); } elm.addClass(activeClass); } //ホバーイベント(画像タイプ) if(useImg){ changeBtn.each(function(i){ var self = $(this); self.hover( function(){ if(nowCookie()!=fontSize[i]){ imgChange(self,self,"",ovStr); } }, function(){ mouseOut(); }); }); } //クリックイベント changeBtn.click(function(){ var index = changeBtn.index(this); var self = $(this); cookieSet(index); sizeChange(); if(useImg){ mouseOut(); } if(!self.hasClass(activeClass)){ changeBtn.not(this).removeClass(activeClass); self.addClass(activeClass); } }); } })(jQuery);
※2011/2/27 エラーが起きていましたので上記スクリプトを修正しました。
※2011/2/26 上記スクリプトの記述を変更しました。
その他
画像タイプの場合はli
内の画像のロールオーバー&アクティブ用画像(形式はなんでもOK)を用意し、ロールオーバー前の画像ファイル名の最後にロールオーバー用文字列(初期設定_ov)を追加する。その画像をロールオーバー前の画像と同じフォルダに入れる。
(例)ロールオーバー前の画像がsample.gifならsample_ov.gifというファイル名にする。
あとがき
今回は初のプラグイン風?に作ってみました。プラグイン作れるっていうと、なんかカッコイイなっていう勝手なイメージがありまして。でも結果的にプラグインとして堂々と配布するほどの自信がないので、プラグイン形式で作っているのにその意味を成していないような変なつくりになりました。でもまーコピペで使いやすいのでコレでいいかなとは思っていますがね。
プラグイン風に作っていましたが、修正する際にあまりに意味がないと思いついでにプラグイン風をやめました。うん。こっちの方がいい気がする。
Comment
はじめまして。いつも参考にさせていただいてます。
非常に分かりやすい説明と端的なソースで、プログラムに疎い私でも何とかjQueryを活用できています。
『CSS切替なしでフォントサイズを変更するjQueryのスクリプト』についてですが、画像使用ヴァージョンについて質問があります。
初期の状態で「小」「中」「大」ボタンの「中」ボタンをアクティブ状態にし、尚且つ画像もアクティブ時の画像にしたいのですが、どのように設定すれば良いのかご教授いただけませんでしょうか?
単純にHTMLのソース上でアクティブ時の画像を置いても表示されませんよね?
急な質問で大変恐縮ではありますが、
どうぞ宜しくお願いいたします。
また、こういった質問にはお応え出来ないということであれば、その旨お伝えいただければ幸いです。
はじめまして、小林さん。
活用されているとのことで、お役に立ててうれしいかぎりです。
さて、フォントサイズ初期状態の設定を変更する方法についてですが、指定の変更箇所にありませんでしたね。たしかにこの設定はあった方が便利ですね。
ということでスクリプトを修正しました。ついでにイロイロ修正しましたので、スクリプトだけガラっと入れ替えて下さればと。ちなにに15行目の設定でフォントサイズの初期状態を変更できます。
多分これで問題ないかと思われます。
コメントを頂いたお陰で前より良くなったと思います。
ありがとう御座います。
初めまして
文字サイズ変更に、色をつけたくていろいろ探し、こちらにたどりつきました
まさにやりたかったことで、早速使ってみようとしたのですが、Chromeでだけなぜか動かないのです…
jQuery v1.4.2
Chrome v11.0.696.71
です
バージョンの問題なのでしょうか??
さきほど、Chromeで文字サイズが変更にならない件でコメントした者です
申し訳ありません…Chromeはローカルではクッキーを作れないと知らず、一生懸命ローカルでテストしていました
サーバーで確認したら動きました!
確認不足で申し訳ありませんでした
はじめまして、Tomomiさん。
私もはじめは同じことでかなりハマっていました。
わかり辛いですよね~。
取り敢えず動いたとのことで、良かったです。
はじめまして、
私みたいな素人でも簡単にできました。^^
解りやすく詳しい説明ありがとうございました。
今後も楽しみにしてます
はじめまして。こちらのスクリプトを利用させて頂きたいのですが、ライセンス形式は何になりますでしょうか? よろしくお願いいたします。
はじめまして、Nonaさん。
勉強がてらに書いているだけですので、常識的な範囲ならご自由にお使い下さい。
ライセンスが必要なプラグインを作った際にはその旨を書きますので。
また、使ってもらえると記事を書いたかいがありますし。
最近書いていませんがね・・・。
お返事頂きまして、ありがとうございます。
もちろん常識的な範囲というのはお約束いたします。
時々サイトを拝見させて頂いておりますので、また楽しい記事をお待ちしてます。
ありがとうございました。
はじめまして^^
文字サイズ変更できるスクリプトを探し回って、ここにたどり着き利用させていただきたいのですが、iframeの文字サイズをも変更するには、どのようにすればいいのでしょうか?
なにぶん始めたばかりの素人なので、ご教授よろしくお願いします。^^;
はじめまして。ありさんさん。
利用したいとのこと嬉しい限りです。
iframe内に対してもですね。ちょっと調べて対応してみました。
Demo
JavaScript
JavaScript内12行目がiframeの要素に対しての指定です。
大雑把ですので、分からないトコロがありましたらご連絡下さいませ。
ほんとうに素早い対応ありがとうございます。
自分でも、いろいろ調べながら試していたのですが、
できなくて、あきらめかけていたのですが・・^^;
参考にさせていただき、取り組みたいと思います^^
ご教授ありがとうございました。
今後とも、よろしくお願いいたします。
ありさんさん
自分もやったことの無いコトでしたの勉強になって良かったです。
また、それが喜んでもらえているのなら、なお良かったです。
そして、上手く動作することを影ながら願っています。
何かとお忙しいところを、ほんとうにありがとうございます^^
自分が作成しているものに実装したところ、
はじめ反応しなくなってしまい、あせりました^^;
他のjQueryも使用しているため、競合のようなものなのかと思い込んでしまい、
いろいろと試したりして気づきました。
複数のiframeを読み込んでいた為だったようです・・・?
なので、親フレーム側や子フレーム側にもidを振り当てて、
ご用意していただいたスクリプトも、
$(window).bind(“load”,function(){
var changeArea = $(“#changeArea”); //フォントサイズ変更エリア
var changeAreaiframe1 = $(“#iframe1”).contents().find(“#changeAreaIframe1”); //フォントサイズ変更エリア(最後findにiframe側の要素を指定)
var changeAreaiframe2 = $(“#iframe2”).contents().find(“#changeAreaIframe2”);
var changeAreaiframe3 = $(“#iframe3”).contents().find(“#changeAreaIframe3”);
var changeAreaiframe4 = $(“#iframe4”).contents().find(“#changeAreaIframe4”);
var changeAreaiframe5 = $(“#iframe5”).contents().find(“#changeAreaIframe5”);
var btnArea = $(“#fontSize”);
・・・
function sizeChange(){
changeArea.css({fontSize:nowCookie()+”%”});
changeAreaiframe1.css({fontSize:nowCookie()+”%”});
changeAreaiframe2.css({fontSize:nowCookie()+”%”});
changeAreaiframe3.css({fontSize:nowCookie()+”%”});
changeAreaiframe4.css({fontSize:nowCookie()+”%”});
changeAreaiframe5.css({fontSize:nowCookie()+”%”});
}
・・・
といった感じにして完成させることができましたが、
今の自分の知識や技量では、この上記記述をスマートに書くことができません^^;
でも、今回自分にとってもすごく良いお勉強になり、
自分の希望することが実現できたので、
ほんとうに感謝しております^^ありがとうございました。
また、なにかあったときには、お尋ねするかと思いますので、
今後ともよろしくお願いします^^
長文になってすみませんでした^^;
ありさんさん。
いえいえ。自分もイロイロ試せて面白かったです。
ちなみに、iframeを増やして試しましたが自分の環境では上手くいきました。
Demo
ヤッパリ競合か何かですかね?
まっ、取りあず出来たとのコトで良かったです。
前回は、iframeの件で大変お世話になりありがとうございました^^
で、今回はですね・・・^^;
LightBox系のJavaScriptライブラリ?Sexy LightBoxを利用して
表示させたiframeに対して、
こちらのスクリプトを利用し、フォントサイズを変更させることは可能でしょうか?
自分でも調べてみたりして、あ~でもないこ~でもないと試してはみたのですが、自力ではど~することも出来ません・・・
大変お手数をおかけして申し訳ないのですが、できればご教授いただければと思います^^;
ありさんさん。
読み込まれるHTML側にも同じようにJavaScriptの読み込みやID等の設定をすると上手くいくかと思います。
「Sexy LightBox」が見当たらなかったので、手っ取り早く同じようなプラグインを使用して試してみました。
Demo
上記の通り動作しているので、「Sexy LightBox」でも動作するかと思います。
度々のご教授ありがとうございます^^
おっしゃられるように、読み込まれるHTML側にも同じようにJavaScriptの読み込みやID等の設定をしたところ、
Sexy LightBoxにおいても、問題なくフォントサイズ変更することができました。^^
変な方向に難しく考えてしまっていて、読み込まれる側への設定思いつきませんでした^^;
素早い対応ありがとうございました。
はじめまして。
こちらのスクリプトを設置させていただいております。
実は現状のスクリプトを設置したところ、
‘attr(…)’ は Null またはオブジェクトではありません
このようなエラーがでてしまったのですが、
マウスオーバー時のエラーと思うのですが、設置仕方が間違ってるから
なのでしょうか?
追記です。詳細にエラーを書いてませんでした。
IEだけのエラーです。 メッセージ: ‘attr(…)’ は Null またはオブジェクトではありません。
ライン: 27 文字: 4 コード: 0
//画像切替関数
function imgChange(elm1,elm2,str1,str2){
elm1.attr(“src”,elm2.attr(“src”).replace(new RegExp(“^(\.+)”+str1+”(\\.[a-z]+)$”),”$1″+str2+”$2″)); }
この’attr( ‘が 名前の書き方が違うのか どうしたらいいのでしょうか?
Beckyさん。はじめまして。
記述されている情報だけでは判断がつきかねますが、可能性が高いと思われるのはスクリプトの10、11行目のボタン要素の指定かと思います。もしくはボタン要素のHTMLかと。
一度そちらを確認してみて下さい。それでも動作しない場合はもう少し詳しく教えてもらえるとエラーの理由がわかるかと思います。
どうも有り難うございます。
変更したものは、changeAreaをclass指定してるだけで他はデフォルト状態です。
■html側
文字サイズ
■js側
var changeArea = $(“.changeArea”);
var btnArea = $(“#fontSize”);
var changeBtn = btnArea.find(“.changeBtn”);
以下変更はありません。
#changeAreaでないとダメであれば書き換えますが、このぐらいしか判断ができません。
ここに htmlで書き込むと表示されないのですね。それならば
文字サイズ
[/html]
ul id=”fontSize” class=”header-nav2 clearfix”
li class=”sizemoji”>文字サイズ
li>img class=”changeBtn” src=”images/common/nav_st.gif” alt=”標準” />/li>
li>img class=”changeBtn” src=”images/common/nav_larg.gif” alt=”大” />/li>
/ul>
Syujiさん 解決しました。
単なるミスで、ボタンの数を二つにしたために、arrayの数を変更してなかっただけのようです。
お騒がせしてすみません。ここのコメントにタグが書き込めなくて、
タイプミスのように書いてしまいましたが、消しておいてください。
ご迷惑かけてすみません。とても楽に使えそうです。
Beckyさん。解決したようで良かったです。
使って貰えると作って良かったと思いますので、嬉しいかぎりです。
初めまして!
文字の大きさを変更するのに、複数のCSSを用意しなくてもいいものを探してたどり着きました。
HTML内にブログのRSSを自動表示させているのですが、その部分の文字サイズをどうしても変えることができません。ちなみに自動表示はこちらのサービスを利用しています(このサービスでなくてもいいのですが)
http://feed.mikle.com/
自動表示のサービス内で文字サイズを決めているので変更されないのかな…と思ったのですが、文字サイズの指定部分を削除しても変更されません。
iframe版を改変すればいいのだろうか…などいろいろやってみたのですが、なにぶんプログラム関係は全くの素人で、お手上げ状態です。
何とか方法はないものか…と思っています。どうかお力お貸しいただけませんでしょうか?よろしくお願いいたします。
はじめまして。ふなよさん。
上記のRSS自動表示サービスは記述のとおりiframeを使用しておりますので、少しJavaScriptを変更しなくてはいけません。
以下がiframe使用時のデモとJavaScriptです。
Demo
JavaScript
JavaScript内12行目がiframeの要素に対しての指定です。
わかりづらいようであれば再度ご連絡ください。
素早い回答とデモまで、ありがとうございます!!
早速、別ファイルに自動表示サービスのコードを貼り付け、idを指定し、iframe表示にしてやってみました。が、動作はするのですが、肝心の文字サイズが変わりません。
http://rss.tc/
↑のサービスだと、文字サイズを変更できました!…ので、RSS自動表示サービスの仕様のようです(文字サイズ固定?)。
サービスを変えるか、他の手段で実現したいと思います。
ありがとうございました!!
ふなよさん。
すみません。クロスドメイン制約のことをスッカリ忘れていました。
別ドメインの場合はJavaScriptで簡単にはアクセス出来ないんですよね。
ちょっと調べましたが今のところ出来るかどうか分かりませんでした。
文字サイズの変更が出来たサービスはiframeでは無いので出来たみたいですね。
お役に立てずすみません。
わあ!お忙しいのに、何度もありがとうございます!
クロスドメイン制約ってなに?みたいな感じでしたが、いろいろ考えて、iframeで表示させなければいいのか!と思いいたり、Google Ajax Feeds APIを使うことにしました(さっき存在を知りました…)。とりあえずざっと入れてみたところ、ばっちり、文字サイズを変更することが出来ました!!
あああ、すっきりした~~~!
Syujiさんの範疇ではないのに、食い下がってすみませんでした。本当に感謝です!スクリプト、いただいていきます。ありがとうございました。
初めまして
こちらのスクリプトを設置させていただいております。
大変助かっております。
ただ、ワケあってサイトの文字コードが「Shift-JIS」でなければいけないのですが、
こちらで提供されているjQueryは「utf-8」でないとIEでエラーが出てしまいました。。
ローカルで作業しているときでは問題ないのですが、
サーバーにアップしたときだけエラーになってしまいます。。
なにか良い回避方法がございませんでしょうか。
お忙しいところ申し訳ありませんがご教授のほど
お願い致します。
yu-yaさん。はじめまして。
2バイト文字が入ってるとダメだったと思いますので、日本語で記述されているコメント等を削除して試してみて下さい。
日本語部分を削除したら問題なく表示されました!
お忙しいところありがとうございます!
yu-yaさん。
解決したようで良かったです。
自分も前に同じ問題に引っかかった事がありました。
単純だけどこういうのは結構ハマったりしますからね。
とても便利なスクリプトありがとうございます!
無事設置出来たのですが、なぜかアクティブ時の画像が出ません・・・
変えた部分と言えば「フォントサイズ変更ボタンエリア」と「フォントサイズ変更ボタン」のID名のみです。
ちなみにwordpressで作ったサイト内に設置しています。
アクティブ時の画像が出ない件に関してアドバイスいただければ幸いです。
よろしくお願いいたします!
P.S.ちなみに「フォントサイズ変更ボタンのアクティブ時のクラス名」というのはなんでしょうか?
もしかしたらここでひっかかっている気が・・・
momoさん。
どこでエラー起きているか分からないとチョット判断がつかないですね。
分かる範囲で考えてみます。
「フォントサイズ変更ボタン」はクラスで設定していますよね?IDだと重複しますので。
wordpressはあまり関係ないような気がします。
「フォントサイズ変更ボタンのアクティブ時のクラス名」はアクティブなボタンに自動的にクラスを追加する設定です。
これは主にテキストタイプ用に用意しているので、関係ないかと思います。
以上のコトと考えると可能性は以下があるかと思います。
1.「フォントサイズ変更ボタン」をID設定している。
2.ロールオーバー用の画像名が違っている。
3.他のJavaScriptと競合が起きている。
cookieが効いていないのかとも思いましたが、それならば全て動作しないはずです。
正直全部違っている気がするので、治らなければエラーの箇所だけでも教えてもらえると、少しは判断出来るかと思います。
素早いご回答感謝いたします!
1.2.ともに間違いがありませんでしたので3かなと思い考えた所・・・
smartRollover.js
http://css-happylife.com/archives/2007/0621_0010.php
を使用しているのですが、その動作用に画像名を
通常画像→○○_off.jpg
ロールオーバー→○○_ov.jpg
としておりました。
通常画像の_offがいけないかも、と思いとってみると
ビンゴ!でした!
おかげさまで問題なく動作するようになりました。
ありがとうございました!!!
momoさん。
自分が想像していた感じの競合とは違ってたので、競合ではないかなと思っていたのですが、なるほど、そういうことでしたか。
とにかく動作したとのこで良かったです。
画像ボタンでの切り替えを探していたのですが、
選択後画像がオンになっているものがなかなか見つからず困っておりました。
設置も簡単で非常にわかりやすかったです。
chromeの件も勉強になりました。ありがとうございました!
かえるさん。
お役に立てたようで良かったです。
まさしく探していた情報でした。
記事もわかりやすかったです。ありがとうございました。
初めまして。会社のホームページ作成を担当しています。
ホームページを作り直しているのですが、その際に文字サイズの変更ができるようなものを・・・という提案がありこちらにたどり着きました。
四苦八苦しながらどうにかサイズ変更ができるようになったのですが、同じページにあるスライドショーと連動してフォントのサイズが小→中→大と変更してしまいます。
何が原因なのでしょうか?原因がわからず困っています。
3/13にコメントしたyamaです。
自分で解決しました!有難うございました。
yamaさん。
すみません。
なぜかメールが届いておらずコメントに気づけなかったです。。。
とりあえず解決したようで良かったです。
設定も楽で重宝させてもらっています。
最近、フォントサイズをrem指定で行うことが多々あり、こちらのフォント切替を利用したのですが、GoogleChromeで見ると、文字の大きさがものすごくばらばらに表示されてしまいます。
(たとえば「小」に100%指定していても、「小」サイズですでにかなり文字の大きさになっている状態)
こちらのスクリプトはremでの表示には対応していないのでしょうか?
(IEやFireFoxでは問題なさそうだったので、Chromeとremの相性の問題なのでしょうか・・・)
tomoさん。
ご返事遅れてすいません。
最近全然更新していませんでしたので、
仕組みを忘れちゃっていますが、
基本ほ%指定することを前提に作っていた気がします。
ただ、細かい文字サイズの調整が無ければ、px でも rem でもいけるかと思います。
例えば rem で対応するのであれば、以下のようにオプションを指定してもらえればと思います。
——————–
font: {
unit: ‘rem’,
size: [1, 1.2, 1.4],
def : 0
},
——————–
あと、同じかもしれませんが github に上がっているのが最新になります。
https://github.com/syuji-higa/jquery.noChangeCssFontSizeChanger
こちらで一度ご確認をお願いします。
『JavaScript』
の所なんですが、それをテキストエディンタか何かで、.jsにして、サーバーにアップロードして、それを、HTML内に喜寿釣ればいいんですか?
初心さです。よろしくお願いたします。
2001Yさん。
ご返事遅れてすみません。
基本的にそちらで大丈夫です。
GitHubに最新版を上げていますので、
そちらをダウンロードすると分かりやすいかと思います。
https://github.com/syuji-higa/jquery.noChangeCssFontSizeChanger
よろしくお願いします。