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

Ｗｅｂページ上に「文字を大きくする」ボタンをつけたい

解決済

  • 質問者：giusa
  • 質問日時：
  • 回答数：7件

どこかのページで見たような気がするのですが、「文字を大きくする」「文字を小さくする」ボタンが画面上に張ってあったような気がします。どうすれば実現できるでしょうか？

できれば、ネットスケープ系ブラウザでも動作する方法が良いのですが。

無論、ブラウザの操作で大きくしたりすることができるのですが、初心者や子供には画面上で指示をした方がわかりやすいので。

よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： lead1976
  • 回答日時：

訂正…


スクリプト自体は問題なかったのですが、ボタンのところにNetscape 4.xxでは解釈されない要素を利用していたせいで動かなかったようです。

<div><button onClick="fsCh(1)">拡大</button>
<button onClick="fsCh(-1)">縮小</button></div>

この部分を、

<div><form>
<input type="button" value="拡大" onClick="fsCh(1)">
<input type="button" value="縮小" onClick="fsCh(-1)"></form></div>

こちらに置き換えてみて下さい。 多分これで動いてくれると思います。 一応、Netscape 4.78を暫時に導入して、動作確認しました(すぐアンインストールしましたが…動作環境に合わないので…)。
あと、こちらに置き換えた場合、

<style type="text/css"><!--
button{font-size: 120%;}
--></style>

この部分は不要ですので、削除してしまって構いません。

ばたばたして申し訳ありません。 失礼しました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

【お見事！】動きました。すばらしい。Netscapeがかわいく見えてきました。

私自身javascriptはほとんどわからないのですが、勉強しようという気になってきました。

本当にありがとうございます。

通報する
お礼日時：2003/04/16 18:19

No.6

  • 回答者： lead1976
  • 回答日時：

#2です。


Netscape 4.xxに対応することを想定して、前のスクリプトを少し改造してみました。 Cookieを利用して、JavaScriptから少々強引にスタイルシートを変更する形に直してあります。


<html>
<head>
<title>文字サイズ変更</title>
<style type="text/css"><!--
button{font-size: 120%;}
--></style>
<script type="text/javascript"><!--
var fs= new Array("50%","70%","90%","100%","120%","150%","200%");
n=3;

getc1=document.cookie+"\;";
x1=getc1.indexOf("no");
getc=getc1.substring(x1-1);
x2=getc.indexOf("=");
x3=getc.indexOf("\;");
xx=getc.substring(x2+1,x3);
n=eval(xx);
if (getc1=="\;"){n=3;}

document.write("<style type='text/css'><!-"+"-");
document.write("body{font-size:"+fs[n]+"\;}")
document.write("-"+"-></"+"style>");

function fsCh(i){
n+=i;
if (!fs[n]){
n-=i;
if (i<0){alert("これ以上小さくはなりません");}
else {alert("これ以上大きくはなりません")}
}
else{
setc="no="+n;
document.cookie=setc;
location.reload();
}
}
//--></script>
</head>
<body>
<div><button onClick="fsCh(1)">拡大</button>
<button onClick="fsCh(-1)">縮小</button></div>

<p>ボタンのサイズも変わります。 今度はcookieを利用して、サイズ変更をする仕組みに差し替えてみました。 今度のスクリプトでは、head要素内にJavaScriptを使ってスタイルシートを吐き出すようになっています。 サイズ変更のためのボタンをクリックすると、文字サイズの指定に使っている配列番号を変更してcookie内に保存し、リロードをかけます。 リロード後は、cookie内から文字サイズ指定の配列番号を引き出して、適用する文字サイズを決定します。 JavaScriptとcookieの利用を許可していて、CSSに対応しているブラウザであれば、おそらく動作するでしょう。 また、このスクリプトの場合、複数のHTMLファイルに同じものを記述しておけば、別のページでも自動的にサイズの変更をしてくれると思います(別のディレクトリのファイルを呼び出した場合を除く)。</p>

</body>
</html>

とりあえず、IE 6とNetscape 7での動作の他、今度はOpera 6.05でも動作することを確認しました。
私の手元にはNetscape 4.xx以前がないので、そちらでの動作確認は取れていません。
もしNetscape 4.xxで動作しなかったらごめんなさい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

うーん、もはやなんとお礼を申し上げてよいかわからないのですが、本当にありがとうございます。

