• 締切済み

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

ハテナでも質問させていただきましたが、まだ回答が得られないため、 こちらでも質問させていただきたく思います。 （http://q.hatena.ne.jp/1242894447　※急ぎのため、申し訳ございません。） 下記URLのソースを利用して、フォントサイズ変更ボタンを作っていますが、 Iframeの中の文字サイズ変更がうまくいきません。 http://htmldwarf.hanameiro.net/tools/FontSizeChanger.html 当方、ジャバスクリプト超初心者ですが、大変困ってます。 わかりやすく教えていただければ大変うれしく思います。 お手数ですが、どうぞ宜しくお願い致します。

画像を拡大する

みんなの回答

回答No.10

まだお読みでしょうか。 ご要望としては 「親ページのボタンを押すと、親ページとインラインフレーム内の文字サイズが変わり、親ページで選択したサイズ画像ボタンがアクティブ状態になる」 ということでしょうか。 こんな感じでいかがですか。 http://htmldwarf.hanameiro.net/tools/IframeSample/FontSizeChange_sample2.html ファイル一式を http://htmldwarf.hanameiro.net/tools/IframeSample/Iframe.lzh にアップしましたので設置方法はそちらでご確認ください。

参考URL：
http://htmldwarf.hanameiro.net/tools/IframeSample/FontSizeChange_sample2.html
全文を見る
すると、全ての回答が全文表示されます。
回答No.9

#3です。　ついき。 たいしょうが、しにあなら、やっぱりさいしょからおおきいもじに すべきじゃないかな～ わかいやつは、じぶんでちいさくできるかもしれないんだから。

fablies21
質問者

お礼

そうですね！ 今回はデザインを始める前から仕様が決まってしまってたので、 次回以降は可能な限り提案してみることにします。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
回答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内フォントサイズが変えられず、 そこだけ、困っております。 お時間ございましたら、教えていただければ大変うれしく思います。 どうぞ宜しくお願い致します。

全文を見る
すると、全ての回答が全文表示されます。
回答No.7

#3です。 ＞あなたの伝えたいことは何ですか？という質問ですが、この質問への回答としてはふさわしくないと思います。 言葉足らずだったことを深くお詫びします。 誤：あなたの伝えたいことは何ですか？ 訂：そのページで伝えたいことは何ですか？ とすればまだ良かったですね。 askaaska様、フォローありがとうございます。 キャラ的に、私に「様」は、必要ありません。 なんなら、呼び捨てで！^^;

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.6

再度、Ｎｏ2です。 調べたり、考えたりするのが面倒な場合は、参考に挙げられているサイトの方法は閲覧可能ですので、その方法を参考にすればよいのでは？ あまりよく見てないけど、そのサイトでは ロールオーバーはjavascript（どうやらDreamWeaverみたい）で実現しているようですね。 （大、中、小の文字もボタンと合わせて画像になっていて入れ替えている）

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.5

No2です。 [ 質問文 ] ＞Iframeの中の文字サイズ変更がうまくいきません。 [ 補足文 ] ＞大の画像だけ色が変わるということができません。 ＞「iframe」と「親ページ」内の文字サイズを変えるのはうまくできました。 ＞、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、 ＞教えていただけると非常に助かります。 サイズ変更が出来ているのかいないのかよくわかんない上に何を知りたいのでしょうか？ ボタンデザインの変更であれば（マウスオーバーで変わる機能）、「ロールオーバー」をキーに検索すればうじゃうじゃ見つかるはずです。 機能的には、文字サイズの変更とはまったく別物の内容になります。 方法的には2通りあって、CSSで行うかjavascriptで行うかのどちらかで実現しているものが多いと思います。 この掲示板で回答するよりも、検索した方がより多くの詳細情報が簡単に入手できるでしょう。 ちなみに、No2の回答は[ 質問文 ]に対する回答なので、当然ながら[ 補足 ]の回答にはなっていません。

全文を見る
すると、全ての回答が全文表示されます。
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.4

> あなたの伝えたいことは何ですか？という質問ですが、この質問への回答としてはふさわしくないと思います。 #3様は、もっと別のアプローチ方法があるのではないか と、そう言っているのよ。 目的を達成するための手段が目的になってしまうことは良くあることだから そこを気にしてくれたのよ。 一応、補足させていただくわ。 で、本題。 改めてhttp://q.hatena.ne.jp/1242894447を読んだのだけど この文章からだと 文字サイズの変更がなければロールオーバーは実現できた という認識で正しいかしら？ もし、それすら・・・と言う場合は教えるのが困難になるわ。 そっちはできていると言うのなら 実現したコードを見せてもらえるかしら。 そのほうが教えやすいのよ。

全文を見る
すると、全ての回答が全文表示されます。
回答No.3

