sever flat 系テンプレートの枠画像

Admin / Write / Res

sever

2007/08/17

[39] [46] [38] [37] [36] [35] [34] [33] [32] [31] [30]

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

自動挿入

2024.Apr 27 (Sat)

flat 系テンプレートの枠画像

flat 系のテンプレートではブログの構成は大雑把に書くと次のようになっている。


<div id="wrapper">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top">
<td width="240" class="back1">
<div class="linktitle">サイドバータイトル</div>
<div class="linktext">サイドバー本文</div>
</td>
<td width="10">
<img src="省略/blank.gif" width="10" height="1" />
</td>
<td width="460" class="back2">
<h1 class="site_title">
<img src="タイトル用画像" alt="site_title" /></h1>
<div class="entry">
<div class="entry_date">日付と曜日</div>
<div class="entry_title">記事タイトル</div>
<div class="entry_body">投稿部分</div>
</div>
</td>
</tr>
</table></div>

これをブラウザで見れば

サイドバータイトル

サイドバー本文

日付と曜日

記事タイトル

投稿部分

ところがテンプレート CSS ではデフォルト(初期状態)ではそれぞれに margin 「余白」が付いている。
このとき幅が指定された部分では、その領域を「外側」に広げることになる。
結果として、枠画像が(隠れて)見えない、一部が消えると言うことになる。

対処方法

初心者の質問によく出てくるスタイルです。
サイドバーと記事部分の間が本来 10px なのにナント！30px になっており、サイドバーの枠画像は表示されず、記事部分の文字が枠画像に重なっています。

 <td width="10">

<img src="省略/blank.gif" width="10" height="1">

この場合二つの「10」を「30」とすれば、サイドバーの枠画像は見えては来ますが、問題を解決したわけではありません。全体のつじつまが合っていないからです。

ここでは記事１のところにある「×」の付いた画像が大きすぎるという設定にしてありますが、ほかに原因があることも。

まず画像ソフトで縮小(リサイズ)します。ここでは width: 300px → width: 260px にします。
あとはテンプレート CSS の操作です。

.entry {
    margin: 0px 10px 20px 10px;
    padding: 0 20px;
}
.linktitle {
    font-family: 省略;
    font-size: 15px;
    font-weight: bolder;
    color: #333333;
    line-height: 100%;
    margin: 0px 10px 0px 10px;
    padding: 2px;
}
.linktext {
    font-family: 省略;
    font-size: 12px;
    color: #333333;
    line-height: 170%;
    margin: 1px 10px 20px 10px;
    padding: 10px;
}

とにかくこの 3 項目が関係しているのです。上から順に修正してみます。
.entry は記事部分全体を指します。

この margin は「外側への余白」を意味しますが、<td width="460" class="back2"> によって規定されているのを更に左右へ押し広げることになります。従って 2 番目と 4 番目にある 10px をゼロにします。この場合なら 0 0 20px と書くことも出来ます。

枠画像の模様部分にタイトル用アイコン画像や文字を重ねないようにするためには padding の値で調整します。模様部分が 8px くらいなら 10px でもいいでしょう。ここでは模様が 10px なので 13px としています。