自分用技術メモです。
何度か書いたとおり、知り合いの中小企業の社長に頼まれて、無料でホームページのメンテをしている。
こちらがお金を受け取る立場であり、それに加えてこれは以前までは書いてなかったが、相手の社長と言うのが何つーかヤンキー気質とでも言うのか、ちょっとしたモノを他人にあげるのが大好きなタイプなのだ。それで私もお菓子を貰ったり賞味期限切れ間近のコンビニ弁当を貰ったりしている。びんぼ～人だから食費が浮くのはありがたいんだよ悪いか。
こちらからお返しできることと言ったら、こんなことしかないのだ。
今回はその社長さんから、アクセスマップを貼り付けたページと問い合わせフォームのページを作ってほしいと言われた。
まあなんとかなるだろうと思って気軽に引き受けた。
一番苦労したのが、グローバルナビゲーションもどきのメニューの改造だった。cssがわからないので、ホームページビルダーの古い知識を使って、マウスオーバーでボタンの色が変わるメニューをでっち上げた旨を以前に書いた。
メニューの項目を増やすためにボタンの幅を削る必要が生じた。ペイントでちょいちょいやっちゃえばいいかなと軽く考えていた。ところがボタンをGIF形式で作っていた。GIFをペイントでいじると、ノイズが乗るのだ。
これが
こうなる。
細かい胡麻塩が発生していることが画面で確認いただけるでしょうか？
まともなデザインツールを持っていないから苦労したが、結局、ホームページビルダーに付属のウェブアートデザイナーを使えばノイズが乗らないことがわかった。
ただしウェブアートデザイナーの使い方も、一筋縄ではいかなかった。やりたいことはボタンのトリミングだけなのだが、それがわからない。ヘルプを調べても出てこない。これも試行錯誤の結果、「四角形で切り抜き」という機能を使えばいいことがわかった。
こいつだ。
このボタンをクリックしてドラッグで範囲選択すると、下の方に「切り抜き」というボタンが現れる。そいつをクリックすると、選択範囲のコピー＆ペーストを一気にやってくれる。その後、元のボタンを削除すれば、トリミングしたのと同じ結果になる。
トリミングが標準的な手順で実行できないのは、ウェブアートデザイナーがホームページビルダーの古～いバージョンから付属している機能だからだろうか？
保存も面倒くさかった。GIFで保存するには、ボタンを選択して「ファイル(F)」から「Web用保存ウィザード(W)...」を選び、ウィザードの指示に従うのだ。「名前を付けてキャンバスを保存（V)...」や「オブジェクトの保存(B)...」を選択すると「.mif」という拡張子のついた形式でしか保存できない。
実はこれだけでは済まなくて、メニューにボタンを追加すると、ボタンが本来表示されるべきでない場所にダブって表示されたり、マウスオーバーで無関係なボタンの色が変わったりするという不具合も発生した。メニューが暴れるというやつだ。
これはホームページビルダーのロールオーバー機能を使用すると、ヘッダに次のような宣言と、
HpbImgPreload('HPB_ROLLOVER**', '通常時のボタン画像', 'マウスオーバ時のボタン画像');
ボディに次のようなタグが、自動挿入される。
＜HpbImgPreload('HPB_ROLLOVER**', '通常時のボタン画像', 'マウスオーバ時のボタン画像');
a href="リンク先" id="HPB_ROLLOVER**" name="HPB_ROLLOVER**" onmouseout="HpbImgSwap('HPB_ROLLOVER**', '通常時のボタン画像');" onmouseover="HpbImgSwap('HPB_ROLLOVER**', 'マウスオーバ時のボタン画像');"＞＜img src="通常時のボタン画像" name="HPB_ROLLOVER**"＞
**というのは連番である。これが重複するのだ。適当な番号に変更して重複しないようにしたら、不具合解消した。
cssができてグローバルナビゲーションが扱えたら、ぜってーぜってーこんな苦労しなくてよかったんだろうな。弥縫策に走ってないで、いい加減css勉強しろよ＞自分
これに比べるとマップの挿入は楽だった。メニューバー「挿入(I)」から「マップ(3)...」を選べばいい。『ホームページ・ビルダー18パーフェクトマスター (Perfect Master SERIES)』によるとバージョン13から利用可能になった機能だそうだ。
メールフォームの設置が最後の難関だ。htmlでフォームを記述しただけだと日本語サイトでは文字化けを起こすので、サーバ側で動作するcgiを使うしかないという知識はあった。幸い利用しているサーバはメールフォーム用cgiを提供してくれていた。サンプルHTMLまであった。
それをちょいちょいとカスタマイズして、自分宛に試験送信。
化けた！
見事に文字化け！
なんでだ！？
説明サイトをよく読むと「対応している文字コードはShift-JISのみ」と書いてある。
そもそも私はどの文字コードでHTMLを書いているのか？それをShift-JISに変えるにはどうしたらいいのか？
HTMLのヘッダを見たら、UTF-8とあった。ヘルプをUTF-8で検索したら、文字コードの変更方法がヒットした。ちなみに最初にShift-JISで検索したときは、何もヒットしなかった。このへんがホームページビルダーのヘルプの使いにくいところである。ぶつぶつ。
メニューバーから「ツール(T)」「オプション(O)...」を選択し、表示されたオプションダイアログボックスの「ファイル」タブにある「出力漢字コード(O)：」を変更すればいい。
要するにHTML全体の文字コードをUTF-8からShift-JISに変更することで、文字化けせずにメールが送信できるようになったってことだ。
最初に述べた通り、今回は技術的な備忘メモなので、オチはつけません。
スポンサーリンク
