アメブロの記事領域に画像枠を付ける方法

アメブロカスタマイズ

アメブロの記事領域に画像枠を付ける方法

2014/03/30 過去記事の修正&再アップです。

こんにちは、松本です。

今回は、アメブロのカスタマイズ向けデザイン「CSS編集用デザイン」の記事領域に画像枠を付ける方法をご紹介します。

画像を用意する

今回は、次のような3枚の画像を使用しました。

470_head
タイトル部

470_body
ボディ部

470_foot
フッタ部

これらの横幅は、3カラムレイアウトの記事の横幅の初期値である470ピクセルになっています。

2カラムをお使いの場合は、初期値が665ピクセルですので、それにあわせた画像を用意してください。

また、記事幅を変えている場合は、その記事幅に合わせたサイズの画像を用意して下さい。

これらを、記事の各部の高さに合わせて、「タイトル部」1枚+「ボディ部」複数枚+「フッタ部」1枚の画像を縦に敷き詰め、全体で記事に画像枠がついたような効果にします。

なお、今回ご紹介する方法では、タイトル部およびフッタ部の画像は、やや高さに余裕を持たせたほうがうまくできることが多いので参考にして下さい。

CSSを編集する

それでは、以下のようなコードをあなたのアメブロのユーザーCSSの末尾に追加して下さい。

ユーザーCSSについてわからない場合はこちらをご参照ください

.skinArticle{
  padding: 0;
  border: none;
}
.skinArticleHeader{ /* タイトル部 */
  margin: 0;
  padding: 15px 30px 5px 30px; /* タイトル文字周辺の余白(↑→↓←の順) */
  border: none;
  background-image: url(https://stat.ameba.jp/user_images/20110815/19/sozai-land/31/42/p/o0470008011419016829.png);
}
.skinArticleTitle,.skinArticleTitle:visited,.skinArticleTitle:hover,.skinArticleTitle:focus{
  color: #ffffff; /* タイトル文字色 */
}
.skinArticleBody2{ /* ボディ部 */
  margin: 0;
  padding: 0 30px 10px 30px; /* 記事周辺の余白(↑→↓←の順) */
  border: none;
  background-image: url(https://stat001.ameba.jp/user_images/20110815/20/sozai-land/e3/66/p/o0470001011419180108.png);
}
.articleThemeListArea,.articleImageListArea{
  margin-bottom: 0;
  padding-bottom: 20px;
}
.skinArticleBody{ /* フッタ部 */
  padding-bottom: 10px; /* フッタ部の高さ */
  background-repeat: no-repeat;
  background-position: left bottom;
  background-image: url(https://stat001.ameba.jp/user_images/20110815/20/sozai-land/f0/ea/p/o0470008011419180109.png);
}

画像ファイルのURLは上でご紹介した画像のものですので、他の画像を使用する場合は、使用したい画像のURLに変える必要があります。

また、使用する画像によっては、各所の数値(余白)を変更する必要がありますが、上記コードに書いてあるコメント(注釈)を参考にして調節してみてくださいね。

以上、アメブロの記事領域に画像枠を付ける方法でした。

よかったら参考にして下さいね。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次

2014/03/30 アメブロの仕様変更に合わせ記事修正&再アップ
2011/08/15 記事公開

アメブロカスタマイズと読者を増やすブログ運営