アメブロカスタマイズ

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

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

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

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

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

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

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

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

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

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

カスタマイズ後

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

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

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

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

カスタマイズ後

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

おまけ

線の種類

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

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

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

  • この記事を書いた人
  • 最新記事
irodori

ヨリメグ

メール対応・資料作成・Webサイト管理・SNS運用・ライティングまでワンストップ対応できるクリエイティブ秘書&ブロガー。 ブログは、フリーランスお仕事系お役立ち記事を載せています。

おすすめ記事

1

確定申告の季節が近づいてきました。 ちなみに確定申告期間は2020年2月17日(月)から3月16日(月)になります。 確定申告をe-Taxで(電子申告)で行うと、青色申告は10万円の控除増加が期待でき ...

ヨリメグのペライチ 2

ペライチという1枚ページサイトに特化したサービスがあるのですが、そちらで秘書サービスに特化したサイトを作ってみました。 それがこちら↓ これこれ 結構上手に作れたのではないかと自画自賛。 内容がきちん ...

3

著作権が厳しい世の中になってきました。 フリー画像でもお仕事に関するものに使用する写真は「商用フリー」写真であることが利用の条件です。 ネットサーフィンをしていて見つけた商用利用可能なフリー写真サイト ...

4

インターネットで写真やイラストを販売することで、収入を得るストックフォト。 最近では、トッププレイヤーは月30万以上の収入を得ている方もゴロゴロいるそうです。 今回は、ストックフォトについてご紹介しま ...

5

お仕事ブログとしてアメブロを使う方にとって、既存デザインではなく、アメブロのヘッダーは自分のサービスのイメージに合ったものにしたいと思いますよね。 お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設 ...

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

Copyright© イロドリワークス|オンライン秘書サービス , 2020 All Rights Reserved.