テンプレートのサイズに気をつけよう！

2004.10.06

テンプレートのサイズに気をつけよう！

(7)

こんにちは♪

今日はすっごく長くてすみません。
ＴＯＰページにテンプレートを使うとき、テンプレートの横幅のサイズに気をつけてみましょう。

現在、旧広場型以外の新デザインはページの上部にページタイトルと７つのナビゲーションバーが出るようになっていますが、この幅が大体760pxあります。この幅は後でも書きますが、画面表示の推奨サイズに近い数字です。また、サイドメニューボックスの横幅が大体180pxあります。そして現在楽天広場にはＴＯＰページのデザインが５タイプありますが、サイズで分けると下記の４タイプになります。

・両側にサイドメニューボックスがある「中央メイン型」（400px）
・両側にサイドメニューボックスがある「旧広場型」（400px～580px）
・片側にサイドメニューボックスがある「左メイン型」、「右メイン型」（580px）
・サイドメニューボックスなしの「メイン型」（730px）

これらのタイプによって、自由欄の横幅が変わってきます。この横幅にあわないテンプレートを使用すると右側にどんどんはみ出してしまってちょっと見づらいページになってしまいます。
（各サイズは私が実際に試して確認したサイズなので、厳密には若干変わってくると思います。また、旧広場型は厳密にはサイズが違います。テーブルなしでただ書き込むときは580pxできちんと収まるのですが、テーブルを使うと（テンプレの場合も）なぜか両側に100px位の空きが出てしまい、400px以上のものを入れると横にどんどん広がってしまいます。）

見づらいというのはどういうことかと言うと、ＨＰの見やすい横幅は通常800px（ピクセル）くらいが推奨されています。企業のＨＰを見ると大体それぐらいでデザインされています（楽天市場もそうですね）。テンプレートの横幅があわないものを使うとこの800pxを超えて右側にどんどん広がってしまい、通常縦のスクロールバーしか表示されていないところが横のスクロールバーも表示されてしまい、これをスライドしないと全体が見えないということになってしまうのです。

ＰＣの画面は1000pxくらい表示できるのになぜ800pxなのかとお思いの方もいらっしゃるかもしれませんが、ＰＣの画面の表示サイズは、ふつう「800 X 600 px」、「1024 X 768 px」のどれかに設定されています。ということは、ホームページの表示も、それらのサイズに限定されるということです。

自分のパソコンで全体が表示されていても、相手のパソコンでは収まりきらないこともよくあります。縦幅ならそれほど気になりませんが、横幅が収まっていない場合、左右にスクロールしながら読むのはちょっと面倒ですよね。

そこで画面の表示サイズは「800 X 600 px」（だいたい15インチモニタの大きさ）あたりが推奨されています。（中には「640 X 480 pxなんだけど・・・」という方がいらっしゃるかもしれません。ただ、主流のサイズではないのでそういう方にはちょっと我慢していただくということで。）

では、実際にテンプレを選ぶときどうすればいいのかと言うと、ソースを見ると大抵最初の方のテーブルタグの中にwidth="580"といった具合に横幅が定義されていると思います。そのサイズにしたがって選んでみましょう。中には書いていないテーブルもあります。そういうときにはちょっとアナログですが、見本をものさしで入りそうかどうか測って見ましょう（笑）。

また、自分のＨＰレイアウトの設定を変えるという手もあります。一番最初にデザインテーマを選ぶとそのまま使っていらっしゃる方は多いと思いますが、実はデザインテーマを変えずにレイアウトを変えることが出来ます。「デザイン設定」のところに上級者用と書かれたコーナーがあります。ここをクリックすると一番上に「レイアウトの設定」という欄がありますからここをクリックしてください。後は使ってみたいレイアウトにチェックを入れて登録ボタンを押すだけです。この「上級者」という言葉を見てクリックしてみた事も無いという方が以外にいらっしゃいます。ですが、それほど難しいコーナーではありません。ぜひやってみてください。（出来れば旧広場型は避けたほうがいいです。きれいに表示されません。現在旧広場型を利用されている方も「左メイン型」、「右メイン型」を選択するとキレイに画面に収まると思います。）

さて、メイン型を選択する場合ですが、タイトルバーのサイズが760pxもあるのになぜ730px？とお思いかもしれません。これは私が実際にテーブルを入れてみた実感なのですが、760pxの物を入れるとなぜかタイトルバーより右側にはみ出します。中央にきれいにまとまるのは730px～735pxくらいまでのようです。なので、「どうしても大きく作りたい！」というのでなければこのサイズよりも小さめのものを入れる事をオススメします。

初心者のためのＨＰ作成公開講座はこちらから。
コメント欄でやり取りをしているので、こちらもチェックしないと分らないよ♪

人気blogランキングに参加しています。役に立った！と思ってくれたら、１日１ぽちっと応援してね♪

１日１回楽天ラッキーくじ♪いまだに当たった事のない私。忘れないようここに貼ってみた。

本日のおすすめショップ
木香屋
木製と言うとちょっと野暮ったいイメージがありますがこのショップで扱っている商品はどれもとってもおしゃれ！そしてユニークです。写真のとり方も美しく、これを使うとアフィリエイトショップのセンスも良くなります。

今日のNaho
久しぶりのいいお天気！布団も洗濯物もばんばん干しました。リサイクルショップの商品発送も滞っていたので一気に片付けました。子供たちも８時には寝ちゃったからこれからたっぷり時間もあるし、今日は充実しているなぁ。

手抜きを知らない頑固職人さんが作る、心温まる、毎日が楽しい木製生活雑貨