回答(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{} の幅を超えてはいけません。
下にブログの構成図をトラックバックしておきますので、それを参考に調整して下さい。
まず、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
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をコピーしてバックアップはとっておきましょう。
もし、左右の空白をなくす場合には、右サイド(約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 さん
ベストありがとうございました ・・・ と
言いたいのですが、リンク先をクリックしても
ページが表示されません。?
どうなっているんでしょう?



