今回は、アメブロのメッセージボードの背景色を変更してみます。
メッセージボードはアメブロの中でも目立つ部分ですので、背景の色をみながら調節してみましょう。
アメブロ メッセージボードの背景色を変更する方法
メッセージボードのカスタマイズを設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。
基本設定は、こちらです。
現在使用中のブログデザインCSSの下までスクロールします。
メッセージボード基本のカスタマイズ
/* (6-2) メッセージ
--------------------------------------------*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 30px;
}
下記に変更してみます。
/* (6-2) メッセージ
--------------------------------------------*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 30px;
background-color: #fffff0;
}
カスタマイズ後
背景色がうすいレモン色になりました。
メッセージボード囲み線と背景色を付ける
/* (6-2) メッセージ
--------------------------------------------*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 30px;
background-color: #fffff0;
border:2px solid #ffdab9;
}
直線のオレンジの囲み線を入れる設定にしてみました。
カスタマイズ後
線の種類
- dotted…ドット
- solid…直線
- dashed…破線
- double…二重線
border:2px solid #ffdab9; のborder:2px dashed #ffdab9; に変更すると破線になります。
線のデザインを変えてお試しください。
