お蔵入り

clip!clip!
Ads By Google

ブログの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;
}

↑今はこんな感じです。

2006-04-23 22:03の質問
blog  livedoorブログ  カスタマイズ      理由  
blog
ブログのかわいいポータルサイト「ヤプログ!」
www.yaplog.jp/
この質問は、30日間解決しなかったために自動的に質問が一旦閉じられました。

回答(1)

1.

2006-04-26 11:45:06
実際にデザインを「萌え」に変更し、スタイルシートのお書きになっている部分を変更して再構築してみました。どうも右サイドバー2カラムにされたいようですので、そのように変更してみました。

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。
Ads By Google

コメント(4)

#1.  クエン
2006-04-23 22:08:06

このCSSだけだとむしろわかりにくいです。
良かったら、サイトを提示していただいた方がいいですが、無理ならデザイン名を提示して下さい。
そして、そのデザインで変更箇所が上のCSSだけなのか、とかを教えていただいた方がいいです。

上のCSSだけではちょっと回答は無理と思います。

#2.  M-zone
2006-04-24 20:44:52

>クエンさん
コメントありがとうございます。デザインは、

キャラクター>萌え
です。よろしければ回答お願いします。

#3.  クエン
2006-04-24 22:12:21

このデザインをどうしたいのか教えて下さい。
できれば具体的に例えば左190px中央600px右190pxにしたいとか、できる限りご説明を細かくお願いします。

position:absolute;にするとインターネットエクスプローラーとそれ以外のブラウザで激しく表示が異なったりするので、position:relative;でご希望のカスタマイズに対応いたしたいと思います。

#4.  M-zone
2006-04-29 23:42:09

回答ありがとうございます!実際試した後、お礼を書き締め切りたいと思います。

トラックバック(2)

トラックバックURL: