メッセージボードを目立たせるカスタマイズ

こんにちは。
『やさしいブログの作り方』の松田です。

メッセージボードはトップページにアクセスした時に記事エリアの上、ちょうど画面の真ん中辺りに表示させるスペースです。

それゆえ、ここにお知らせしたい内容などを書いておくと目に留めてもらいやすくなります。

一般のデザインスキンであればここも背景画像が敷かれていたりするのですが、ＣＳＳ編集用デザインを使っている場合は、上下に点線しか入っていないので非常に殺風景です。＾＾；

記事下定型文などで使っている囲み枠のように、背景に薄い色をつけて、かつ縁に少し影をつけることで、目立たせることができます。


メッセージボードを色付き、影付きにするには、ＣＳＳの最後に以下の記述を追記します。

.skinMessageBoard{
margin:0 5px 20px;
background:#fffcfc;
border:2px solid #ff1493;
border-radius:5px;
box-shadow:3px 3px 3px #999999;
}

上記の赤の部分、上が背景色、下が枠線の色を表しますので、このみのカラーコードに変更可能です。

青系なら、

.skin-message,.skinMessageBoard{
margin:0 5px 20px;
background:#fcfcff;
border:2px solid #000099;
border-radius:5px;
box-shadow:3px 3px 3px #999999;
}

緑系なら、

.skin-message,.skinMessageBoard{
margin:0 5px 20px;
background:#fcfffc;
border:2px solid #006600;
border-radius:5px;
box-shadow:3px 3px 3px #999999;
}

といった感じです。＾＾


あと、黒板風にするとこんな感じです。（笑）

.skin-message,.skinMessageBoard{
margin:0 5px 20px;
background:#006600;
border:8px solid #996600;
border-radius:5px;
box-shadow:3px 3px 3px #999999;
color:#ffffff;
}

最後までお読みいただきありがとうございました。

無料メール講座配信中

これからブログを頑張っていきたい！ まずは基本から。
やさしいブログづくりのための、やさしいメール講座（全１０回）

やさしいブログ、書籍化！

ブログでビジネスを軌道に乗せるための行動術

「ブログを続けていてよかった」
そんな気持ちを一人でも多くの人と共有したいと思っています。＾＾

やさしいブログの仕事術

どんなビジネスも突き詰めれば人対人。
その良好な関係を築くのは、相手をおもんばかる気持ちと行動です。