わたしのデザインセンスではこれが精一杯です
ここは、テンプレートのデザインを
作ってくださるかたに読んでいただきたいページ
テンプレートのスタイルシートが、どんな感じで設定されているのか簡単に説明します。
画像を使わないでテーブルを使って簡単に説明しますので、わかりづらいかもしれませんがご勘弁を、ソースが理解できるかたなら、すでにこのページを見る必要は、ありませんね。
まあ一応お約束ということで
基本セットのデザインは、こんな感じ
sotowaku
|
入れ子になってます。(笑)
簡単に説明すると、内枠は、headerとmain-boxとfooterの、つっかえ棒です。
main-boxは、mainとmenu を左右にフロートさせる枠です。
別に内枠だけで、それぞれのDIVに巾を設定して、mainとmenu を左、左でfloatさせてもいいかなと思ったんすけど、違うレイアウトのデザインに変えるのに都合がいいような気がしてこうしてます。考えすぎか?
別の理由として、ビルダーの編集画面で違和感無く操作できるように外枠をセンタリングせずに(floatしたのがホームページビルダーの編集画面で左に寄って見えちゃうでしょ)、内枠の左右のマージンで外枠を広げてます。
どうして入れ子なの?
全体のデザインを決定しているのは、外枠と内枠をつけたとこかなと思います。
スタイルシートを使ってデザインするのに、普通こんなに枠は必要ないんですけど、sotowaku、uchiwaku、main-box、iframeのheader_menuとfooter_menu、そしてbodyに背景画像が使えるので複雑なデザインも簡単にできるのではと思い、わざと多めにDIVでくくってみました。
まあ、テーブルと違って入れ子にしても表示が遅く感じないスタイルシートだからこそできるわけですが、やっぱりヘンでしょうか?昔テーブルで、くくりまくったデザインを作っていた、名残でしょうか(笑)
IFRAMEに関して
ヘッダーとフッターのインラインフレームの巾は、100パーセントなのですが、高さは100ピクセル固定になってます。 高さも100パーセントにしたかったのですが、ビルダーの編集画面で見ると縦に長ぁーーーくなってしまうので、やむなくピクセル固定にしました。
ヘッダーは、もうすこしボリュームをつけたかったのですが、あっさりしたデザインができなくなってしまうので、小さめの100ピクセルになってます。
もっと厚みが欲しいときは、ヘッダーの下のトップページ用の、infoと各ページ用のinfo_pageを利用してみてください。
FLOATに関して
2カラムデザイン(子のページ)
これは、main-boxの中でfloat使ってmainとmenuを並べてます。
main-box
|
もちろんSEO的には、menu が、後でしたね。
いやそうじゃなくって、音声ブラウザが読むときに先に長いメニューを読ませないでコンテンツを先に読むようにとの配慮です。(言い訳です)
外枠の、いちばん上に<h1>を入れるのも考えたのですが、デザインを優先して見送りました。(おおわらい)
あとは、floatで回り込ませるので、お約束で<br clear=all>入ってます。
clearプロパティにallという値がないってのはしってますけど、このテンプレートはホームページビルダー専用なので、all値をboth値と同じように扱うWinIEを優先してます。(笑)
ただ、この<br clear=all>を編集中に、消しちゃわないか、ちょっと心配ですね。
誤って削除しても表示だけは、大丈夫なように保険をかけて外部スタイルシート側のfooterにclear: both入れてるんですけど考えすぎでしょうか?
3カラムデザイン(トップページ)
拡張セットでは、トップページで複雑な2〜3列のデザインが使えるように、さらにmain_box02でくくりmenu02とmenu02を放り込み、無理やり(?)3列にしてます。(めっちゃ入れ子です。)
main-box
|
普通に2列のスタイルをトップページで使いたいかたは、必要ない部分を削除してください。
(テンプレートでは、どこからどこまでを削除すればいいのか、わかるようになってます。)
プライオリティー?!
えーと、ホームページビルダー専用テンプレートですのでブラウザは、IEを優先してます。
W3CよりもIEを優先します。 そして、IE対策を優先します。(キッパリ)
同じ理由で、XHTMLじゃなく4.01 Transitionalで作ってます。
つーか、XHTML自体が、よくわからっとらんのですが?
つまり、どんなにHTMLの記述が正しかろうが、ビルダー君にエラーと判断されないことを基準としております。 ビルダー君のHTML構文チェックを使ってエラーがでないようにしてます。
わたしのHTML構文エラー時の動作は、【重大なエラーのみ、修正ダイアログを開く】の設定なのであまりアテにならないかもしれませんが...
とりあえず、プレビュー画面でちゃんと表示されても、ページ編集画面で極端にレイアウトが崩れるようなスタイルは、なるべく使わないようにしております。
画像の名前のつけかた
テンプレートのデザインを変えるには、外部スタイルシートを使って背景画像やアイコン画像等を変えてデザインの変更しています。
スタイルシートをしっているかたならstyleフォルダを開いていただくとわかると思いますが、スタイルの名前と画像の名前は、同じにしてあります。
スタイルを変更するのに、フォルダごと上書きしたとき、無駄なファイルができないようにするためです。 もちろんスタイルの名前と画像の名前が同じほうが理解しやすいって事でもあります。(やっぱし考えすぎかオレ)
画像の加工はどうするか?
何度も言ってますが、ホームページビルダー専用のテンプレートなわけですから、基本的にホームページビルダーだけで作れるようにしてあります。
ヘッダーやフッター及びトップページに使うイメージ画像は、ホームページビルダーについてくる画像加工ソフト(?)、ウェブアートデザイナー形式で保存したものを添付しております。
レイヤー情報が保てるので、サイトロゴのテキストを変更するだけで使えるようにして作っております。 いくら高機能でもフォトショップのデータだと使えないかたがいると思いますので(苦笑)
画像の大きさは?
テンプレートの内枠の最小の巾を700ピクセルと決めました。(なんとなくキリがいいから)
ですので上部に入れる大きいイメージ画像のサイズも巾が700ピクセル、高さはトップページのイメージ画像で200ピクセル、子のページだと100ピクセルを標準と勝手に決めました。
このサイズより大きいとページに直接貼り付けたときにレイアウトが崩れるスタイルが出る可能性があります。(但し背景画像に設定するものは例外です。)
サイトロゴはどこにあるの?
header_menu.htmlを開いてみるとわかると思いますが、左上のサイトロゴ画像は、ここにはありません。 あるのは透明のGIF画像です。
この透明画像に、お約束のトップページへのリンクを入れてあります。
サイトロゴ自体は、header_menu.htmlの背景画像に含まれます。
メニュー部分までを、一枚の画像で作ったものです。
header_menu.html の中のテーブルのセルの上下にそれぞれタイトルの背景画像とメニューの背景画像を入れてもいいかなとも思ったんですけど、直接HTMLに書かないほうが、後でデザインを変えるのに都合がいいのでは、と思いスタイルシート側で背景を設定してます。 フッター部分も同様です。
んで、当然なのですが、A:HOVERで背景色を設定するとマウスを乗せたときに背景画像が見えなくなってしまいますので使えません。
どうしても使いたいかたは、サイトロゴを別に作ってください。
大手企業のサイトで、A:HOVERで背景色を設定しているところは、ほとんどないような気がするので見送りました。
そんな大手のサイトと比較してもしょうがないのですが(笑)
簡単ですが、以上でテンプレートの説明は、終わりです。
じつは、このページって自分が、どうやってテンプレートを作ったか(特に名前)を、忘れないようにメモ代わりに書いてるってことが、あったりなかったりしてます。(笑)
大募集!
デザインを作るのが苦手なわたしなので、バキバキテンプレートのデザインを作ってくれるかたを大募集しています。 デザインができたら、このサイトで紹介させてください。
cssフォルダ以下のデザインファイルが入っている部分をダウンロードできるようにしていただけるページを作っていただけると助かります。
※HTMLファイルは入れないでください(DIVの入ってるとこね)。
この部分だけ再配布をしないよう、お願いいたします。
あなたが作ったデザインは、あなたのオリジナルですので、ここで配布はしません。
あなたのサイトのトップページとダウンロードのページをリンクさせてください。
でわ、よろしくおねがいいたします。Mailのページへ
テンプレートデザインを作る簡単な方法
前に見てたページに戻る