fontsize.jsでのhtmlフォントサイズ設定について

このQ&Aのポイント
  • fontsize.jsを使用して、htmlのフォントサイズの変更を行っています。しかし、デザイン上変更したくない箇所の処理方法がわからず困っています。
  • 指定したフォントサイズでヘッダーやテーブル内など一部の箇所を変更せずに表示したいのですが、うまい方法が分かりません。
  • フォントサイズの変更はfontsize.jsの中で行っており、クッキーの処理や画像の処理なども含まれています。
回答を見る
  • ベストアンサー

fontsize.jsでhtmlの大中小の設定を行っているのですが、ど

fontsize.jsでhtmlの大中小の設定を行っているのですが、どうしても大きさをデザイン上変更したくない文字の処理がわからなく困っております。 以下の設定なのですが、ヘッダー等に大きくすると崩れてしまう箇所があったり、 tableの中でも同様な箇所を変更しないようにしたいのです。 【html】 <p class="mess2"><img src="../common/images/title_size.gif" alt="サイズ" /><a href="#" id="smallLink"><img src="../common/images/bu_small.gif" alt="" id="small" /></a><a href="#" id="middleLink"><img src="../common/images/bu_middle_o.gif" alt="" id="middle" /></a><a href="#" id="largeLink"><img src="../common/images/bu_large.gif" alt="" id="large" /></a></p> JSファイルの設定箇所 以下のほかにクッキーの処理、画像の処理、初期化の処理、load時の処理が記載 var now_size = 'middle'; // フォントサイズを小に変更 function smallFontSize(){ var size = "small"; setFontSize(size); changeImage(size); setCookie("@fontsize", size); } // フォントサイズを中に変更 function middleFontSize(){ var size = "middle"; setFontSize(size); changeImage(size); setCookie("@fontsize", size); } // フォントサイズを大に変更 function largeFontSize(){ var size = "large"; setFontSize(size); changeImage(size); setCookie("@fontsize", size); } // 指定されたフォントサイズに変更する function setFontSize(size){ var fontSize; var smallFontSize; switch(size){ case "small": fontSize = '11px'; smallFontSize = '10px'; break; case "middle": fontSize = '12px'; smallFontSize = '11px'; break; case "large": fontSize = '14px'; smallFontSize = '12px'; break; } $('a,p,td,th,li,dt,dd,pre').css("font-size", fontSize); $('.smallText *').css("font-size", smallFontSize); }

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

変更したくない箇所にclass="sonomama"とか付けられれば、 例<th class="sonomama"> jQueryのセレクターで除外出来るのでは、.. $('a,p,td:not(.sonomama),th:not(.sonomama),li,dt,dd,pre').css("font-size", fontSize); みたいに、 あるいは、CSS定義の方で !important を付けるとか

tomo0117
質問者

お礼

ご連絡遅くなりすいません。 !importantでうまくいきました。 ありがとうございます。

