スポンサーサイト
2008.09.06 +
右エントリーが下に移動してしまった方
2005.09.12 + テンプレTB:0CM:0
こんな質問がたまに来るので…

■右エントリーが下に移動してしまった時の直し方
■ブログの各部分の横幅を変えたい方も読んでね

右エントリーが下に移動してしまうのは、左メニューに横幅の大きい画像やブログアクセを置いたせいが多いと思われます
全体の横幅が470px、左メニューの横幅が148px、右エントリーの横幅が320pxで作られているため、画像等により左メニューの横幅が148px以上に広がると右エントリーの居場所が無くなり、下にずれ込んでしまいます
デフォルトですと横幅が130px以上の画像、ブログペット等を置くとずれこんでしまいます
解決するには、画像・ブログアクセ等を小さくするか、左メニューと全体の横幅を広げるかをします

左メニューと全体の横幅を広げるには以下の順序で簡単にできます

1. 全体の横幅を広げる
スタイルシートの中のそれぞれ
#layout{
#header{
#footer{
の中にある
width: 470px;
を3箇所ともすべて
width: 500px;
にします

また、htmlの中の
<body>
の下の行の
width:470px

width:500px
に変えます
ブログの全体の横幅が470px→500pxになります


2. 左メニューの横幅を広げる
スタイルシートの中の
#menu{
の中にある
width: 148px;

width: 178px;
にします
左メニューの横幅が148px→178pxになります

上記では左メニューを30px大きくしましたが、数字を変えれば好みの幅に変えられます
ブログペットの横幅に合わせて変えてみてください(ブログペットの横幅が150pxくらいなら+30pxで大丈夫だと思います)
その際、(左メニュー横幅+右エントリー横幅+2px≦全体の横幅)にすれば右エントリーがずれ込むことはありません

ちなみに全体の横幅を変えたくない人は、かわりに右エントリーを小さくしましょう

1. 右エントリーの横幅を狭める
スタイルシートの中の
#main{
.entry_table{ (←こっちは下の方にあります)
の中にある
width: 320px;

width: 290px;
にします
右エントリーの横幅が320px→290pxになります

2. 左メニューの横幅を広げる
(上記に同じ)

そんな感じです。
prevhome next












トラックバックURL
→http://miyama0101.blog8.fc2.com/tb.php/82-d3dc7f8c
home