QHM(Quick Homepage Maker)(8)--CSSとFirefoxプリント

QHM（Quick Homepage Maker）で作ったサイト画面をプリントしようとしたら、困ったことが起きた。

■コンテンツが長い場合、最初のページと最後のページしかプリントされない。途中が抜ける。（Firefoxで）

調べてみたら、QHMシステムが原因でなく、CSS＋ブラウザによるプリントの問題のようだ。

「Firefoxの印刷不具合」外部記憶さんのブログを見たら、こういう↓話であるらしい。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【原因】

CSSに

overflow: hidden; や overflow: auto;

が指定されている場合に発生しやすい。

【対策】

overflow: visible; に変える。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

プリント不具合が発生したQHMの「layout_print.css」を開くと、確かに overflow: hidden; や overflow: auto; がある。

ここを overflow: visible; に変える（overflow: 〜〜; を削除しても同じかと）。
これでFirefoxの「途中抜け」は解消できた。

「layout_print.css」ファイルはQHMのテンプレート内にある。「layout.css」がモニター画面に表示させるレイアウト設定なのに対し、「layout_print.css」はプリント時の表示レイアウトである。

各テンプレートに1つずつあるので、テンプレートによって「layout_print.css」も若干違うのだが、

div#wrapper{

div#wrap_content{

のあとに overflow:hidden; が入っているテンプレートを使うと、Firefoxプリント時に「途中抜け」が起きると思われるので、QHMを使っている方はチェックしてみよう（特に無償版で長いコンテンツを作っている場合）。

■プリント不具合はIE6（Windows）でも起きる…orz

プリントの不具合が起きるのはFirefoxだけではない。IEでもいろいろ問題が出る。

そりゃそうか…。プリントもブラウザがCSS、HTMLを読み込んで表示させるのだから、画面表示と同じことか。むしろIE6は他のブラウザより不具合発生が多いほうだものね（何かと悩まされた）。

問題が少なそうなのはSafari（Mac）かなと思う。

IE6（Windows）とプリント問題の実例・対策はまた後日書きます。

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

QHM(Quick Homepage Maker)でホームページを作る(6)--ページ内アンカー：目次

１ページの分量が多いとき、冒頭に目次をつけて、ページ途中の項目にジャンプさせることがよくある（ページ内のアンカー）。

これをHTMLで作る場合は

　アンカーの元（<a href="#koumoku">項目</a>）

と

　アンカー先（<div id="koumoku">項目</div>　または　<a name="koumoku">項目</a>）

の２箇所を設定する。

この作業、QHM（Quick Homepage Maker）では

　#contents

と一言書くだけで自動的にできてしまう。実際は編集画面のアイコン「もくじ」をクリックして入れるだけで良い。

おそるべき簡単さ(^^)

アンカー先のテキスト（項目）すらも書く必要がない。

もちろん、一定の条件があるわけで、何でもかんでも自動で作ってくれるわけではない。

■QHMが自動的に作る「もくじ」は…

そのページの大見出し・中見出し・小見出し（QHMの書式で * が付いている項目）がリスト形式で階層表示される

＝＝＝

「もくじ」としてアンカーする項目を取捨選択したり、リスト形式でない書き方をするには、PHPを変更するか、編集画面での書き方を変える。

もくじ作成のPHPは QHM > plugin > contents.inc.php

（私はPHPをよく知らないのでPHP変更方法に言及することはできません）

編集画面での書き方でアンカー項目を選択する方法：

見出しに * を付けることでPHP処理（もくじの生成）をしているから、* を付けなければアンカー項目にならない。

【方法1】アンカー項目にしたくない見出しをHTMLで記述する

#html{{

<h3>中見出し</h3>

}}

とか。<h4>小見出し</h4>でも同様。

