アメブロカスタマイズ

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

更新日:

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

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

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

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

現在使用中のブログデザイン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; に変更すると破線になります。

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








おすすめ記事

1

SNS集客からWeb集客へ時代が変化しつつある中、ホームページサービスにあたらめて注目が集まっています。 WordPress、Jimdo、Ameba Ownd、Wixなどなど色々ホームページ制作のサー ...

2

WordPressを使用する際に、迷うのはデザインテーマ。 それもそのはず。 WordPressのデザインテーマは、日本のみならず世界中で作られています。 本当にたくさんテーマがあるので、どれが良いの ...

3

世界で一つだけ、自分だけのオリジナルのものを作るハンドメイドは、最近人気の起業です。 書籍もたくさん出ていますし、作品をminneやクリーマなどに出展したり自分でショップカートを持って販売しているハン ...

4

レースや枠、ライン画像など無料で使えるWeb素材のリンク集を作ってみました。 自作でチラシやデザイン制作、アメブロカスタマイズを行う際にご利用下さい。 無料・商用利用可能、改変可能、リンク不要のモノを ...

5

ホームページやブログカスタマイズをするとき、デザインパーツ全てを自分で作るのは正直大変です。 そこで登場するのが、市販の素材集。 ヘビロテする本当に使える素材集をご紹介します。 本当に使える可愛いもの ...

-アメブロカスタマイズ
-,

Copyright© Bloomin! , 2018 All Rights Reserved.