解決済
どんな画面にも巾いっぱい表示したい
元々狭かった巾が嫌で、15インチ画面いっぱいになるように固定巾をカスタマイズしました。しかし画面の大きさが色々ある現在、どんな大きさにも巾いっぱいになるようにしたいのです。何処をどう変えればなるでしょう？詳しく教えて下さい。ブログはシーズンのオーロラでしたがカスタマイズして
です
回答(2)
3.
基本的に％指定で良いかと思いますが、
サイドバーの幅まで%指定をしてしまうと何かと不都合が出ると思いますので、
そちらは今まで通り190px固定にしてみます。
こんな感じにすれば大体うまくいくかもしれないです。
#container
・widthを%指定に変更します。
＊変更後はこんな感じです↓
#container{
background:url(http://image.blog.livedoor.jp/dax_4191/imgs/3/f/3f6bc366.JPG) no-repeat;
margin:0 auto;
width:96%;
text-align:left;
word-break:break-all;
}
#blogcontainer
・widthを%指定にします。
#blogcontainer{margin:0 auto;padding:10px 0px 50px 0px;width:100%;}
#content
・widthを%指定に変更します。
・marginをmargin-left:-200pxに変更します。
・overflowの指定を追加してみます。
#content{
width:100%;
float:right;
margin-left:-200px;
overflow:hidden;
}
#blog
・これ↓を丸ごとCSSに追記します。
#blog {
overflow:hidden;
text-align:left;
margin-left:200px;
}
#links
・後々面倒なことになりそうなのでoverflowの指定を追加しておきます。
#links{
float:left;
width:190px;
padding-top:1px;
overflow:hidden;
}
ではよろしくお願いいたします。
数度に及ぶ詳しい説明で、訳の分からない私ですが出来ました。本当にありがとうございました！
1.
難しそうなのでやっていませんが、ありがとうございます。
コメント(15)
早速のアドバイスありがとうございます。やり方は分かったとして、具体的にはどのようにすれば良いでしょう？
信長さんの15インチモニターの横幅を100パーセントとし
1pxが何パーセントか計算します。
あとはスタイルシートの記述を機械的にpxからパーセントに変換するだけです。
う～ん、頭の悪い私にはこの説明だけでは、どうすれば良いのか分かりません。
widthプロパティにパーセントで指定する方法が解からないのならば
↓は参考になると思いますがいかがでしょうか？
http://www.htmq.com/style/width.shtml
>>3の追記です。
今回のカスタムとは関係ありませんが、
CSSにエラーがありますので、ついでに↓を直しておくと良いです。
.description
・line-heightの前に全角スペースがあるのを削除します。
・paddingの1番目の数字を5→5pxにします。
＊変更後です↓。元のを消してコピペして下さい。
.description{
color:#fff;
font-size:18px;
font-weight:bold;
padding:5px 0 0 650px;
text-align:left;
line-height:140%;
}
.photo img
・行頭に全角スペースがあるのを削除します。
＊元のを消してこれ↓をコピペして下さい。
.photo img{height:152px;width:180px;}
回答からコピーして、CSSに貼り付けるだけで良いので、
1コずつ着実にこなせば難しいことはないと思いますが。。
実行するかどうかはお任せします＾＾
┃ω・)ｼﾞｰｯ...
さすが阿闍梨...
>#6
詳しい説明、ありがとうございました、やって見た結果2つ問題が残りました。
1）画面の巾の違いにより、画面の位置がずれる。
2）アクセス解析のバナーの位置がカレンダーの所に変わった
この解決方法をご教授願います。
>#8の追記ですが
http://blog.livedoor.jp/dax_4191/
結局どんな巾にもいっぱいに表示されるようになった結果、「ブログタイトル」の下の「ブログの説明」の文章が、画面の巾によって行数が変わり、それによって巾の広いモニターなどではスタートの位置が写真にかぶるようになりました。これを回避するには、写真の位置を基準にする方法でしょうか？そんな事って出来るのでしょうか？
>>#8
1)については、具体的にどこを修正したいのか書いていただけると
何かしら対応できると思います。
基本的には幅可変にするということは、テキスト部分の行数が変わることを
意識して作る必要が出てくると思います。
2)はIE6のCSSにバグがあるようですね。
このように修正してみてください。
#linksは↓overflowの行を削除
overflow:hidden;
#contentの左マージンの変更
margin-left:-220px;
#blogの左マージンの変更
margin-left:220px;
>>#9
例えば、#banner、.blogtitle、.descriptionの3つを
↓の様に変更してみたらどうでしょうか。
#banner,#subbanner{width:100%;overflow:hidden;padding-top:65px;}
.blogtitle{
color:#fff;
font-size:35px;
font-weight:normal;
text-decoration:none;
margin:0 0 0 650px;
text-align:left;
width:320px;
}
.description{
color:#fff;
font-size:18px;
font-weight:bold;
margin:5px 0 0 650px;
text-align:left;
line-height:140%;
width:320px;
}
ps.
CSSには全角スペースは使わないようにします。
インデントするときはIMEを直接入力にしてスペースを打つと
半角スペースになります。
本当に、本当にありがとうございました！最後にどうでも良い事なのですが質問です（笑）
imgさんには、私のcssが丸見えのように思えるのですが、どうですか？
>#14
なる程・・・分かりました！
