クリック操作で、サイトの文字の大きさを変えたいのですが。

質問

クリック操作で、サイトの文字の大きさを変えたいのですが。

似たような質問の回答を見つけ、以下を試してみました。↓

<a href="Javascript:void(document.body.style.fontSize='200%')">大</a>
<a href="Javascript:void(document.body.style.fontSize='150%')">中</a>
<a href="Javascript:void(document.body.style.fontSize='100%')">小</a>
ああああ

これはうまくいったのですが、リンクさせると元に戻ってしまい、
ページが変わるたびに、また操作しなければなりません。

このサイトのように
http://www.pref.yamanashi.jp/index.html
一度クリックすれば、サイト全体に引き継ぐようにしたいのですが
どのようにすればよいのでしょうか？

よろしくお願いいたします。

回答No.5

JaneDue · ベストアンサー

<script language="JavaScript">
<!--
function setTextSize(x){
if(x){
document.body.style.fontSize= x;
document.cookie = 'fontSize' + "=" + x + ",;";
}else if(document.cookie.match(/;? ?fontSize=(\d+%)/)){
document.body.style.fontSize=RegExp.$1;
}
}
window.onload=function(){setTextSize();}
// -->
</script>
<a href="Javascript:setTextSize('200%');">大</a>
<a href="Javascript:setTextSize('150%');">中</a>
<a href="Javascript:setTextSize('100%');">小</a>

でとりあえず動作するかと。
他のページに引き継ぐには、閲覧中のページのサイズを変更するだけでなく、閲覧者が指定した値を記録し、別のページを開いたときにその値に変更してやる必要があります。
この場合はクッキーに記録していますので閲覧者がクッキーを受け付けない設定の場合は当然動作しません。

また、使用したいすべてのページに記載するのは大変ですので、
function setTextSize(x) ～ setTextSize();} までを 別ファイルにして、使用ページのhead内に
<script language="JavaScript" src="ファイル名.js"></script>
とした方がよいかも知れません。
詳細は [ JavaScript 別ファイル ]等で検索してみてください。

お礼

JaneDueさん、丁寧にご指導ありがとうございます。
試してみますね。

回答No.6

think49

過去に別所で同様の質問があったので、そこにCookieを使ったコード例を書いてみました。

掲示板/JavaScript質問板/文字サイズのコントロール - TAG index Webサイト
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=2565

ここに回答を書かなかったのは情報集約の観点から。
相互リンクが出来ているので、後で参考にする方がどちらから来ても辿り着けると思います。

お礼

think49さん、ありがとうございます。
教えていただいたサイトをじっくり見てみたいを思います。

回答No.4

babu_baboo

がっつんというと、きをわるくなさるとおもうので、やわらかくひらがなで。

そういうものは、ぶらうざにまかせるべきで、
「 [CTRL]+ホイールマウスで、ぐりぐりするともじのおおきさがかわります！」
みたいなことをかきそえればよいとおもいます。

ていじされた「やまなしけん」のぺーじだって、もじのおおきさをかえたところで
みやすいとはおもえない。いろあいの２だって、「げぇ～」とおもうはいしょく。
目にしょうがいがあるひとなんかは、はなっからwindowsのがめんのはいしょくを
それようにへんこうしているとおもう。それはよけいなおせわ！
めにゅーのがぞうのもじのおおきさがかわるわけでもないし、はっきりいってふべん。

かいけつさく。
とっぷぺーじのとっぷにでも、「大中小」のりんくでもおいて、そこからは
おおもじようのぺーじ、ちいさいもじようのぺーじにりんくして、それように
ひょうじでもしていたほうが、まだましだとおもいます。

それでもひつようだとおもうなら、おれが書く。

お礼

babu_babooさん、回答ありがとうございます。
たしかに、[CTRL]+ホイールマウスで済む事だと思います。

実は今回、ボタン操作で変わるように作成して欲しいと依頼されてサイトを作ることとなり、
そのようにデザインが上がってきた状態でして
私自身が [CTRL]+ホイールマウスで十分だと思っても、
依頼者が『ボタンでの操作』にこだわるかぎり、
どうにか依頼者のご希望通りにならないものかと四苦八苦していたところです。
サイトを公開する人、作成する人、それを閲覧する人、それぞれの思いと感じ方は様々で
ピタリと一致することは難しいものですね。

babu_babooさんのようにガツンとは言えませんが、
依頼者を説得することも考えてみたいと思いました。
ありがとうございます。

回答No.3

yyr446

最近HTMLのカテゴリーで回答した例があるのでご参考に、
http://okwave.jp/qa/q5889343.html

お礼

yyr446さん、ありがとうございます。
とても参考になりました。

回答No.2

foitec

<a href="javascript:void(0)" onclick="textSizeUp(); return false"><img （ここに拡大文字サイズのイメージソースを書き込む）

<a href="javascript:void(0)" onclick="textSizeDefault(); return false"><img （ここに標準文字サイズイメージソースを書き込む）

<a href="javascript:void(0)" onclick="textSizeDown(); return false"><img （ここに縮小文字サイズイメージソースを書き込む）

では如何でしょう？

お礼

foitecさん、回答ありがとうございます。

質問なのですが、
img （ここに拡大文字サイズのイメージソースを書き込む）
のところには、たとえば
src="kakudai.gif" width="30" height="20" border="0"></a>

このような感じで、よいのでしょうか？
上記のようにやってみたのですが
文字の大きさが変わらなくて・・・。

引き続き、ご指導願います。

回答No.1

yambejp

クッキーをつかえば出来ると思いますが、本質的にブラウザの設定を
手で換えてもらうのが正しい姿だと思います。

お礼

yambejpさん、早々に回答ありがとうございます。

自治体関連のサイトを作成しておりまして、
ブラウザの設定方法がわからない方が閲覧すると予測しております。
そういった方が、見てすぐに理解できて、自分で操作できるように
したいと思っております。
よろしくお願いいたします。