ページ作成の都合で中見出しや小見出しがたくさんあって、それらをすべて「もくじ」アンカー表示にすると煩わしい…といった場合にこの手を使うと良いのでは。
<h3>や<h4>のCSSクラス設定は適用されるので、見出しデザインは統一される。

【方法2】アンカー項目にしたくない箇所は見出しにしない

太字にする、色を変える、大きな字にする、といった方法で本文と区別する。

＝＝＝

上記の方法はあるにしても、見出しと本文が適切に作られたページなら、あまり細工をしないで「もくじ」作成機能を素直に使うのが良いのじゃないかなと思う。なんといっても早くて簡単にできるのだから。それより見出し・本文をわかりやすく書くことに力を入れるのが建設的かと。

■もくじのデザインカスタマイズ

QHM > skin > hokukenstyle >（テンプレート）> plugin.css

エディタで開いて　contents　を検索するとその下に設定がある。デフォルトでは「もくじ」の文字が入っているので別の言葉に変えるとか、色やラインの入り方を変えるとか、各自のお好みで。「もくじ」→「Contents」のように文字数を増やすなら、幅（width:3.5em;）も増やすのを忘れずに。

※カスタマイズしてみたら、Windows IE6ではタイトル（「もくじ」の部分）が見えない。ラインと肝腎なところ（アンカー項目）は見えているのだけど。IE6だけ表示が違うことがあるが、余計な変更をしちゃったのかな？

参照：QHMで制作→「簡単！ホームページ更新」

QHM(Quick Homepage Maker)でホームページを作る(5)--フォームの設置

QHM（Quick Homepage Maker）には多彩な機能がある。
参照：QHM（Quick Homepage Maker）でホームページを作る(3)--便利な機能

フォーム（問い合わせ等のメールフォーム）もその便利機能のひとつ。

…が、編集画面に「これをクリックするとフォームが付きますよん〜」とすぐわかるアイコンとか説明とかはない。
有料（有償）版なら解説書に設置法が載っているのだと思うが、無償版には載っておらず、無償版サイトにも見あたらない。

ネットにQHM関連情報サイトがいくつかあり、そこから情報を得ることができる。「QHM」とか「Pukiwiki」で検索すると見つけやすいと思う（Pukiwiki は QHM の元になっているオープンプログラム）。

フォーム設置がわかりやすいのはこちら→D++ CoolDesign Labo　のサイト。

ここはQHMのデザインカスタマイズ、サイトマップ作成、QHMのサイト・素材リンクなど実に多くの情報があり、解説もたいへん丁寧。QHMを使う、また、発展させたい方にはぜひ参考にしてほしいサイトです。

それにQHMでこれだけのハイレベルなサイトを作れるのがすごい！

私も少し前から見ていろいろ参考にさせていただいていたのだけれど、フォームの設置、ちゃんとこちらに書いてあるんですね(^^)

「ちょっと高度な自動返信フォーム」（D++ CoolDesign Labo）

設置してみた。→簡単！ホームページ更新

これは作りやすい（他の機能と同じく）　ホントに。

これまでフォームとかCGI設置でたいがい悪戦苦闘してきたのであるが(^^;)

いちばんスムーズにできたかなと。

CGIとMacはどうも鬼門というか…まず文字化けで苦労する、さもなくば「動作しません」…orz　どうすりゃエエのよ状態が何度もあった。Macでもプログラムのわかる人ならさっさとやれていると思うけど。

QHMのフォーム設置でもMacの場合はちょっと注意が必要。

フォームの「おまじない」を入れてページを更新、そこで文字化けが起きていたら、自分のPCの QHM > plugin > pkwkmail.inc.php をサーバーにFTPし直す。

その時、「ASCII　改行コードをWindows…」で転送する。

Fetchではうまくいかないかも。元々米国製ソフトなので転送の際に妙な具合に変換されてしまうとか。

Cyberduckは「環境設定」でコード設定を変えられる。

私のサイト（簡単！ホームページ更新）につけたのはごくシンプルなフォームだけれど、項目選択ボタンもつけられるし、注文や予約フォーム、アンケートにも使えると思う。

これに「確認画面」「送信完了画面」「送信者へ自動メール返信」も出てくるのだから、フォームとして充分の機能じゃないだろうか。

そして、フォーム項目、返信メールのメッセージなどをブラウザ画面で設定できる便利さ！　ファイル開いて設定してFTP…をその都度しなくていいのだ。

ずっと頭の隅にあった「フォーム・CGI…なんだかウマくいかない」もやもやも一気に晴れたし。あースッキリしたなぁ、と、頑固な○○が治った気分だ。

QHM制作者の北摂情報学研究所様、Pukiwiki開発者の皆様、D++ CoolDesign Labo様に、深く感謝です。

QHM(Quick Homepage Maker)でホームページを作る(4)--オフラインで確認？（追記あり）

Yotchanさんからコメントをいただきました。

バックアップしたサイトを
パソコン画面で確認するすべは
何かあるのですか？

→QHMでホームページを作る(2)--デザインカスタマイズ

従来のホームページの作り方だと、サーバーの中にHTMLファイル（や、CSS、画像等）がありますが、QHM（Quick Homepage Maker）システムではサーバー内にHTMLファイルがないのです（自分のPC内にもページのHTMLファイルは存在しません。QHMはすべてオンラインで作る仕組みだから）

では、オフラインで確認するにはどうするのか？　と思う方がいても不思議はありません。というか、私がそう思ったのですが。

サーバー内にHTMLファイルはありませんが、ブラウザ画面で「ソースを表示」させると、<html>〜〜〜〜</html>があります。このソースは従来の作り方のHTMLと同じです。

そこで、ソースをコピーして自分のPC内に「****.html」を作っちゃいます。

この****.htmlをブラウザで見ると、オンラインとほぼ同じ画面を表示させることができます。（注意１参照）

注意１：QHMは文字エンコードをUTF-8にしているので、そのままでは文字化けするかもしれません。その場合はブラウザの　表示 > 文字エンコーディング を日本語（Shift_JIS）に変えます。

デザインを変更したい場合

CSSでデザインを変更したい場合は、****.htmlのCSSリンク、画像リンクをローカルエリア内で正しくリンクさせるように変えます。

【追記】具体的な手順：以下は自分のPC内で行います

****.htmlを現在選んでいるテンプレートフォルダに入れます。

****.htmlをテキストエディタ（メモ帳など）で開きます。

◆CSSリンクの変更（PC内のCSSを****.htmlに反映させるための処理）

<head>〜〜〜</head>内の

<link rel="stylesheet" media="screen" href="http://＊＊＊.com/skin/hokukenstyle/□□□_01/main.css" type="text/css" charset="Shift_JIS" />

を

<link rel="stylesheet" media="screen" href="main.css" type="text/css" charset="Shift_JIS" />

に変更（上の太字部分を削除）します

CSSでデザインを変更する場合、細かく調整することもあるので、オフラインで作業できるほうがいいです（変更のたびにFTPアップロードするのでは面倒で大変(^^;)）

デザインを変えるCSSは主に２つ。テンプレート内の「layout.css」「color.css」。

layout.cssは全体のレイアウトを設定し、横幅、サイドメニューと本文コンテンツの横幅比率、メニュー位置の左右を変更できます。

color.cssは文字、色、見出し、メニューのデザイン、背景画像などを細かく設定しています。

【追記】具体的な手順：

layout.css、color.cssをテキストエディタで開き、中に書いてある設定　（width:786px;　とか　font-size:14px;　とか）を変更し、ファイルを保存します。

****.htmlをブラウザで表示させると、さっきの変更が反映されています。
このようにしてCSS変更→画面確認を続けます。

オフライン確認でオーケーになったところで layout.cssとcolor.cssをサーバーにアップロードします（サーバー内のファイルを上書きします）。

