記事を角丸四角で囲う

　正確には「記事本文の背景画像を角丸四角にする」ですね。

　参考にさせて頂いた、と言うか記事のサンプルCSSをほとんどそのまま使わせて頂いた（＾＾；）のは【初めてのココログ・カスタマイズ】様の【記事欄を角丸の画像で囲ってみよう】です。
　森イチロー樣の【まろぶろぐ】からも角丸四角画像作成ソフトをダウンロードさせて頂いたので、実に簡単に背景画像を作成する事が出来ました。
　お二方には感謝！感謝！です。

　先ずは背景画像を作成します。自動的に三分割された背景画像が出来ますので、それをアップロード。このブログで使っている背景画像は作成されたオリジナルではなく、TopとBottomの影の部分を加工（それぞれ下へ5px右へ5pxずらす）したものです。
　次にカスタムCSSに以下の項目を書き込みます。●の数値は適当に（＾＾；）。【初めてのココログ・カスタマイズ】様のサンプルCSSでは【.entry】ですが、記事本文だけに表示させたいので【.entry-body】にしました。

.entry-body-top{
background-image:url("Top画像ファイルのurl");
background-repeat:no-repeat;
padding:●px ●px ●px ●px;
margin:●px ●px ●px ●px;
background-position:top center;
}

.entry-body{
background-image:url("Middle画像ファイルのurl");
background-repeat:repeat-y;
padding:●px p●x ●px ●px;
margin:●px ●px ●px ●px;
background-position:
}

.entry-body-bottom{
background-image:url("Bottom画像ファイルのurl");
background-repeat:no-repeat;
padding:●px ●px ●px ●px;
margin:●px ●px ●px ●px;
background-position:top center;
}

　後はCSSファイルの変更を保存して反映させればオシマイ。
　IE、Firefox、safari、Operaで確認しましたが、多少の違いは有りますがいずれも破綻なく表示されています（わたしの環境では）。思いの外に簡単でした。

　ところが、それ程甘くはないのが世の常でして、コメント欄などに影響がないかとブログ内を色々と見ていたら、何と【続きを読む】に背景画像がない！

　しかも、クリックすると悲惨な状態で表示されます。好事魔多しとはよく言ったもので、世の中意外な所に落とし穴があるものです。って、それ程大袈裟な事ではありませんが……。

　この部分のHTMLがどうなっているのかSleipnirのHawkeyeでHTML構造を見てみました。Hawkeyeというプラグインを使ったのは初めてですが、そうかこんな時に使うのか……と納得。

　どうやら続きの部分はentry-moreというclassで表示させているようです。そこでカスタムCSSにentry-moreを追加しました。

.entry-more{
background-image:url("Middle画像ファイルのurl");
background-repeat:repeat-y;
padding:5px 30px 5px 30px;
margin:-12px -10px ;
background-position:top center;
}

　素人判断は当たっていたのか？果たして結果は……？
　実際の記事でご確認下さい（＾＾；）
　カテゴリー「思い出」→「期末テストのプレゼント」