プラグインのタイトルについて

プラグイン(１)(２)(３)のタイトル部分は背景画像になっています。
タイトルが長くなると↓このようにはみ出してしまいます。

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

: 27　この数字がカギです

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

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

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

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

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

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

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

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

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

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

応用編

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

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

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

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

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

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

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

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

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

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