アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

締切済

  • 質問者：fablies21
  • 質問日時：
  • 回答数：10件

ハテナでも質問させていただきましたが、まだ回答が得られないため、
こちらでも質問させていただきたく思います。
（http://q.hatena.ne.jp/1242894447　※急ぎのため、申し訳ございません。）

下記URLのソースを利用して、フォントサイズ変更ボタンを作っていますが、
Iframeの中の文字サイズ変更がうまくいきません。
http://htmldwarf.hanameiro.net/tools/FontSizeCha …
当方、ジャバスクリプト超初心者ですが、大変困ってます。
わかりやすく教えていただければ大変うれしく思います。
お手数ですが、どうぞ宜しくお願い致します。

「フォントサイズ変更ボタンについて」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (10件)

No.1

  • 回答者： askaaska
  • 回答日時：

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

どう上手くいかないのかしら。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/05/22 12:13

No.2

  • 回答者： fujillin
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/05/22 12:11

No.3

  • 回答者： babu_baboo
  • 回答日時：

こんなことを言っては気を悪くするかもしれませんが、


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

この回答への補足

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

補足日時：2009/05/22 12:26
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： askaaska
  • 回答日時：

> あなたの伝えたいことは何ですか？という質問ですが、この質問への回答としてはふさわしくないと思います。


#3様は、もっと別のアプローチ方法があるのではないか
と、そう言っているのよ。
目的を達成するための手段が目的になってしまうことは良くあることだから
そこを気にしてくれたのよ。
一応、補足させていただくわ。

で、本題。
改めてhttp://q.hatena.ne.jp/1242894447を読んだのだけど
この文章からだと
文字サイズの変更がなければロールオーバーは実現できた
という認識で正しいかしら？
もし、それすら・・・と言う場合は教えるのが困難になるわ。
そっちはできていると言うのなら
実現したコードを見せてもらえるかしら。
そのほうが教えやすいのよ。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： fujillin
  • 回答日時：

No2です。



[ 質問文 ]
＞Iframeの中の文字サイズ変更がうまくいきません。

[ 補足文 ]
＞大の画像だけ色が変わるということができません。
＞「iframe」と「親ページ」内の文字サイズを変えるのはうまくできました。
＞、「iframe」と「親ページ」内両方の文字サイズを変えるスクリプトを、
＞教えていただけると非常に助かります。

サイズ変更が出来ているのかいないのかよくわかんない上に何を知りたいのでしょうか？
ボタンデザインの変更であれば（マウスオーバーで変わる機能）、「ロールオーバー」をキーに検索すればうじゃうじゃ見つかるはずです。
機能的には、文字サイズの変更とはまったく別物の内容になります。
方法的には2通りあって、CSSで行うかjavascriptで行うかのどちらかで実現しているものが多いと思います。

この掲示板で回答するよりも、検索した方がより多くの詳細情報が簡単に入手できるでしょう。
ちなみに、No2の回答は[ 質問文 ]に対する回答なので、当然ながら[ 補足 ]の回答にはなっていません。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： fujillin
  • 回答日時：

再度、Ｎｏ2です。



調べたり、考えたりするのが面倒な場合は、参考に挙げられているサイトの方法は閲覧可能ですので、その方法を参考にすればよいのでは？

あまりよく見てないけど、そのサイトでは
ロールオーバーはjavascript（どうやらDreamWeaverみたい）で実現しているようですね。
（大、中、小の文字もボタンと合わせて画像になっていて入れ替えている）
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： babu_baboo
  • 回答日時：

#3です。


＞あなたの伝えたいことは何ですか？という質問ですが、この質問への回答としてはふさわしくないと思います。

言葉足らずだったことを深くお詫びします。

誤：あなたの伝えたいことは何ですか？
訂：そのページで伝えたいことは何ですか？
とすればまだ良かったですね。


askaaska様、フォローありがとうございます。
キャラ的に、私に「様」は、必要ありません。
なんなら、呼び捨てで！^^;
    • good
    • 0
    • 件
通報する

No.8

  • 回答者： babu_baboo
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/05/25 12:52

No.9

  • 回答者： babu_baboo
  • 回答日時：

#3です。

　ついき。
たいしょうが、しにあなら、やっぱりさいしょからおおきいもじに
すべきじゃないかな～
わかいやつは、じぶんでちいさくできるかもしれないんだから。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/05/25 12:55

No.10

  • 回答者： flowermaze
  • 回答日時：

まだお読みでしょうか。



ご要望としては
「親ページのボタンを押すと、親ページとインラインフレーム内の文字サイズが変わり、親ページで選択したサイズ画像ボタンがアクティブ状態になる」
ということでしょうか。

こんな感じでいかがですか。
http://htmldwarf.hanameiro.net/tools/IframeSampl …

ファイル一式を
http://htmldwarf.hanameiro.net/tools/IframeSampl …
にアップしましたので設置方法はそちらでご確認ください。

参考URL：http://htmldwarf.hanameiro.net/tools/IframeSampl …
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報