• 締切済み

フォントサイズ変更ボタンについて

babu_babooの回答

回答No.8

#3です。なにかのさんこうになるかもしれないじょ。ばぶぅ! がぞうは、bottan_image_small_0.pngのすうじを0から2まで よういしてちょ! iframeのもじのへんこうは、fujillin さんのものをしゃくようしたじょ! もんだいがあるなら、かれにといあわせしてちょ! こまかいところに、みすがいっぱいあるかもしれないじょ! まぁ~ぷろなようですから、こまかいところは、じぶんでなおしてね! ばぶぅ~! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <title>TEST</title> <style type="text/css">  #size_list { list-style-type:none; margin:0; padding:0; text-align:right; }  #size_list li { display:inline; }  #size_list li img { border:0px none; } </style> <ul id="size_list">  <li><img src="bottan_image_small_0.png" alt="小"></li>  <li><img src="bottan_image_midium_0.png" alt="中"></li>  <li><img src="bottan_image_large_0.png" alt="大"></li> </li> <script type="text/javascript"> //実行時には、全角空白文字は、半角に変換して下さい。 //@cc_on @set @F = (@_jscript_version >= 5.5) var _HOVER_COLOR = '#888'; var _CLICK_COLOR = '#d88'; var M0, M1, M2; /*@if(@F) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/  'load', function () {   /*@if(@F) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/    'load', arguments.callee, false);   var size = getCookie('fsize') || 1;   M2 = document.getElementById('size_list').getElementsByTagName('IMG');   M0 = M2[size];   test0(null, 1, M0);      document.getElementById('size_list')./*@if(@F) attachEvent('on'+ @else@*/ addEventListener(/*@end@*/    'click', test0, false);   document./*@if(@F) attachEvent('on'+ @else@*/ addEventListener(/*@end@*/    'mouseover', test1, false);  }, false); /*@if(@F) attachEvent ('on' + @else@*/ addEventListener (/*@end@*/  'unload', function () {   /*@if(@F) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/    'unload', arguments.callee, false);   document.getElementById('size_list')./*@if(@F) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/    'click', test0, false);   document./*@if(@F) detachEvent('on'+ @else@*/ removeEventListener (/*@end@*/    'mouseover', test1, false);     }, false); function test0 (evt, f, e) {  if (!f) {   e = evt./*@if(@F) srcElement @else@*/ target /*@end@*/;   if ('IMG' != e.tagName) return;   if (M0) {    M0.src = M0.src.replace(/_\d\.png$/, '_0.png');    M0.style.backgroundColor = '';    M0 = null;   }  }  e.src = e.src.replace(/_\d\.png$/, '_2.png');  e.style.backgroundColor = _CLICK_COLOR;  M0 = e;  if ('小' == e.alt) set('small');  if ('中' == e.alt) set('medium');  if ('大' == e.alt) set('large'); } function test1 (evt) {  var e = evt./*@if(@F) srcElement @else@*/ target /*@end@*/;  if (M1) {   M1.style.backgroundColor = (M1 == M0) ? _CLICK_COLOR: '';   M1.src = (M1 == M0) ? M1.src.replace(/_\d\.png$/, '_2.png'): M1.src.replace(/_\d\.png$/, '_0.png');   M1 = null;  }  if ('IMG' != e.tagName) return;  var p = (function(o,i) { return o ? o.id == i ? o: arguments.callee(o.parentNode, i): null;})(e,'size_list');  if (!p) return;  e.style.backgroundColor = _HOVER_COLOR;  e.src = e.src.replace(/_\d\.png$/, '_1.png');  M1 = e; } function set(s) {  var frames = document.getElementsByTagName('IFRAME');  var cnt = 0;  setCookie('fsize', {small:0, medium:1, large:2}[s], 30);  setFont(document,s);  while (frames[cnt++])   setFont((frame[i].contentDocument)? frame[i].contentDocument:frame[i].contentWindow.document,s); } function setFont(obj,siz) {  obj.getElementsByTagName('BODY')[0].style.fontSize = siz; } function getCookie( name ) { name = encodeURIComponent( name ).replace( /([.*()])/g, '\\$1' ); var value = document.cookie.match( RegExp ( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) ); return value ? decodeURIComponent( value[1] ) : ''; } function setCookie ( name, value, day, path, domain ) {  return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +   '; ' + 'expires=' + new Date( (new Date) - 86400000 * -day ).toUTCString() +   '; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) +   ( domain ? 'domain=' + encodeURI ( domain ) + '; ': ''); } </script>

fablies21
質問者

お礼

バブーさま レス遅くなって誠に申し訳ありません! ご回答大変ありがとうございました。 イメージどおりでとてもすばらしいです。 ちょっとどころか、だいぶ参考になりました。 ただ、同一ページのiframe内フォントサイズが変えられず、 そこだけ、困っております。 お時間ございましたら、教えていただければ大変うれしく思います。 どうぞ宜しくお願い致します。

関連するQ&A

  • フォントサイズを変更するボタンについて

    JQUERYでフォントサイズを変更するボタンを導入したのですが、CSSでフォントサイズを指定していると変更ボタンを押しても変更しません。 下記のようなソースなのですが、CSSのimportantのような事はJQUERYでは出来ないのでしょうか? 優先順位はCSSより低いのでしょうか? <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul+ul a").textresizer({ target: "#contentsleft,#contentsright,.copyright,address",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> また、最近あまり見なくなったのですが、WEBのプロは閲覧者にサイズは決めてもらったほうが良いのでもう今後は使わない方向に行っているのでしょうか?

  • フォントサイズを変更するスクリプト

    こんにちは。 早速ですが、フォントサイズを変更するスクリプトを探していて、見つけたのが、 http://www.openspc2.org/JavaScript/library/string/fontsize_set/index.html ですが、これでやるとサイズを変更した時、テーブル内のフォントは変更できないのでしょうか? 初心者のためどこをどう修正して良いかわからなかったので、質問させていただきました。オンマウスではなく、クリックでサイズを変更したいと思います。 初心者のヒコっ子ですが、宜しくお願い致します。

  • アクティブ画像があるフォントサイズ変更ボタン

    こんにちは。 javascriptで、フォントサイズを変更出来るようにしたいです。 「大」「中」「小」という3種類のボタンがあり、デフォルト状態を「中」に設定する予定です。 で、文字サイズを変更したいユーザーが「大」なり「小」なりのボタンをクリックすると文字サイズが変更できるようにしたいのですが、 そのときにそれぞれの文字サイズ変更ボタンのマウスオーバー時とアクティブ時(もし文字サイズの「大」を選んだのならば「大」のアクティブ画像)に画像を変えたいのです。 いろいろ探してはいるのですが、なかなか難しく困っています。。 どなたか方法や参考サイトなどをお教え頂けませんでしょうか。 どうぞよろしくお願い致します。

  • エクセル2007で文章を打ち込む際のフォントとフォントサイズの変更のやり方について

    こんにちは。 OSはWIN VISTA いまだにエクセル2007の若葉マークです。当方のエクセル2007の場合、デフォルトでは「フォント:MSPゴシック フォントサイズ:11」の設定です。ある文章を打ち込んで、その文章全体の文字の書体やサイズを変えたい場合、変えたいセルを全部選択して、変えたいフォントやフォントサイズに変更するという 手順はさすがに私でも分かります。文章を全部打ち込んでから先程の手順で変更するのではなく、希望のフォントやフォントサイズに変更してから文章を打つ場合、その文章を打ち終わるまでは希望のフォントやフォントサイズで打てますが、打ち終わって他のセルに別の文章を打とうとすると、また「フォント:MSPゴシック フォントサイズ:11」 に戻ってしまいます。この点、以前の質問投稿でお尋ねした際は、ある 親切な方が「ディフォルトで変更したい場合には『Office』ボタンから『Excellのオプション』をクリックし、『基本設定』の項で『新しいブックの作成時』の内容を変えることでしょう。」とのご助言をいただきました。ただ、当方のエクセル2007の画面左上のOFFICEボタンをクリックして「Excellのオプション」以下の項目が現れないのですが..。 初歩的なお尋ねですみません。

  • フォントのサイズ変更

    今無料ソフトで日記をつけているのですが、本文中の文字のサイズを一部だけ大きくする方法について <FONT size="1"> などで変更するようにとアドバイスが載っていましたが、この<FONT、、、をどこでどうやって入力して文字を変更するのかわかりません。 パソコン初心者なもので恥ずかしい質問かもしれませんが、よろしくお願いします。

  • phpEclipseでフォントサイズの変更出来ない

    こんにちは。さんたと申します。 Eclipse 3.5 + PDT (Eclipse 3.5 Galileo ガリレオ)を使用致しまして、実行環境が整い、動作確認もできました。 フォントサイズとフォントを変更したいのですが、どのようにしたらできますでしょうか? ウィンドウ→設定→一般→外観→色とフォント をするのですが、PHPのところは空?で、右側のボタンもグレーになり、選択できないようになっております。 デフォルトのフォントサイズが小さいので大きくしたいのですが、、、。 フォントも変更したいです。 宜しくお願い致します。 失礼致します。

    • ベストアンサー
    • PHP
  • 編集長14のフォント名とサイズが変更できない

    パーソナル編集長Ver.14のフォント名とフォントサイズがある日突然変更できなくなりました。解決方法を教えて下さい。 ※OKWAVEより補足:「ソースネクスト株式会社の製品・サービス」についての質問です。

  • フォントの変更

    現在フォントの変更にてこずっています。 テキスト入力Field(名前はsContents)を用意してそこに書き込まれたものの書体をボタンが押されたときに変更したいのですが、 ボタンのアクションスクリプトに on (press) { myTextFormat = sContents.getTextFormat(); myTextFormat.font == "_明朝"; sContents.setTextFormat(myTextFormat); } では変わりません。 どうすればいいでしょうか??

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

    表の文字サイズ変更ボタンについて教えてください。 以前、以下の内容で質問したのですがサンプルを掲載しなかったので再度質問させてください。大きな表をひとつ作成してその中をメニューボタンやコラムの場所用に分割配置したページを作成しました。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
  • サンダーバーとのフォントサイズ

    今までWindowsLiveメールを使っていましたが、 サンダーバードを使うようにしました。 そこで質問があります。 WindowsLiveメールでフォントサイズを10でメールを作成していましたが、 サンダーバードで同じフォントでサイズを10にするとかなり小さく表示されてしまいます。 1.相手に届くときは文字の大きさは一緒でしょうか? 2.フォントサイズを10のままにして、画面に表示される大きさは変えられるでしょうか?  ただしそのときだけでなく、メール作成画面では毎回その大きさで。 3.WindowsLiveメールだと特定の文字だけフォントサイズを数字を指定して変更できました。  サンダーバードですとフォントサイズを拡大します・フォントサイズを縮小します、  というボタンがあるだけです。特定の文字だけ数字でフォントサイズを変更できるでしょうか?