解決済

clip!clip!
Ads By Google

左右のスペースをなくす

左右に余分な空白があって消したいんですが方法ありますか?

2006-04-08 18:44の質問
スペース      
スペース
商業施設の物件開発、テナント導入、環境計画・設計・施工
www.space-tokyo.co.jp
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(3)

2.

2006-04-08 21:09:50ベスト
あなたのご使用のテンプレートの左右の空白は、不必要なものではなく本来は有用な空白です。15インチのモニターやノートパソコンで閲覧した時にでも、左右のスクロールを使用する事無く見えるように配慮されたサイズなのですが、それでもどうにかしたいのであれば、CSS を変更して、各 ページ ( トップ、個別記事、カテゴリ、月別 ) の表示を変えるようにしなければなりません。

まず、CSS の中の、

#container{} の幅を広げます。width:722px; を調整して下さい。ヘッダー画像を変更したいのであれば、その画像の幅を中心に考えていけば良いでしょう。変更したい画像の幅が 800px ならば #container{} の幅も 800px に合わせて変更すれば良いのです。それ以上の幅の大きい画像はお薦めしません。閲覧される方が、よほど大きなモニターで無い限り、見る事ができなくなります。

ヘッダー画像の変更は、#banner,#subbanner{} の中でおこないます。width と height を新しい変更したい画像の幅と高さに書き換えます。background:url のところに新しいヘッダー画像があるアドレスに書き換えます。

そうするとヘッダー画像が入れ替わり、ブログの表示幅が現在よりも広がります。

次に、本文部分の変更です。まず、#blogcontainer{} の幅を広げます。仮にヘッダー画像が 800px だとしてお話を進めていきますね。ここの部分も width を 800px に書き換えます。

次に #content{}、#blog{} 共に、width を書き換えます。広げたい希望の幅に書き換えて下さい。

次にサイドバーの幅を変更します。
#links{} の部分の width を変更して下さい。

#content{}、#blog{} + #links{} の幅は、
#blogcontainer{}、#container{} の幅を超えてはいけません。

下にブログの構成図をトラックバックしておきますので、それを参考に調整して下さい。
回答レベル : 回答

とても詳しく教えて頂きありがとうございました。

1.

2006-04-08 18:55:19
ごめんなさい。
あなたのブログを見てみないと、どういう状況なのかがわかりにくいです。よければ、URL を記載して下さい。
回答レベル : 補足要求

3.

2006-04-08 22:33:46
AQさんの回答のように左右の空白はいろんな解像度のディスプレーを使う人がいるので、それを考慮して設定しています。

もし、左右の空白をなくす場合には、右サイド(約210px)の部分は固定にして、本文(記事)の部分を画面の解像度に応じて自由に幅が決まるようなデザインにする必要があります。

幅が固定のデザインはCSSでfloatというものを設定することにより、右・左に配置することで対応できますが、
解像度に応じて自由に幅の変わるデザインは、floatで作るのは困難です。

そこで、#content及#linksにあるfloat:left;を削除します。また、#container、#blogcontainer、#content及び#blogをwidth:100%;に変更します。次に本文の左右の空白を設定するために、#blogcontainerをpadding-left:20px;padding-right:230px;とします。空白の幅はお好みに設定してください。ただし、右側はサイド部分の210pxより大きい値に設定しましょう。最期に#linksに次の項目を追加します。position:absolute;top:230px;right:0px;を追加してください。お好みでtop:230px;right:0px;を調節したり、#links内のpaddingやmarginの値を調節してください。

タイトルのある部分の画像がちょっと気になりますが、これで幅が解像度にあわせて変更するデザインになります。

変更する前に、元のCSSをコピーしてバックアップはとっておきましょう。
Ads By Google

コメント(2)

#1.  rd
2006-04-08 19:45:23

http://blog.livedoor.jp/tentomo1104/

これです。あと画像をもう少し大きくしたいんですが可能なんでしょうか?

#2.  AQ
2006-04-08 23:26:41

>> rd さん
ベストありがとうございました ・・・ と
言いたいのですが、リンク先をクリックしても
ページが表示されません。?
どうなっているんでしょう?

トラックバック(3)

トラックバックURL:

ブログの構成を知る

2006年03月14日 AQ ブログのカスタマイズをしていく上で、一番してはいけない事は、適当にタグを追加したり、削除したりする事です。 計画性の無いカスタマイズは、うまく事が運んだ時は良いのですが、失敗した時などは、どこがおかしいのかを見つける事さえ難しくなりま...

Pet Lovers Only♪ at 2006年04月08日 21:10:54