コメントするボタンのまわりに画像を

ここのブログのようにコメントするボタン以外にも画像を貼り付けたい場合は・・

ここのブログのような注意書きの画像を用意します

コメントするボタンの下に表示する場合・・・

/*コメントするボタンの上に画像*/
.commentBtnArea{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:50% 100%;/*表示位置中央(50%)下(100%)*/
padding-bottom:30px;/*ボタンの下を30px広げる*/
}

padding-bottom:30px;/*ボタンの下を30px広げる*/
これを大きくすることでボタンの下の空間が広がります

上に表示するのでしたら・・

/*コメントするボタンの上に画像*/
.commentBtnArea{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:50% 0%;/*表示位置中央(50%)上(0%)*/
padding-top:30px;/*ボタンの上を30px広げる*/
}

padding-top:30px;/*ボタンの上を30px広げる*/
これを大きくすることでボタンの上が広がります

ワンポイント画像を配置してみます

/*コメントするワンポイント画像*/
.commentBtnArea{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
background-position:100% 50%;/*表示位置右(100%)中央(50%)*/
padding:50px 0 50px;/*上Ａ　0　下Ｂ*/
}

/*コメントする背景画像を敷き詰める*/

.commentBtnArea{
background-image:url(画像のＵＲＬ);
}

前の記事のボタンの色 を変えると一緒に使って

もちろんコメントするボタンを画像 にしている場合でも使えますよ・・