が、Netscape4.×では動作しませんでした。
私もいまどきそんなものは使っていないので、サイトからダウンロードして使用しているのですが、ユーザーにいるのでしょうがないのです。トホホ

通報する
お礼日時：2003/04/15 18:56

No.5

  • 回答者： HP_Adviser
  • 回答日時：

たびたびすみません。


No.3,4の者です。

一つアドバイスをしますが、No.3に書かれているスクリプトだと、これ以上文字サイズを大きく(小さく)出来ない時のメッセージが出てきません。
そのメッセージが出てくるようにするには、No.3のスクリプトを少し変える必要があります。

for Internet Explorer 4,5,6の
> if (pm == "b") {
> if (fspre < sizemax) {
> document.all("bo").style.fontSize = fspre + pmper + "%";
> }
> } else if (pm == "s") {
> if (fspre > sizemin) {
> document.all("bo").style.fontSize = fspre - pmper + "%";
> }
> }
の部分を、
if (pm == "b") {
if (fspre < sizemax) {
document.all("bo").style.fontSize = fspre + pmper + "%";
} else {
// これ以上文字を大きくすることが出来ないときのメッセージ
alert("これ以上文字を大きくすることが出来ません。");
}
} else if (pm == "s") {
if (fspre > sizemin) {
document.all("bo").style.fontSize = fspre - pmper + "%";
} else {
// これ以上文字を小さくすることが出来ないときのメッセージ
alert("これ以上文字を小さくすることが出来ません。");
}
}
に変えてください。

また、for Netspace 6,7の部分も、
> if (pm == "b") {
> if (fspre < sizemax) {
> document.getElementById("bo").style.fontSize = fspre + pmper + "%";
> }
> } else if (pm == "s") {
> if (fspre > sizemin) {
> document.getElementById("bo").style.fontSize = fspre - pmper + "%";
> }
> }
を
if (pm == "b") {
if (fspre < sizemax) {
document.getElementById("bo").style.fontSize = fspre + pmper + "%";
} else {
// これ以上文字を大きくすることが出来ないときのメッセージ
alert("これ以上文字を大きくすることが出来ません。");
}
} else if (pm == "s") {
if (fspre > sizemin) {
document.getElementById("bo").style.fontSize = fspre - pmper + "%";
} else {
// これ以上文字を小さくすることが出来ないときのメッセージ
alert("これ以上文字を小さくすることが出来ません。");
}
}
にするとアラートメッセージが出てきます。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： HP_Adviser
  • 回答日時：

すみません、先程の者ですが、スクリプトの中に、パーセンテージで指定とコメントされている部分がありますが、「%」は抜かしてください。


つまり、300%を指定したい場合は、ただ単に300と入れてください。
他の部分も、同じようになりますので、そこの部分を注意してください。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： HP_Adviser
  • 回答日時：

ちょっと長いですが、こんなスクリプトなんか、どうですかね？


そのままコピペして試してみてください。
動作ブラウザは、Internet Explorer 4,5,6、Netspace 6,7です(DHTMLの技術を利用しているため)。

<html>
<head>
<style type="text/css">
<!--
#bo { font-size:100%; }
-->
</style>
<script type="text/javascript">
<!--
// sizechange(pm,pmper)
// pm : 拡大する場合は"b"、縮小する場合は"s"を指定
// pmper : 拡大(縮小)する割合をパーセンテージで指定
function sizechange(pm,pmper) {
var sizemax = "300"; // 文字サイズ最大の大きさをパーセンテージで指定
var sizemin = "80"; // 文字サイズ最小の大きさをパーセンテージで指定
if (document.all) {
// for Internet Explorer 4,5,6
var fs = document.all("bo").style.fontSize;
var fspre = new Number(fs.substring(0,fs.length - 1));
pmper = new Number(pmper);

if (pm == "b") {
if (fspre < sizemax) {
document.all("bo").style.fontSize = fspre + pmper + "%";
}
} else if (pm == "s") {
if (fspre > sizemin) {
document.all("bo").style.fontSize = fspre - pmper + "%";
}
}
} else if ((!document.all) && (document.getElementById)) {
// for Netspace 6,7
var fs = document.getElementById("bo").style.fontSize;
var fspre = new Number(fs.substring(0,fs.length - 1));
pmper = new Number(pmper);

if (pm == "b") {
if (fspre < sizemax) {
document.getElementById("bo").style.fontSize = fspre + pmper + "%";
}
} else if (pm == "s") {
if (fspre > sizemin) {
document.getElementById("bo").style.fontSize = fspre - pmper + "%";
}
}
}
}
//-->
</script>
</head>
<body id="bo" style="font-size:100%;">
<a href="javascript:sizechange('b','10')">拡大</a>,<a href="javascript:sizechange('s','10')">縮小</a>
文字が拡大したり縮小したりします。
</body>
</html>

