メッセージボードに画像枠を付ける方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、CSS編集用デザインのアメブロのメッセージボードに画像枠を付ける方法をご紹介します。

様々な告知の用途に利用されるメッセージボードですが、目立つ画像枠を付ることで、訪問者の目を引くようにカスタマイズすることも可能です。

では、やり方です。

まずは、画像枠に使用する画像を用意する必要があります。

画像は、次のように、メッセージボードの上部(ヘッダ部)用、メッセージボードの本体(ボディ部)用、メッセージボードの下部(フッタ部)用の3種類用意します。

メッセージボードの上部(ヘッダ部)用

メッセージボードの本体(ボディ部)用

メッセージボードの下部(フッタ部)用

これらの画像を、ヘッダ部用を一枚、ボディ部用を複数枚、そしてフッタ部用を一枚、縦に並べることで枠に見えるようにします。

画像が用意できたら、CSSの編集で、以下のようなコードをユーザーCSSの末尾に追加してください。

.skinMessageBoard{
  padding:20px 0 0 0; /* 20px=ヘッダ部用画像の高さ */
  background-image:url(ヘッダ部用画像のURL);
  background-repeat:no-repeat;
  background-position:left top;
  border:none;
}
.skinMessageBoard2{
  padding:0 0 20px 0; /* 20px=フッタ部用画像の高さ */
  background-image:url(フッタ部用画像のURL);
  background-repeat:no-repeat;
  background-position:left bottom;
}
.skinMessageBoard3{
  margin:0;
  background-image:url(ボディ部用画像のURL);
  background-repeat:repeat -y;
  background-position:left top;
}

各画像のURLには、それぞれ該当する画像のURLを設定してください。

ヘッダやフッタの画像の高さも、やはり使用する画像に合わせた値を設定する必要があります。

また、使用する画像によっては、他の余白(marginやpadding)も適切に設定する必要があるかもしれません。

なお、サンプルとして、以下にそのままコピペで使えるCSSを書いておきますので、よかったら参考にしてください。

サイズは、CSS編集用デザイン3カラムを選択した場合の初期状態に合わせてあります。

.skinMessageBoard{
  padding:20px 0 0 0; /* 20px=ヘッダ部用画像の高さ */
  background-image:url(https://stat.ameba.jp/user_images/20120319/17/sozai-land/69/df/p/o0470002011861257930.png);
  background-repeat:no-repeat;
  background-position:left top;
  border:none;
}
.skinMessageBoard2{
  padding:0 0 20px 0; /* 20px=フッタ部用画像の高さ */
  background-image:url(https://stat.ameba.jp/user_images/20120319/17/sozai-land/88/64/p/o0470002011861258073.png);
  background-repeat:no-repeat;
  background-position:left bottom;
}
.skinMessageBoard3{
  margin:0;
  background-image:url(https://stat.ameba.jp/user_images/20120319/17/sozai-land/9e/33/p/o0470002011861257931.png);
  background-repeat:repeat -y;
  background-position:left top;
}

また、2カラムの場合は、以下で試すことができます。

.skinMessageBoard{
  padding:20px 0 0 0; /* 20px=ヘッダ部用画像の高さ */
  background-image:url(https://stat.ameba.jp/user_images/20120319/17/sozai-land/9d/80/p/o0665002011861258626.png);
  background-repeat:no-repeat;
  background-position:left top;
  border:none;
}
.skinMessageBoard2{
  padding:0 0 20px 0; /* 20px=フッタ部用画像の高さ */
  background-image:url(https://stat.ameba.jp/user_images/20120319/17/sozai-land/fb/24/p/o0665002011861258627.png);
  background-repeat:no-repeat;
  background-position:left bottom;
}
.skinMessageBoard3{
  margin:0;
  background-image:url(https://stat.ameba.jp/user_images/20120319/17/sozai-land/7e/ed/p/o0665002011861258639.png);
  background-repeat:repeat -y;
  background-position:left top;
}

以上、CSS編集用デザインのアメブロのメッセージボードに画像枠を付ける方法をご紹介しました。

よかったら、チャレンジしてみてください。

関連記事

記事に画像枠を付ける方法
アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ
アメブロの画像アップロード方法と画像のURL取得方法

アメブロカスタマイズで人が集まるブログ作り