※layout.css、color.cssのコピーをとっておいてから変更作業するほうがよいです。

注意２：layout.css、color.css以外にもレイアウト・デザインを制御する要素があるので、オンラインでは少し違って見えることもあります。

【追記】デザインカスタマイズの方法はこちらのサイト→D++QHMcooldesignLabo で丁寧に説明しています。でも、オフラインで確認するやり方ではないかもしれません。

※Quick Homepage Makerについては　「簡単！ホームページ更新」をご覧ください。

QHM(Quick Homepage Maker)でホームページを作る(3)--便利な機能

「更新がしやすい」ことで使い始めたQHM（Quick Homepage Maker）。
…だが、いろんな機能が付いていて「へぇ、こんなことができるんだ」と、嬉しい意外感があった。

例えば、サイト内検索、コメント欄、簡易掲示板、カレンダー、フォーム…。
こういうのを自分で作るとしたら大変だと思う。私はプログラミングができないし、設置するならどこかからレンタルするしかないかなと（それも面倒そうだし、無料のものは広告付きだったりする）。

しかし、これらの付加機能をQHMは「簡単に」設置できてしまう。

１フレーズの文言を編集画面に入れるだけで設置できる機能：

掲示板　→　#article
サイト内検索　→　#search_menu　または　#search
最近の記事n件を表示　→　#recent(n)
人気記事n件を表示　→　#popular(n)

編集画面のアイコンをクリックすると設置できる機能：

コメント欄
アクセスカウンター

あまりに簡単に付けられるので、「これだけでホントにできたの？」と呆気にとられるくらい。

※上記以外にもいろいろある。無料版と有料版で装備と操作方法が若干違うようだ。

掲示板はシンプル機能なので細かなことはできないが、ホームページの付加としてちょっと使いたい向きには充分ではないだろうか。

QHM(Quick Homepage Maker)でホームページを作る(2)--デザインカスタマイズ

QHM（Quick Homepage Maker）のデザインカスタマイズを試行中。

QHMは、すごく大雑把に言えばこんな感じ。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

コンテンツ（文、写真）を入力
　↓
PHPで制御-----デザイン（CSS）
　↓
ファイルを出力

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

コンテンツを入れさえすれば、ページのファイルが出てくる。

テンプレート（ひな型）はあらかじめデザインされていて、そこにコンテンツを流し込んでじゃんじゃん作っていくというやり方だ。

デザインはCSSで設定しているので、CSSを変更すればデザイン変更ができる。

ただ、１つのデザインを全ページに適用させる方式だから、各ページのデザインを変えるとか、バリエーションを加えるのはちょっと難しい。
QHMの編集画面に直接HTML、CSSを記述することで個別のバリエーションが作れるとは言え、これをやると「HTML、CSSを使わずに更新できる」利点が少々損なわれてしまう。
自分で記述し、自分で更新するならいいのだけど、「HTML、CSS知りません」という方に更新してもらうのはキツイだろう。

よく更新する箇所と、しばらく更新不要な箇所とで、デザインの変化や作り込み度合いを分けるのが良いのではないかと。

私のサイトでCSSをいじってみた。現状がコレ→「簡単！ホームページ更新」

デザイン変更しても更新しやすさに問題がない部分：
ヘッダ画像・色・メニューバーやコンテンツエリアの横幅・メニュー画像・見出しの背景画像

編集画面にHTMLを記述（CSS併用）した部分：
メニュー項目の画像バリエーション・本文大見出しの背景画像バリエーション・文字ブロックの背景に画像を配置

※部分的にHTML、CSSを記述してバリエーションを持たせても、従来の作成方法よりラクかな〜という気はする。

デザインもいくつか作ってみた…→デザインサンプル

「デザインサンプル」のページURLは、QHM v4の機能で次のように短縮されている。
http://ryuseisha.com/kantan/index.php?go=3IErdB
ブラウザのURL表示は　http://ryuseisha.com/kantan/index.php?デザインサンプル

