- 締切済み
フォントサイズ変更ボタンについて
ハテナでも質問させていただきましたが、まだ回答が得られないため、 こちらでも質問させていただきたく思います。 （http://q.hatena.ne.jp/1242894447 ※急ぎのため、申し訳ございません。） 下記URLのソースを利用して、フォントサイズ変更ボタンを作っていますが、 Iframeの中の文字サイズ変更がうまくいきません。 http://htmldwarf.hanameiro.net/tools/FontSizeChanger.html 当方、ジャバスクリプト超初心者ですが、大変困ってます。 わかりやすく教えていただければ大変うれしく思います。 お手数ですが、どうぞ宜しくお願い致します。
- fablies21
- お礼率40% (4/10)
- JavaScript
- 回答数10
- ありがとう数24
- みんなの回答 （10）
- 専門家の回答
みんなの回答
- flowermaze
- ベストアンサー率56% (159/282)
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
#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>
お礼
バブーさま レス遅くなって誠に申し訳ありません！ ご回答大変ありがとうございました。 イメージどおりでとてもすばらしいです。 ちょっとどころか、だいぶ参考になりました。 ただ、同一ページのiframe内フォントサイズが変えられず、 そこだけ、困っております。 お時間ございましたら、教えていただければ大変うれしく思います。 どうぞ宜しくお願い致します。
- babu_baboo
- ベストアンサー率51% (268/525)
- fujillin
- ベストアンサー率61% (1594/2576)
- fujillin
- ベストアンサー率61% (1594/2576)
- askaaska
- ベストアンサー率35% (1455/4149)
- babu_baboo
- ベストアンサー率51% (268/525)
こんなことを言っては気を悪くするかもしれませんが、 考え方の一つとして聞いてください。 あなたの伝えたいことは何ですか？ デザインですか？情報ですか？ 昨今のブラウザならワンクリックで（数クリック）で、 文字の大きさを変えられる時代です。 もうそのような機能は、ユーザーに任せてよいのではないでしょうか？
補足
私も文字サイズ変更ボタンはあまり好きじゃないし、 おっしゃることの意味は理解できますが、 ブラウザの文字サイズ変更機能の使用方法がわからない可能性のある、 シニア層がメインユーザーのサイトである上、 クライアントから、どうしてもという要望があった為、 設置は避けられない状況です。 （個人的にも、現在の制作しているサイトには設置が必要だと思います。） あなたの伝えたいことは何ですか？という質問ですが、この質問への回答としてはふさわしくないと思います。
- fujillin
- ベストアンサー率61% (1594/2576)
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>
お礼
ご丁寧にスクリプトまで、誠にありがとうございます。 言葉足らずで大変申し訳ございませんでした。 ハテナで知ったURLを参考に、 ボタンを画像にして（text-indent:-99999、背景画像指定）、 「iframe」と「親ページ」内の文字サイズを変えるのはうまくできました。 しかし、例えば「大」サイズ選択時に、「大」の画像だけ色が変わるということができません。 もっと、具体的に言わせていただきますと、 このサイト（http://www.smbc-friend.co.jp/）にあるボタンのような感じで、 且つ、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、教えていただけると非常に助かります。 お手数ですが、どうぞ宜しくお願い致します。
- askaaska
- ベストアンサー率35% (1455/4149)
http://q.hatena.ne.jp/1242894447 の画像にあったHTMLを実行してみたけど IE7とChromeで ちゃんと文字サイズの変更は動作したわよ。 どう上手くいかないのかしら。
お礼
ご回答と検証、大変ありがとうございます。 言葉足らずで大変申し訳ございませんでした。 より具体的に言わせていただきますと、 このサイト（http://www.smbc-friend.co.jp/）にあるボタンのような感じで、且つ、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、教えていただきたいと思っております。 どうぞ宜しくお願い致します。
お礼
そうですね！ 今回はデザインを始める前から仕様が決まってしまってたので、 次回以降は可能な限り提案してみることにします。 ありがとうございました。