こっちの記事で気にしていたデザインの崩れを直しました
まずはMyBlogListにも入れさせていただいているSampling.sys様へ。
何が気になっていたかというと、
１．サイドバーの囲みが、記事に被っている。
２．サイドバーの囲みの幅が、機能毎に違っている。
３．タイトルが左により、タイトル以下が右によってしまっている。
まず１と２から対処を…
この２つはどちらかを直せばどっちも直るかなー…なんて。
で、それぞれの機能の違い。
・yaplogで予め用意されている機能
・カスタマイズで作った機能
・カスタマイズで作った、折りたたみのある機能
その３つで違うコトが判明…。
まず下２つについてソースをみてみることに。
自分で作った機能に関しては、yaplogで紹介されている方法でやっていました。
しかし、崩れていないBLOGをみると、違う部分を発見したのです。yaplogでは
<table width=”100%”
cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr><td class=”side”>
<div align=”center”>
<img src=”{$BlogTmplUrl$}img/side_title_header.gif”
alt=””></div>
<table width=”100%” border=”0″ cellspacing=”0″
cellpadding=”0″>
<tr>
<td class=”side_title”>■プロフィール■</td>
</tr>
</table>
<div align=”center”>
<img src=”{$BlogTmplUrl$}img/side_title_footer.gif”
alt=””></div>
<table width=”100%” border=”0″ cellspacing=”0″
cellpadding=”0″>
<tr>
<td>
となってますが、
<div class=”side”
style=”margin-bottom:10px;”>
<div class=”side_title”>自己紹介</div>
<div class=”side_text”><div
align=”center”>
みなさんこうしてるんですね。というわけで早速パク真似してみたら、
直っちゃいました！
たったこれだけだったんですねー…
あ、機能の一番したのTD部分も削除して、
代わりにｄｉｖを閉じました。
次に３について。
↓に続く…
これは単純明快でした。スタイルシートの、
.blog_title
{
width:95%;
padding-right:10px;
（略)
}
のwidth部分が１００％になっていたせいみたいです。
９０?９５％だと丁度良くなりました。
こんなもんでしょうか。。。とりあえず直ってよかったです
コメント