関連するQ&A

  • 文字サイズを変更できない

    web制作していて、文字サイズ変更の機能をつけました。 * * * * * * * * * * * * * * * * <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> </div> * * * * * * * * * * * * * * * * IEとfirefoxで確認したところ、問題なくサイズ変更されていたんですが、制作を進めていったら、いきなり変更しない箇所がでてきてしまいました。 全体のフォント指定はemでやっています。 何が原因なのでしょうか? 言葉足らずな部分があるかもしれませんが、どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • javascriptで文字サイズ変更-cssが効かない

    こちらのサイトのスクリプトを使用してやってみています。 http://www.nrym.org/storeroom/neta/01_fontsize/ line-heightを各サイズで指定したいのと、このスクリプトでは縮小率拡大率%指定になっているのですが、これをピクセル指定にしたいのです。 そこで下記のように書き換えました。 fontchanger.js ------------------------------------------ show: function() { var id = this.id; document.writeln([ '<div id="' + id + '">', '<img src="moji.gif" width="50" height="20" alt="文字の大きさ" class="moji" />', '<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする"><img src="moji_s.gif" width="20" height="20" alt="小" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す"><img src="moji_m.gif" width="20" height="20" alt="中" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする"><img src="img/size_l.gif" width="20" height="20" alt="大" class="moji" /></a>', '</div>' ].join("\n")); Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this)); Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this)); Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this)); }, onClickSmall: function(e) { this.change('10px' ); }, onClickMedium: function(e) { this.change('12px'); }, onClickLarge: function(e) { this.change('14px'); } }; css ------------------------------------------------- body{ font-size:12px; line-height:14px; } #fffsss{ width:100px; margin:0; padding:0; } #fontChanger{ } #fontChanger-small{ font-size:10px; line-height:12px; } #fontChanger-medium{ font-size:12px; line-height:14px; } #fontChanger-large{ font-size:14px; line-height:16px; } html ------------------------------- <div id="fffsss"> <script type="text/javascript"> <!-- FontChanger.start('js/fontChanger'); //--> </script> </div> ----------------------------------------------------- これがサイズは変更できるのですが、cssが効きません。 line-heightを指定できて、単位は全てピクセルにするにはどうしたらいいでしょうか?よろしくお願い致します。

  • 文字サイズ変更のjavascriptが動かない

    現在、サイトを文字サイズ変更できるようにトライしているのですが、javascriptは全くの初心者なのでよくわかりません。 ページによって動かないので、何がいけないのかアドバイスお願いします! 動くのは http://○○.jp/○○.html 動かないのは http://○○.jp/○○/○○.html のページです。 以下の記述は動かない方に設定しているものです。 ************* javascript ************* function imgver(num){ var element =document.getElementById("fontSize"); var writeHtml = ''; if( num == 0){ writeHtml +='<!-- --><li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li><!-- -->'; } else{ writeHtml +='<!-- --><li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li><!-- -->'; } element.innerHTML = writeHtml; } ************* html ************* <ul id="fontSize"><!-- --><li><a href="javascript:void(0)" onclick="font('16px');imgver(0)"><img src="../common/l.png" alt="大" width="25" height="26" border="0" /></a></li><!-- --><li><a href="javascript:void(0)" onclick="font('12px');imgver(1)"><img src="../common/m.png" alt="中" width="25" height="26" border="0" /></a></li><!-- --><li><a href="javascript:void(0)" onclick="font('9px');imgver(2)"><img src="../common/s.png" alt="小" width="25" height="26" border="0" /></a></li><!-- --></ul> ******************************************** 画像は表示されるのですが、全く動きません。 よろしくお願いします!

  • javaで文字の拡大、縮小

    とある地方自治体を管理している素人です。 何を触ってしまったのかHP内の文字を大きくする小さくするの、機能でエラーが発生するようになり、機能しなくなりました。 <TABLE border=0 cellSpacing=0 cellPadding=3 width=330 align=center> <TBODY> <SCRIPT type=text/javascript> <!-- var Default = "2;" var tags = "new" Array('div','td','tr'); var sizing = "new" Array('xx-small','x-small','small','medium','large','x-large','xx-large'); function FontChange(target,tarF) { if (!document.getElementById) return var dore = "document,tarS" = null,fontSize = Default,value,su,cTags;fontSize += tarF; if (fontSize < 0) fontSize = "0;" if (fontSize > 6) fontSize = "6;" Default = "fontSize;" if (!(tarS = dore.getElementById(target))) tarS = "dore.getElementsByTagName(target)[0];" tarS.style.fontSize = sizing[fontSize]; for (value = 0 ; value < tags.length ; value++) { cTags = "tarS.getElementsByTagName(tags[value]);" for (su = 0 ; su < cTags.length ; su++) cTags[su].style.fontSize = sizing[fontSize]; } } //--> </SCRIPT> <TR> <TD bgColor=#ffdddd vAlign=center width=200> <DIV align=right> <TABLE border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD> <STRONG> <FONT color=#333333> <IMG border=0 hspace=3 alt="" src="arrow_01.gif"> </FONT> </STRONG> </TD> <TD> <STRONG> <FONT color=#333333>文字の大きさ&nbsp;&nbsp;</FONT> </STRONG> </TD> </TR> </TBODY> </TABLE> <STRONG> </STRONG> </DIV> </TD> <TD bgColor=#ffdddd width=65> <DIV align=right> <STRONG> <FONT color=#333333> <A href="javascript:FontChange('body',1)"> <IMG border=0 hspace=3 alt=文字を大きく vspace=3 src="font_big.gif"></A> </FONT> </STRONG> </DIV> </TD> <TD bgColor=#ffdddd width=65> <DIV align=right> <STRONG> <FONT color=#333333> <A href="javascript:FontChange('body',-1)"> <IMG border=0 hspace=3 alt=文字を小さく vspace=3 src="font_small.gif"> </A> </FONT> </STRONG> </DIV> </TD> おそらくこの部分に記述してある事の何かが駄目なんでしょうが、どこがどう駄目なのかまったくわかりません。 どなたかご教授をお願い致します。

    • ベストアンサー
    • Java
  • 文字の大きさ変更

    ページ全体の文字の大きさを変更できるボタンを設置したいと思い 検索で調べて柿のようなスクリプトを作ったのですが、 IE6だと反映されません。どうしてでしょうか? (長くてすみません) <SCRIPT language="JavaScript"> <!-- var Default=3; var tags = new Array('div','td','tr'); var sizing = new Array('70%','80%','90%','100%','110%','120%','130%'); function FontChange(target,tarF){ if (!document.getElementById) return var dore = document,tarS = null,fontSize =Default,value,su,cTags; fontSize += tarF; if (fontSize < 0) fontSize = 0; if (fontSize > 6) fontSize = 6; Default = fontSize; if (!(tarS = dore.getElementById(target))) tarS = dore.getElementsByTagName(target)[0]; tarS.style.fontSize = sizing[fontSize]; for (value = 0 ; su < tags.length ; value++){ cTags= tarS.getElementsByTagName(tags[value]); for (su = 0 ; su < cTags.length ; su++) cTags[su].style.fontSize = sizing[fontSize]; } } //--> <a href="javascript:FontChange('body',1)"><img src="images/big.jpg" alt="" border="0" /></a> <a href="javascript:FontChange('body',-1)"><img src="images/small.jpg" alt="" border="0" /></a> それから出来ればボタン大中小で押せばサイズがそのサイズ で決まっているのだいいのですが、参考になるサイトは ないでしょうか?

  • javascriptで文字の拡大、縮小

    とある地方自治体のHPを管理している素人です。 何を触ってしまったのかHP内の文字を大きくする小さくするの、機能でエラーが発生するようになり、機能しなくなりました。 IEの左下の所に、「ページでエラーが発生致しました」と、出ます。 <TABLE border=0 cellSpacing=0 cellPadding=3 width=330 align=center> <TBODY> <SCRIPT type=text/javascript> <!-- var Default = "2;" var tags = "new" Array('div','td','tr'); var sizing = "new" Array('xx-small','x-small','small','medium','large','x-large','xx-large'); function FontChange(target,tarF) { if (!document.getElementById) return var dore = "document,tarS" = null,fontSize = Default,value,su,cTags;fontSize += tarF; if (fontSize < 0) fontSize = "0;" if (fontSize > 6) fontSize = "6;" Default = "fontSize;" if (!(tarS = dore.getElementById(target))) tarS = "dore.getElementsByTagName(target)[0];" tarS.style.fontSize = sizing[fontSize]; for (value = 0 ; value < tags.length ; value++) { cTags = "tarS.getElementsByTagName(tags[value]);" for (su = 0 ; su < cTags.length ; su++) cTags[su].style.fontSize = sizing[fontSize]; } } //--> </SCRIPT> <TR> <TD bgColor=#ffdddd vAlign=center width=200> <DIV align=right> <TABLE border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD> <STRONG> <FONT color=#333333> <IMG border=0 hspace=3 alt="" src="arrow_01.gif"> </FONT> </STRONG> </TD> <TD> <STRONG> <FONT color=#333333>文字の大きさ&nbsp;&nbsp;</FONT> </STRONG> </TD> </TR> </TBODY> </TABLE> <STRONG> </STRONG> </DIV> </TD> <TD bgColor=#ffdddd width=65> <DIV align=right> <STRONG> <FONT color=#333333> <A href="javascript:FontChange('body',1)"> <IMG border=0 hspace=3 alt=文字を大きく vspace=3 src="font_big.gif"></A> </FONT> </STRONG> </DIV> </TD> <TD bgColor=#ffdddd width=65> <DIV align=right> <STRONG> <FONT color=#333333> <A href="javascript:FontChange('body',-1)"> <IMG border=0 hspace=3 alt=文字を小さく vspace=3 src="font_small.gif"> </A> </FONT> </STRONG> </DIV> </TD> おそらくこの部分に記述してある事の何かが駄目なんでしょうが、どこがどう駄目なのかまったくわかりません。 どなたかご教授をお願い致します。

  • CSSで文字指定:あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか?

    文字サイズをCSSで指定する方法についての質問です。 同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。 そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。 macintosh.css windows.css windowsIE.css ...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。 CSSファイルの中身は、 macintosh.css .small { font-size: 10px; } /* 小さめ */ .middle { font-size: 12px; } /* 中くらい */ .large { font-size: 14px; } /* 大きめ */ windowsIE.css .small { font-size: 0.8em; } /* 小さめ */ .middle { font-size: 0.9em; } /* 中くらい */ .large { font-size: 1em; } /* 大きめ */ ...といった具合です。 このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、 全てのh2タグに <h2 class="middle"> と記述することになってしまいます。 これは煩雑なので一括指定したいと考えます。 すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。 macintosh.css h2 { font-size: 12px; } windowsIE.css h2 { font-size: 0.9em; }  ...のようなことです。 そうではなく、h2に .middle(=中くらい)で指定した文字サイズをそのまま受け継がせる方法はないでしょうか? h2 { class="middle" } 変な書き方ですが、意図を汲み取っていただけるでしょうか。 このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。

    • ベストアンサー
    • HTML
  • javascriptで文字サイズの変更

    HP初心者です。 書籍通りに作ってみてのですが文字は変更されるのですが、 作った大中小の画像?までクリックするとズレてしまいます。 文字だけが変更されるのを希望してます。 ↓見てやって下さい http://www.d-judge.jp/d-judge/test.html ソースは HTML↓ <div id="header"> <div class="font_size"> <ul> <li><img src="images/txt_size.gif" alt="文字サイズ" width="68" height="14" /></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('l')" class="textL"><span>大</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('m')" class="textM"><span>中</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('s')" class="textS"><span>小</span></a></li> </ul> </div> <p>ああああああ テストです。</p> </div> css↓ /* 文字サイズ ----------------------------*/ #header .font_size { margin: 2.5em 0px 0px; position: absolute; left: 86px; top: -2px; width: 250px; text-align: right; height: 24px; } #header .font_size li { padding: 0px 0px 0px 1em; float: left; list-style: none; } #header .font_size li img { margin-top: 5px 0; } #header .font_size ul li a { height: 24px; width: 24px; display: block; } #header .font_size ul li a span { display: none; } #header .font_size ul li .textL:link, #header .font_size ul li .textL:visited, #header .font_size ul li .textL:active { background-image: url(images/text_L.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textL:hover { background-image: url(images/text_L_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:link, #header .font_size ul li .textM:visited, #header .font_size ul li .textM:active { background-image: url(images/text_M.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:hover { background-image: url(images/text_M_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:link, #header .font_size ul li .textS:visited, #header .font_size ul li .textS:active { background-image: url(images/text_S.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:hover { background-image: url(images/text_S_o.gif); background-repeat: no-repeat; background-position: left top; } javascript↓ /*フォントサイズ変更*/ function changeFsize(fontsize) { var change = document.getElementsByTagName("body")[0]; switch(fontsize) { case "s": var percent = "62.5%"; break; case "m": var percent = "75%"; break; case "l": var percent = "85%"; break; } change.style.fontSize = percent; } です。 どなたかお分かりになる方宜しくお願いしますm(_ _ )m

  • 文字サイズ変更ボタンでサイズが思うように制御できません

    文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> 元々の文字サイズは%で制御しているのですが、大→中(=標準)に戻した時、元々のサイズとは異なるサイズになってしまいます。 どうしてでしょうか? 標準サイズを100%とし、中サイズも100%と記述しています。

    • ベストアンサー
    • HTML
  • 表の文字サイズ変更ボタンについて教えてください。

    表の文字サイズ変更ボタンについて教えてください。 以前、以下の内容で質問したのですがサンプルを掲載しなかったので再度質問させてください。大きな表をひとつ作成してその中をメニューボタンやコラムの場所用に分割配置したページを作成しました。jqueryをアレンジして、文字サイズボタン作成して動かしてみるのですが、表の中にある文字サイズが変更されません。表を使用せずにネット上に出ているjsファイルを使用してテストページを作成するとうまく文字サイズが変わってくれるのですが・・・・? 以下がアレンジしたソースです。 <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/jquery.textresizer.js"></script> <script type="text/javascript" src="/jquery.cookie.js"></script> ul { list-style:none; } ul li { padding:0;display:inline; } ul li a { padding:3px 4px;text-decoration:none;color:#333;background:#dcdcdc;border:1px solid #505050; } ul li a:hover { background:#fafafa; } .small-text { font-size:x-small; } .medium-text { font-size:small; } .large-text { font-size:large; } .larger-text { font-size:x-large; } <script> $(function(){ $("ul.textresizer a").textresizer({ target: "#content", sizes: [ ".8em", "1em", "1.5em", "2em" ] }); }); </script> </head> <body> <BODY> <div id="content"> <DIV id="container"> <div id="main"> <DIV id="header" align="center"> <TBODY> <TR> <TD align="right" nowrap style="font-size : 10px;"> <ul class="textresizer"> <li><a href="javascript:void(0)" class="small-text" title="Small">A</a></li> <li><a href="javascript:void(0)" class="medium-text" title="Medium">A</a></li> <li><a href="javascript:void(0)" class="large-text" title="Large">A</a></li> <li><a href="javascript:void(0)" class="larger-text" title="Larger">A</a></li> </ul> </TD> ・ ・ ・ </div> </div> </div> </div> 自分の希望としては、ボタンを押すごとに大きくなったり、小さくなったりしてほしいのですが・・・? よろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう