デザイン崩れの実際 (02)

yaplog のカテゴリーとして書いているが、ここ忍者ブログでの私の失敗を披露しよう。

yaplog のフリースキンではサイドバーと記事部分は <table> でセルが分けられているから起こりにくいが、<div> で区切られている場合は知らないうちに起こっていたりする。

私は「普段使うブラウザ」として Firefox を用いている。
またウェブページの作成には Internet Explorer エンジンのプレビューが即座に反映されるエディタで行う。

しかし、投稿後のブログ確認は毎回 Internet Explorer で行っているわけではない。
今回は偶々発見したのでした。

<div id="EntryBlock">
<div class="PageLinkBlock">
<!--pagelink_10-->
[<!--$pagelink_10_link-->]
<!--/pagelink_10-->
</div>
<div class="EntryTitle">
記事タイトル
</div>
<div class="EntryTextBox">
記事本文
</div>

#EntryBlock {
width: 548px;
float: left;
text-align: left;
background-color: #FFFFFF;
background-image: url('省略/se-asia4.gif');
}

.EntryInnerBlock {
padding: 10px;
text-align: left;
}

.EntryTextBox { margin: 5px 0px; }

.EntryTitle {
text-align: left;
font-weight: bold;
padding: 10px 10px 10px 15px;
height: 25px;
background-color: #c0c0c0;
border: 2px solid #3333ff;
color: #0000ff;
font-size: 150%;
vertical-align: middle;
line-height: 110%; margin-top: 5px
}

.EntryText {
padding: 10px 10px 20px 10px;
font-weight: bold;
font-size:12px;
line-height: 1.4;
}

こういった構成になっている場合、ここで言う #EntryBlock の範囲を超えた内容物がある時、この <div> は『下に潜り込む』というのを読んだことがあり、まさしくそのケースだったと言うことになる。
それを思い出すのに暫くかかってしまった。

私の今回の場合、幅 539px と言う画像が原因だったわけで、これを小さくすることで解決したのでした。

しかし、この手の問題は何も yaplog や jugem だけに限られるものではなく、ブログすべてに共通したものでしょう。 記事ブロックの画像ばかりではありません。 プラグインブロック(サイドバー)に書かれた 長い URL の場合にも起こり得ます。

自動挿入