ホームページビルダーで当サイトのテンプレートを開くと、勝手に一部のタグを書き換えられてしまい、結果、デザインが崩れる場合があります。

具体的には、本来htmlの1行目は一部の古いテンプレートを除き、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
となっている必要があるのですが、これがビルダーで開いた瞬間に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
に書き換わってしまう現象です。
これだけで崩れる原因になる場合があります。もし、既にお手元のhtmlファイルが書き換わってしまった場合、一旦メモ帳などのテキストエディタで開いて1行目を戻して下さい。
その後、以下手順でビルダーの設定を行って下さい。設定を行う事により、勝手に書き換わるのを防ぐ事ができます。

「バージョン13」ご利用の方は以下作業の前にこちらをご覧下さい。(2009/02/10)





ここでは、ホームページビルダー(バージョン12)をサンプルに、お勧めする初期設定をご紹介させて頂きます。
(※他のバージョンであっても、同じような設定箇所があるはずなのでチェックしてみて下さい)


■まず、上部メニューの「ツール」から「オプション」を選択。すると以下のようなウィンドウが出てきます。
上部のタブから、「ファイル」を選びます。



■以下の2箇所のチェックが入っている場合、外して下さい。(外してある場合はそのままでOK)
この「DOCTYPEを出力する」にチェックが入っていると、htmlファイルの冒頭を勝手に書き替えてしまい、デザイン崩れの原因になります。
「HTMLソースにGENERATORを組み込む」については、単に「ビルダーで作ってますよ〜!」というタグが入るだけでチェックしたままでもいいのですが、
余分なタグなので勝手に入らないようにしました。

余談ですが、ビルダーで編集していると、勝手に見知らぬファイル(○○.bak)が出現して邪魔だったりします。
これはバックアップファイルなのですが、実際に使う事はあまりないので、不要な人は、この画像の右側にある「バックアップファイルを作成する」のチェックを外しておきましょう。



■続いて、上部のタブから「ソース編集」を選択。以下の画像のように、「小文字」に設定します。


以上で基本設定は完了です。
ここから下はついでにやっておいてもいいかなという設定についてご紹介致します。


■ついでにやっておいてもいい設定をご紹介。

■自動修復機能を使わないように設定する。

ビルダーに備わっている「自動修復」機能なんですが、やたら自動修復されてかえって困る場合があるので、ほどほどに設定しなおします。
上部タブメニューから「一般」を選択。



以下の部分のチェックを外す。
 下のリストメニューから「重大なエラーのみ、修正ダイアログを開く」を選択する。
 (ある程度htmlが分かるなら、「すべてのエラーを無視」でもOKです。)


以上で設定終了です。



■びっくりマークを見えなくする方法。

ビルダー編集画面で のマークがやたらあって邪魔だと思った事はありますよね?
コメントやスクリプトタグを使った場合に入るマークですが、気になる人はマークが見えないようにしましょう。

まず、上で説明したオプション用のウィンドウを開きます。
次に、「表示」タブをクリック。
左上の項目「編集記号」内にある「コメント、スクリプト記号」のチェックを外せばOKです。


■メニュー画像が大崩れで見える場合

ここからは、初期設定とは関係ありませんが、テンプレートをビルダーで開くとメニューが大崩れで編集できない場合があります。
特に、メニューが画像になっているタイプなどは、本来横並びのはずのメニューが1個ずつに並んで悲惨に見えます。
ここでがっくりこないで下さい!
プレビューで見るとちゃんと表示されるので問題ありません。
編集画面では編集しづらい場合は、メニュー部分だけhtml側で編集してみて下さい。
大切なのは、プレビューで崩れていないかチェックすることです。根気強く頑張りましょう。

補足ですが、divタグレイアウトと表記の無いものはビルダーでも崩れは少ないと思いますのでそちらをチャレンジしてみてもいいでしょう。