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は良いなあと思う今日この頃なのです。
最近のコメント