罫線からはみださずに画像を貼りたい方は↓に進んでください
そうでもない方は、好きなように、または本文の最後にバーン!と貼っちゃってください
また罫線そのものが要らないという方はずっとずっと↓に進んでください

: 21　この数字がカギです

[画像Click♪で拡大]
普通に画像を貼ってみると、画像とテキストは、罫線からはみでちゃいます

これを解決する方法として

• 1.画像の高さを「21の倍数」にする()
• 2.サイズ別にクラス(class="クラス名(半角英数)")を設ける
• 3.応用編
• 4.<img>要素の改行に注意してください

画像の高さを「21の倍数」にする()

罫線1行の高さが21pxだからです

例:<img src="画像パス" border="0" width="画像の幅" height="画像の高さ:21の倍数" />

サイズ別にクラス(class="クラス名(半角英数)")を設ける

画像(サムネイル含む)のサイズを決めている場合、CSSを使います
サイズが3種類あるなら、サイズ別にクラスを3つ設け、それを使い分けてください

1.記事の編集 (例えば、幅200×高さ210の画像)
<img src="画像パス" border="0" class="クラス名(半角英数)" />

2.CSSの編集
.クラス名(半角英数) {
float:none;
width:200px;
height:210px; ← 21の倍数
border:0;
}
※1.2.のクラス名は、2つとも同じ名前にしてください

応用編

画像に「ポラロイド風」などの「枠」を付けている場合。線や余白が関係してきますので、1.＆2.で説明した方法だけでは崩れてしまいます。2.の方法を用いて、今度は「引き算()」をします!

1.記事の編集 (例えば、幅200×高さ210の画像)
<img src="画像パス" border="0" class="クラス名(半角英数)" />

2.CSSの編集
.クラス名(半角英数) {
float:none;
width:200px;
height:204px; ← 210(21の倍数)－4(上下余白)－2(上下実線)
border:0;
padding:2px; ← 余白
border:1px solid #000; ←実線
}

<img>要素の改行に注意してください

改行の扱い＝HTMLタグのみで、記事を編集している場合
<img src="●"><br />
次の行 ～ としてください(次の行の先頭に<br />はNG)

※毎回、アップする画像のサイズが異なるなら1.の方法だと思いますが、編集のし易さも考えると、
私は2.の方法をオススメします。

※兎に角「21」です!記事編集などで個別に余白や行間を設定するときも、高さの最小値は「21」です!!

罫線の外し方
どうしても画像が罫線からはみ出るのは気になる...という場合はこちらをお試しください

エントリー：記事の罫線を外す

管理画面→テンプレートの設定→Design218-CAT1col[編集]→Design218-CAT1colのスタイルシート編集

▼以下クラス内の、下線部分のみを削除してください
.entry_body
{
background-image:url(http://blog-imgs-61.fc2.com/a/n/m/anminn218/catnote_bg.png);
}