アメブロの記事枠を画像に

みなさま、こんにちは

アメブロの記事が載っている枠を、画像で装飾してみました。

用意するものは、3つの画像（PNG形式）です。

①ヘッダー画像：記事枠上部のタイトル部分

②ボディ画像：記事本文の外枠

③フッター画像：記事枠下部

　 ※ 画像はフリー素材を加工しました。

　　 　（再配布禁止のため持っていかないでください）

画像の目安としては、

2カラム設定：幅665pixel×高さ（ブログサイズによって適宜）

3カラム設定：幅470pixel×高さ（ブログサイズによって適宜）

画像を用意したら、いよいよCSS編集でコード入力です。

今回、「アメブロカスタマイズ」のブログを運営されている

わざめーば様の

「アメブロの記事に画像枠をつける方法」

を参考にさせていただきました

ブログ初心者＋WEB知識皆無の人間にとっては、

コード記述付きの解説はありがたいです(*´∀｀*)

実際に記事枠を画像を置き換えてみて思ったのですが、

CSS編集可能なカスタマイズだとAmebaさんの仕様変更で

レイアウトが崩れてしまうようですね

私はそのためかフッターがうまく配置できませんでしたが、

Yahoo知恵袋を参考にCSS編集の下部に、

/* 記事枠フッター部分の位置変更*/
.skinArticle3{
background-image:url( http://～画像のURL～ );
background-repeat:no-repeat;
background-position:left bottom;
background-color:transparent;
padding-bottom:7px;
}

を追加して事なきを得ました

記事枠の画像編集は、微調整が難しいですね(> <)