いやはや、昨日は、もしかしたら崩れた画面に憤慨された方がいらっしゃったかも知れません。とにかく、HTMLの初歩も知らない私には、もうとにかくあり得ないくらい(^^;大変でした。いくつかライブドアブログの3カラム化についてアドヴァイスをしているブログがあるのですが、真似してやってもグチャグチャ画面が崩れるだけでどうも上手く行きません。結局の所デザイン別にいじるべき数値や場所が異なるようです。
で、なんとか役に立ったのがラーバン日記様。こちらの紹介が手取り足取り一番親切丁寧な紹介(画像が見えないけど)でしたが、ベースのデザインが異なる為、色々とアレンジする必要があります。

うちのデザインでの(一例として)

#links {
position:absolute;
top:97px;
left:20px;
width:190px;
margin:0 0 0 0;
padding:25px 0px 30px;
text-align:center;
background:#000;
      }

この#inks〜の部分を削除して、
他者様の例えば、

#links {
position:absolute;
top:120px;
left:5px;
width:200px;
margin:0 0 0 0;
padding:0 0 0 0;
text-align:center;
background:#fff;
}

#links2 {
position:absolute;
top:120px;
right:5px;
width:155px;
margin:0 0 0 0;
padding:0 0 0 0;
text-align:center;
background:#fff;
}

#links〜#link2〜をコピペしても、当たり前ですが数値が違って駄目なんです。結局、#contentの部分は(元々からっぽ)一切触らず、自分デザインの#links〜を一つ下にコピーして、二つ目の頭を#link2にするという単純な方法で左右のカラムは一応上手く行きました。

しかし、このままではセンターのブログテキスト部分が、デフォルトでずーっと右側まで伸びている為、右側のカラムとテキストが重なってしまうのです。

結局、タグ内のいじれる数値を一つずつ順番に片っ端から試すという、気の長くなる?強硬手段に出て、なんとかここまで仕上げることが出来ました。うちのデザインの場合、センターのブログのテキスト部分を右側の適当な位置で折り返すことが必要なのですが、ここは、

#links〜の直下にある

.blog{
position:absolute;
top:97px;
left:230px;
right:0px;
margin:0 auto 30px;
padding:0 20px;
text-align:center;
}

このright:0px;を適当な数値に(うちの場合は190px)に書き換えることで、文字が右カラムと被らずに折り返されるようになりました。しかしだー、これだけでは多分だめかも。XGA以上のモニター全面表示では大丈夫ですが、困ったことにIEブラウザを小さくしたりXGAより小さいモニターでは右側が被ります。。。本来は、ブラウザのサイズに合わせて自動で調節されるようにしないといけません。

そして、何故か右側のカラムの長さが短い(^^;。これは、とにかくバナーをバコバコ貼れば強制的に下まで伸ばすことは可能ですが、結局、白く伸びたセンターかラムの上に無理矢理貼っているからこうなるみたい。根本的に、センターのブログテキスト部分の横幅が、右カラムと重ならないように、ブラウザサイズに合わせて自動的に可変するよう仕上げないといけないみたいです。

誰か、お詳しい方がいらっしゃいましたら助けてくださいませ〜_| ̄|○

ピュアオーディオRANKING←デザインが気に入ったらクリック♪
mixiチェック このエントリーをはてなブックマークに追加