こんなことを言っては気を悪くするかもしれませんが、 考え方の一つとして聞いてください。 あなたの伝えたいことは何ですか？ デザインですか？情報ですか？ 昨今のブラウザならワンクリックで（数クリック）で、 文字の大きさを変えられる時代です。 もうそのような機能は、ユーザーに任せてよいのではないでしょうか？

fablies21
質問者

補足

私も文字サイズ変更ボタンはあまり好きじゃないし、 おっしゃることの意味は理解できますが、 ブラウザの文字サイズ変更機能の使用方法がわからない可能性のある、 シニア層がメインユーザーのサイトである上、 クライアントから、どうしてもという要望があった為、 設置は避けられない状況です。 （個人的にも、現在の制作しているサイトには設置が必要だと思います。） あなたの伝えたいことは何ですか？という質問ですが、この質問への回答としてはふさわしくないと思います。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

HTMLの中身が不明なので、どううまくいかないのか想像できないけど… それぞれの方法がわかっていれば、単純に両方やればいいだけのはず。 自身のドキュメントと、iframeのドキュメントのフォントサイズを変えればいいのでは？ prototypeはよく知らないので、ベタのサンプルで原理のみ… （prototypeを利用して書き換えればもっと簡単になるはず） <html> <head> <style type="text/css"> .font div {float:left; width:50px; font-size:medium;} hr {clear:left;} </style> <script type="text/javascript"> function set(s) { setFont(document,s); var frame = document.getElementsByTagName('IFRAME'); for (var i=0; i<frame.length; i++){ var doc = (frame[i].contentDocument)? frame[i].contentDocument:frame[i].contentWindow.document; setFont(doc,s); }} function setFont(obj,siz) { obj.getElementsByTagName('BODY')[0].style.fontSize = siz; } </script> </head> <body> <div class="font"> <div onclick="set('small')">小</div> <div onclick="set('medium')">中</div> <div onclick="set('large')">大</div> </div> <hr /> <p /><iframe src="test.html"></iframe> <p />テストの文字列 <p /><iframe src="test.html"></iframe> </body> </html>

fablies21
質問者

お礼

ご丁寧にスクリプトまで、誠にありがとうございます。 言葉足らずで大変申し訳ございませんでした。 ハテナで知ったURLを参考に、 ボタンを画像にして（text-indent:-99999、背景画像指定）、 「iframe」と「親ページ」内の文字サイズを変えるのはうまくできました。 しかし、例えば「大」サイズ選択時に、「大」の画像だけ色が変わるということができません。 もっと、具体的に言わせていただきますと、 このサイト（http://www.smbc-friend.co.jp/）にあるボタンのような感じで、 且つ、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、教えていただけると非常に助かります。 お手数ですが、どうぞ宜しくお願い致します。

全文を見る
すると、全ての回答が全文表示されます。
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

http://q.hatena.ne.jp/1242894447 の画像にあったHTMLを実行してみたけど IE7とChromeで ちゃんと文字サイズの変更は動作したわよ。 どう上手くいかないのかしら。

fablies21
質問者

お礼

ご回答と検証、大変ありがとうございます。 言葉足らずで大変申し訳ございませんでした。 より具体的に言わせていただきますと、 このサイト（http://www.smbc-friend.co.jp/）にあるボタンのような感じで、且つ、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、教えていただきたいと思っております。 どうぞ宜しくお願い致します。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

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

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

    こんにちは。 ＯＳはＷＩＮ　ＶＩＳＴＡ　いまだにエクセル２００７の若葉マークです。当方のエクセル２００７の場合、デフォルトでは「フォント：ＭＳＰゴシック　フォントサイズ：１１」の設定です。ある文章を打ち込んで、その文章全体の文字の書体やサイズを変えたい場合、変えたいセルを全部選択して、変えたいフォントやフォントサイズに変更するという 手順はさすがに私でも分かります。文章を全部打ち込んでから先程の手順で変更するのではなく、希望のフォントやフォントサイズに変更してから文章を打つ場合、その文章を打ち終わるまでは希望のフォントやフォントサイズで打てますが、打ち終わって他のセルに別の文章を打とうとすると、また「フォント：ＭＳＰゴシック　フォントサイズ：１１」 に戻ってしまいます。この点、以前の質問投稿でお尋ねした際は、ある 親切な方が「ディフォルトで変更したい場合には『Office』ボタンから『Excellのオプション』をクリックし、『基本設定』の項で『新しいブックの作成時』の内容を変えることでしょう。」とのご助言をいただきました。ただ、当方のエクセル２００７の画面左上のＯＦＦＩＣＥボタンをクリックして「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メールだと特定の文字だけフォントサイズを数字を指定して変更できました。 　サンダーバードですとフォントサイズを拡大します・フォントサイズを縮小します、 　というボタンがあるだけです。特定の文字だけ数字でフォントサイズを変更できるでしょうか？　

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する