アメブロ メッセージボードの背景色を変更

2 min 21 views

今回は、アメブロのメッセージボードの背景色を変更してみます。

メッセージボードはアメブロの中でも目立つ部分ですので、背景の色をみながら調節してみましょう。

アメブロ メッセージボードの背景色を変更する方法

メッセージボードのカスタマイズを設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。

現在使用中のブログデザインCSSの下までスクロールします。

メッセージボード基本のカスタマイズ

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]

/* (6-2) メッセージ
——————————————–*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 30px;
}

[/st-mybox]

デフォルトでは、上記のように記載されていますので、↓下記↓に変更してみます。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]

/* (6-2) メッセージ
——————————————–*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 30px;
background-color: #fffff0;
}

[/st-mybox]

カスタマイズ後

背景色がうすいレモン色になりました。

メッセージボード囲み線と背景色を付ける

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]

/* (6-2) メッセージ
——————————————–*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 20px;
margin: 10px 0 20px 20px;
border:3px double #c1e4e9;
background:#f4ffff;
}

[/st-mybox]

直線のオレンジの囲み線を入れる設定にしてみました。

カスタマイズ後

こんな感じで、薄水色のメッセージボードと枠ができます。(画像だとわかりにくいですが、枠は二重線になっています)

おまけ

[st-midasibox title=”線の種類” fontawesome=”” bordercolor=”” color=”” bgcolor=”” borderwidth=”” borderradius=”” titleweight=”bold”]

  • dotted…ドット
  • solid…直線
  • dashed…破線
  • double…二重線

[/st-midasibox]

border:2px solid #ffdab9; のborder:2px dashed #ffdab9; に変更すると破線になります。

線のデザインを変えてお試しください。

[st-cmemo fontawesome=”fa-bullhorn” iconcolor=”#FFEB3B” bgcolor=”#FFFDE7″ color=”#000000″ iconsize=””]アメブロのデザインテンプレートを販売中です。全体のデザインを統一していますので、チェックしてみてくださいね[/st-cmemo]

[st-card id=20643 label=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]

関連記事