ページサイズ		800×600px用 1024×768px用		動作しない場合はjavascriptを有効にして下さい
エリア	上 下左 下中 下右	エリア幅・高さ	幅px 高さpx
パーツ 色指定	背景 文字 タイトル 未読リンク 既読リンク
	赤 6桁カラーコード 緑 青

タイトル 上ボックスの文字。 未読リンクと既読リンク。
タイトル 下左ボックスの文字。 未読リンクと既読リンク。	タイトル 下中央ボックスの文字。 背景色と文字色のバランスを考え、見やすい文字になるように心がけましょう。 背景色と文字色が似た系統、又は明るい色同士・暗い色同士だと見づらいです。 未読リンクと既読リンク。	タイトル 下右ボックスの文字。 未読リンクと既読リンク。

HTMLソース

CSSソース

使い方[ヘルプ]

レイアウトデザインタブのページで色・幅・高さを指定し、HTMLソースタブやCSSソースタブをクリックすると、その色・幅高さを再現するのに必要なソースが表示されます。
コピー＆ペーストしてご使用下さい。

1. 「レイアウトデザイン」タブページで、ページ全体の横幅を設定する。
2. 「レイアウトデザイン」タブページで、各パーツの幅・高さを設定する。
3. 「レイアウトデザイン」タブページで、背景色や文字・リンク色を調節する。
4. 「HTMLソース」タブページで、表示されているHTMLソースをコピーする。
5. コピーしたHTMLソースをエディタに貼り付け、作業フォルダに任意の名前で保存する。
6. 作業フォルダ内に「css」というフォルダを作成する。
7. 「CSSソース」タブページで、表示されているCSSソースをコピーする。
8. コピーしたCSSソースをエディタに貼り付け、作業フォルダ内に作ったcssフォルダ内に「base.css」という名前で保存する。
9. ブラウザで、手順5で保存したHTMLファイルを表示する。
10. 気に入ったデザインが出来るまで1～3を繰り返し、HTMLソースとCSSソースを最新のものに差し替えてブラウザで見る。

ページサイズ

ディスプレイ(画面)の解像度が800×600px用と1024×768px用を選択します。

800x600を選ぶと、画面解像度の横幅が800ピクセル以上なら左右の横スクロールバーを表示せずにページを閲覧できるデザインになります。
1024x768を選ぶと、画面解像度の横幅が1024ピクセル以上なら左右の横スクロールバーを表示せずにページを閲覧できるデザインになります。

最近は1024x768以上が主流ですが、古いノートパソコン・ディスプレイを使っている方の場合、800x600pxの可能性もまだ十分にあります。

エリア

「エリア幅・高さ」「パーツ色指定」はこのエリアで選択したエリアに関して変更ができます。
変更したいエリアを選択してから色や幅高さを変更しましょう。

なお、エリアを切り替えても元のエリアの色や幅高さは保存されています。元のエリアを選択すれば、その色や幅高さ情報が自動的にセットされるのでご安心を。
(ただし、ブラウザの再読み込みを押すと、色情報や幅高さ情報はリセットされます。)

エリア幅・高さ

選択されているエリアの幅(width)と高さ(height)を指定できます。
幅はページサイズの横幅－24以下がよいです。
(上下スクロールバーの幅が17px、＋αの余裕の幅が7px位)

なお、ブラウザの再読み込みを押すと、色情報や幅高さ情報はリセットされますのでご注意を。

パーツ色指定

背景、文字色、タイトル(h1)色、未読リンク色、既読リンク色を指定できます。
スライドバーや左右矢印、カラーコードを直接入力して変更ボタンを押す等で好みの色を探してください。

なお、ブラウザの再読み込みを押すと、色情報や幅高さ情報はリセットされますのでご注意を。