ブログのfooterが変なところに表示されてしまいます。
こんにちは。livedoorブログのカスタマイズをしているのですが、footerが変なところに表示されてしまって困っています。理由はわかっていて、#blogのposition:relative; だと問題ないのですが、position:absolute; だとずれてしまいます。relativeに戻したいのですがそうするとブログ本体のレイアウトがうまくいきません。どなたかうまい方法教えてください。よろしくお願いします。#blog{
position:absolute;
left:0px;
right:205px;
text-align:left;
background:#fff;
border-left:#73D910 0px solid;
border-right:#73D910 0px solid;
border-bottom:#73D910 0px solid;
}
#left{
position:absolute;
top:0px;
right:0px;
width:0px;
text-align:center;
background:;
border-left:#73D910 0px solid;
border-right:#73D910 0px solid;
border-bottom:#73D910 0px solid;
}
#right{
position:absolute;
top:0px;
right:0px;
width:190px;
text-align:center;
background:;
border-left:#73D910 0px solid;
border-right:#73D910 0px solid;
border-bottom:#73D910 0px solid;
}
↑今はこんな感じです。
回答(1)
1.
CSS、HTMLをバックアップします。
CSSの、#blogを下記のように変更します。
#blog{
position:relative;
margin-left:0px;
margin-right:200px;
text-align:left;
background:#fff;
border-left:#73d910 1px solid;
border-right:#73d910 1px solid;
border-bottom:#73d910 1px solid;
}
#rightは変更の必要はありませんが、borderの色だけお書きになっているように変更しました。
#right{
position:absolute;
top:0px;
right:0px;
width:190px;
text-align:center;
background:#fff;
border-left:#73d910 1px solid;
border-right:#73d910 1px solid;
border-bottom:#73d910 1px solid;
}
変更したら、CSSを保存します。
次に、 トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブを変更します。
<!-- Plugin A -->
<div id="left">
<div id="lefttop"></div>
<div id="leftbody">
<$PluginList_A$>
</div>
<div id="leftbottom"></div>
</div>
<!-- / Plugin A-->
上記の部分を全て削除します。
以下のような部分がありますので、
<!-- Plugin B -->
<div id="right">
<div id="righttop"></div>
<div id="rightbody">
<$PluginList_B$>
下記のように変更して下さい。
<!-- Plugin B -->
<div id="right">
<div id="righttop"></div>
<div id="rightbody">
<$PluginList_A$>
<$PluginList_B$>
変更したらそれぞれHTMLを保存されて下さい。
全ページ再構築します。
以上です。
表示が崩れたり、イメージにあわない場合は、バックアップしておいたCSS、HTMLに戻すか、元のデザインを選びなおして、全ページ再構築してください。
position:absolute;でもこんな感じで表示が崩れないデザインができるのかと勉強になりましたm(_ _)m。
コメント(4)
このCSSだけだとむしろわかりにくいです。
良かったら、サイトを提示していただいた方がいいですが、無理ならデザイン名を提示して下さい。
そして、そのデザインで変更箇所が上のCSSだけなのか、とかを教えていただいた方がいいです。
上のCSSだけではちょっと回答は無理と思います。
このデザインをどうしたいのか教えて下さい。
できれば具体的に例えば左190px中央600px右190pxにしたいとか、できる限りご説明を細かくお願いします。
position:absolute;にするとインターネットエクスプローラーとそれ以外のブラウザで激しく表示が異なったりするので、position:relative;でご希望のカスタマイズに対応いたしたいと思います。
回答ありがとうございます!実際試した後、お礼を書き締め切りたいと思います。



