« 部分日食・福岡--9割欠けた | トップページ | QHM(Quick Homepage Maker)(8)--CSSとFirefoxプリント »

2009.07.28

QHM(Quick Homepage Maker)(7)--文字サイズ変更ボタン

QHM(Quick Homepage Maker)のバージョンが4.20になった。

4.20の新機能で「文字サイズ変更を閲覧者が画面上でできる」設定が加わったのかな。文字サイズ…大・中・小のボタンを押すとページの文字が大きくなったり小さくなったり、という機能。

こちらに設定方法の説明がある。

ホームページソフトのQHM 文字サイズ変更機能

メニュー部分に文字サイズ変更ボタンを設置する方法も紹介されている。

D++ Cool Design Labo メニュー部に設置できる文字サイズ変更ボタン

私はこれをやってみた。

文字サイズ変更はできた。…が、なぜか不思議な現象が起きてしまった。

フッタのCopyright部分と、一番下のライセンス表示部分の文字が大きくなり、中・小ボタンを押してもリロードしても「大きいまま」なのである。しかも、ライセンス表示の文字列はところどころでサイズが違うという、摩訶不思議なことになっている。

謎です…(@_@)?

この原因を解明する能力は私にはないので、他の方法を探してみた。一般サイトでも見かけるから、javascriptで作成する方法がいくつかありそうだと思って。

次のが最も簡単だった。

javascriptで文字サイズ変更する方法 -- OKWave

QHMで作った「簡単!ホームページ更新」に入れてみたが、今のところ問題なさそうだ(Firefox、Safari、Windows IE6で確認)。

ボタンがフォームに使うinputボタンなのでデザインは変えられないが、まあボタンデザインに凝らなくてもいいだろうと。

文字サイズの変わる部分がD++ Cool Design Laboさんご紹介の方法(QHM方式?)と若干違う。

・QHM方式…見出し、箇条書き(リスト)、フッタ、ヘッダ、ページの目次、HTMLで編集した箇所は変更されない。サイズ変更して他ページに行ったら変更サイズが適用される。

・OKWaveにあったjavascript方式…見出し、フッタ、ヘッダ、ページの目次は変更されない(リストとHTML編集箇所は変更される。表の文字も変更)。サイズ変更して他ページに行ったらデフォルトサイズ。サイズ変更はページごとに適用。

QHMでリストやHTML編集を多用して作ると、QHM方式のサイズ変更は「あまり変わらない」印象を受けるかな。

※文字サイズの変更はブラウザの「表示」メニューでできるのだけれど、Windows IE6ではpx指定の文字サイズは変更できない。また、サイト閲覧者にはブラウザでサイズ変更ができることを知らない人もいるので、ページ画面に文字サイズ変更ボタンをつけるのは親切で良いことだと思う。

上記、いずれの方法でも、「QHMは便利だ〜〜」と感じる。

QHMを使い、javascriptで入れる方法は次の通り。

QHMの管理画面:

設定 > サイト情報の設定 > その他のタグ に下のタグを入れる。

<script type="text/javascript"><!--
function large()  { document.body.style.fontSize = "120%"; }
function middle() { document.body.style.fontSize = "100%"; }
function small()  { document.body.style.fontSize = "80%"; }
//--></script>

120% 等の数字は任意に変える。14pxなど、他の単位でもよい。

次に、メニュー管理 > メニュー編集 で下のタグを#html{{   }}のカッコ内に入れる。

<input type="button" onClick="large()"  value="大">
<input type="button" onClick="middle()" value="中">
<input type="button" onClick="small()"  value="小">

大中小の順序は入れ替え可。このままなら横に並ぶ。

QHMではこの2回の処理で済むのでラク。一般作成方法だとページごとに入れなくちゃならないから。

QHMに付加していない機能でもこのように追加して使えばよいわけで(スムーススクロールもそうだけど)、便利な機能をさっさっと入れやすい点でもQHMは良いなあと思う今日この頃なのです。

|

« 部分日食・福岡--9割欠けた | トップページ | QHM(Quick Homepage Maker)(8)--CSSとFirefoxプリント »

CSS(スタイルシート)」カテゴリの記事

「パソコン・インターネット」カテゴリの記事

コメント

またもご紹介していただきありがとうございます。
D++のはjqueryでキャッシュに情報を保存させるため、他ページにいってもサイズが変更されたままになっています。