google検索した場合でも日本語タイトルが出てくるのが良いところ。「QHM デザインサンプル」で検索してみてください。（Firefox、Safariの場合）

QHM(Quick Homepage Maker)バージョンアップ

QHM(Quick Homepage Maker)のバージョンが３から４に上がっていた。

…ということに気づいたのは、QHMでサイトを作られているYotchanさんからコメントをいただいたから。Yotchanさんは昨年（より前？）からQHMを駆使して充実したサイトを作っていらっしゃる。

Yotchanさんのサイト「よつもと鍼灸院」を見て、少し違うようだけど…？と調べてみたら、バージョンが違うのだった。私が使っていたのはv3.66。Yotchanさんはv4をお使いになっていた。

で、私もQHM（無償版）をv4.10にバージョンアップした。

v4の機能で目を引くのは「ファイルの名前（URL）」。

QHMはファイル名が日本語でもオーケーなのだ。これは以前からあった機能だけれど、v3まではブラウザのアドレス欄に

%E3%81%AB%E3%81%A4%E3%81…みたいな長い表記が出てきてしまう（CGI、PHPを使って日本語が入っているとそうなる）。

これがv4では

http://…（通常のアドレス）＋日本語

で表示される（ただし、一部ブラウザは未対応。Firefox、Safariは対応している）。

これはとても良い。ページタイトルとファイル名を同じにできて、表示もスッキリだから。

そして、この日本語含みファイル名（URL）をメールなどにペーストするときは、短縮URLが自動で生成されるようになった。

私はv3を使い始めて「日本語ファイル名って、どうなんだろう」と悩んでいたので、この新機能は悩みを一つ解消してくれた。

デザイン模様替え

新年度なのでブログのデザインを少々変えた。
ヘッダに背景画像は使えないかと思っていたら、ちゃんと使えた(^^)
（あら、いつのまに…。当初からそんなオプションあったっけか）

ヘッダに使った写真は、昨年の今頃、宗像市・さつき松原の海岸で撮った。

左の島影が勝島と神湊（こうのみなと）、右が地島（じのしま）。
博多じゃないんだけど、玄界灘つながりということでご勘弁。

ヘッダ下は「漢委奴国王」金印スタンプのお手紙ふうに。
建武中元二年（A.D.57）の年号は入ってませんが。

ブログの文字色変えてみた

ブログのCSS（スタイルシート）をいじって、文字色を変えてみた。
リンクのオンマウス背景色とかも。
文字色がぼんやりしていて見づらいではないかなー、と少々気になっていたので。
他のテンプレートデザインは好みのが無かったし、シンプルなデザインはそのままにしておいた。

ココログ（ベーシック）でCSSを変更できる、と初めて知ったのだけど、背景画像使ったりはできないのかな？
装飾のために画像バリバリ使う必要はさらさらないんだけどね。

※マイフォトは個別の変更はできないみたい。なので、別テンプレートに変えた。このデザインが気に入っているのではないが、他はイマイチなので致し方なし。
ついでに「三角西港」の写真を追加（九州たび旅（天草））。

ブログは基本的にCSSでレイアウトされており、テーブルはカレンダーくらい（ココログの場合。他社のもたぶん同じ）。
従来のホームページの、テーブルを幾重にも組んだレイアウト手法は徐々になくなっていくのじゃないかな。

というわけで、私も過去に作ったサイトの作り変えを始めている。でも全部変えるのは大変(^^;)
それに、テーブル組みは、OS・ブラウザの違いで崩れる度合いが少なくて、とにもかくにもレイアウトは保たれて見えるが、CSSレイアウトは合わないブラウザで見ると崩れ方がすごい。２段組のはずが１段になってるとか。
複数のブラウザでマトモに見えるように組むには、試行錯誤と細かい注意が必要のようだ。