ちなみに、ボタンにするには、
<input type="button" onclick="sizechange('b','10')" value="拡大">
<input type="button" onclick="sizechange('s','10')" value="縮小">
のようにするといいでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

HP_Adviserさん、ありがとうございます。お名前に違わずあらゆるケースに対応できるように思いました。

しかし、前の「お礼」でも少し触れたのですがNetscapeの旧バージョンのユーザーが多くいます。

別にネスケでないと困る、というようなページでもないのですが、古いユーザーがそのまま使い続けているようです。自分でブラウザを更新したり変更したりしない（でききない）ユーザーなので、彼らこそが、ブラウザのメニューから文字の大きさを変更できないのです。

ネスケの旧バージョンで実現できないなら、責め方を変えてみます。ありがとうございました。

通報する
お礼日時：2003/04/14 14:51

No.2

  • 回答者： lead1976
  • 回答日時：

DHTML的手法ですが、こんな感じではいかがでしょうか。



<html>
<head>
<title>文字サイズ変更</title>
<style type="text/css"><!--
#bd{font-size: 100%;}
button{font-size: 120%;}
--></style>
<script type="text/javascript"><!--
var fs= new Array("50%","70%","90%","100%","120%","150%","200%");
/* 拡大・縮小時のサイズ指定をする配列を作成しています。 指定サイズを追加することもできますし、減らすこともできます。 */
n=3;
/* 上記配列の初期値を設定しています。 ここでは4つ目に入っている100%を初期値として指定するために、n=3にしてあります。 */

function fsCh(i){
if (document.getElementById){
n+=i;
if (!fs[n]){
n-=i;
if (i<0){alert("これ以上小さくはなりません");}
else {alert("これ以上大きくはなりません")}
/* 指定サイズの範囲を超えたときの処理と警告 */
}
else{
document.getElementById("bd").style.fontSize=fs[n];
}
}
}
//--></script>
</head>
<body id="bd">
<!--このidは必須。 body要素以外にこのidをつけても構わないかと。 ただし、同じidは1ページに複数配置できません。-->

<div><button onClick="fsCh(1)">拡大</button>
<button onClick="fsCh(-1)">縮小</button></div>

<p>ボタンのサイズも変わります。 Winodws Me上のIE6とNetscape 7で動作確認しました。 Opera 6.05では駄目でした。 IE4、NN4.xx以前のブラウザでも動作しないと思います。</p>

</body>
</html>

見当違いでしたら、ごめんなさい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

lead1976さん、ありがとうございます。
「大」「小」も実現されていて、このまま張り込んでしまったらどんなに楽かと思いました。

しかし、ユーザーにNetscapeしかも4.8ユーザーがかなりいることがわかっています。

私もNetscape(R) Communicator 4.78 で試したのですがやはり上手く動作しないようです。ユーザーにブラウザを替えてもらいましょうか、、、

通報する
お礼日時：2003/04/14 14:33

No.1

  • 回答者： wo-007
  • 回答日時：

これでどうでしょうか？


スクリプトの引数に拡大したい部分のタグのIDと、拡大するポイント数を指定することができます。
IE6.0で動作確認済みです。

<html>
<head>
<script language="javascript">
function sizeUp(argId, argPoint){
　size = document.all[argId].currentStyle.fontSize;
　sizeNum = new Number(size.substring(0,size.length-2));
　document.all[argId].style.fontSize
　　= sizeNum + argPoint + "pt";
}
</script>
</head>

<body id="bodyId">
<input type="button" value="拡大" onClick="sizeUp('bodyId', 4)">
あいうえお
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

翌日には回答をいただいていたのですね。見せていただくのが遅くなってしまいました。

「大きく」は実現されていますし、なによりソースが軽く、ブラウザを閉じると元の表示に戻るのですね。

できれば「小さく」も欲しいな、と。

通報する
お礼日時：2003/04/14 15:22

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報