記事を画像で囲む方法を紹介します。
HTMLの下記箇所に赤い太文字の部分を加えます。
<!--▼ エントリー（記事）▼-->
<!--topentry-->
<table class="a_tbl" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="3" class="a_top"></td></tr>
<tr> <td class="a_left"></td><td class="a_center">
<h3><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title> </a></h3>
～
</div><!--/bottom_navi-->
</div><!--/article-->
</td><td class="a_right"></td></tr>
<tr><td colspan="3" class="a_bottom"></td></tr>
</table>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ～次にスタイルシートに下記記述を加えます。
/* - 記事全体 - */
.a_tbl {
width: 100%;
margin-bottom: 2em;
}
/* - 記事上部 - */
.a_top {
background-image: url(http://～);
height: 10px;
}
/* - 記事中央本文 - */
.a_center {
background-image: url(http://～);
}
/* - 記事右側 - */
.a_right {
background-image: url(http://～);
width: 10px;
}
/* - 記事左側 - */
.a_left {
background-image: url(http://～);
width: 10px;
}
/* - 記事下部 - */
.a_bottom {
background-image: url(http://～);
height: 10px;
}http://～には画像のURLをいれてください。各
width,heightの数値は画像にあわせて調整してください。
これで一応完成です。
投稿時間等がある記事文末下のスペースが空きすぎだと感じればスタイルシートの
.bottom_navi {
text-align: right;
margin-bottom: 3em;}
赤い数値を減らすか、この行ごと削除してください。
またこの記事文末の罫線もいらなければHTMLの
<!--▼ エントリー（記事）▼-->
～
<%topentry_more><!--/more-->
<hr noshade size="1" />
<div class="bottom_navi">
～
<!--▲ エントリー（記事）▲-->赤い部分の
<hr noshade size="1" />を削除してください。
多少編集箇所があるので不安な方は
バックアップをとって挑戦してくださいね。
- 関連記事
-