>フッタのCopyright部分と、一番下のライセンス表示部分の文字が大きくなり、中・小ボタンを押してもリロードしても「大きいまま」なのである。しかも、ライセンス表示の文字列はところどころでサイズが違うという、摩訶不思議なことになっている。

これは説明不足でした。

要素しか文字サイズが変わらないようになっています。つまりライセンス部の文字が小さいままのところは要素なので変更されなかったみたいです。D++や他で運用しているサイトは、ライセンス部を加工しているので確認を怠りました。
ただリロードしても文字が変わらないままというのは謎ですね。。。

もし良かったらD++でkirikoさんのソースを紹介させていただいてもよろしいでしょうか?

投稿: D++ | 2009.07.29 18時24分

D++ さん、ご説明ありがとうございます!

>D++のはjqueryでキャッシュに情報を保存させるため、他ページにいってもサイズが変更されたままになっています。<

なるほど。そこに違いがあるわけですね。

コメント内のタグ<p><a>が有効になってしまっているので、下にD++さんのコメント原文(該当部)を書きます。ココログのコメントはタグがそのまま有効になるんですねぇ(初めて知りました)。以下、半角<>は全角<>に置き換えています。

>これは説明不足でした。<p>要素しか文字サイズが変わらないようになっています。つまりライセンス部の文字が小さいままのところは<a>要素なので変更されなかったみたいです。D++や他で運用しているサイトは、ライセンス部を加工しているので確認を怠りました。
ただリロードしても文字が変わらないままというのは謎ですね。。。<

<p>に適用させる方式であるところから、他要素(<a>含む)との差異が生じる、ということですね。あ、でも本文にも<a>〜</a>がありますが…。

>もし良かったらD++でkirikoさんのソースを紹介させていただいてもよろしいでしょうか?<

私のソースというのはどれのことでしょう? もっとも、どこのソースでも外部から見られるものはお使いいただいて構いませんので。

「簡単!ホームページ更新」http://ryuseisha.com/kantan/は、無償版のQHM v3をv4.10アップデートしたものです。フッタCopyrightは住所の後の","を削除するようphpを変えましたが、他はデフォルトのままです。ライセンス部分も手を加えていません。

投稿: kiriko | 2009.07.30 00時59分

><p>に適用させる方式であるところから、他要素(<a>含む)との差異が生じる、ということですね。あ、でも本文にも<a>〜</a>がありますが…。

すいません。これ私もちょっとわからないんです。
本文のほうは<a>も<p>も問題ないんですが、ライセンス部とかはうまくいかなかったりするんですよね。

文字を拡大した時に文章には次のソースが入るのですが、ライセンス部の<a>にはうまく適用されないみたいです。

ここに本文の文字

>私のソースというのはどれのことでしょう? もっとも、どこのソースでも外部から見られるものはお使いいただいて構いませんので。

ありがとうございます!
今回ブログで公開されているソースが対象ですね。



の部分です。

さっそく使わせていただきます(^^)

投稿: D++ | 2009.07.31 20時15分

>D++さん

コメントに入れた生タグは消えちゃったりします(^^;)

私のところにはコメントがメールで来るのでわかるのですが、他の皆さんには見えないので書いておきます。<>を全角<>に置き換えます。
※コメントのタグ無効とか設定できるかもしれません。調べておきます。

ここに本文の文字

<p style="font-size: 17px;">ここに本文の文字</p>

>今回ブログで公開されているソースが対象ですね。<
の続き

<input type="button" onClick="large()" value="大">
<input type="button" onClick="middle()" value="中">
<input type="button" onClick="small()" value="小">

ご紹介くださるのはこちらだったんですね。どうもありがとうございます。
OKWaveにあったのをコピーしただけですが、応用的に使えるかもしれませんね。function 〜〜の設定を変えるとか(私はjavascriptを書けませんが)。
いろんな方法を教えていただけるのは大変ありがたいです。よろしくお願いします。

投稿: kiriko | 2009.08.01 08時46分

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/132693/45753607

この記事へのトラックバック一覧です: QHM(Quick Homepage Maker)(7)--文字サイズ変更ボタン:

« 部分日食・福岡--9割欠けた | トップページ | QHM(Quick Homepage Maker)(8)--CSSとFirefoxプリント »