メッセージボードを枠に変えてみる


【CSS編集用デザイン】では、メッセージボードが最初はこのように、上下に波線が引かれています。



これを四角の枠に変える場合のやり方です。

【クイックリンク】 ⇒ 【CSSの編集】 で

/* (3-5) メッセージボード
--------------------------------------------*/

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

という個所を見つけます。

border-top:1px dotted #979797;
border-bottom:1px dotted #979797;

が上下の点線を表しています。

枠にする場合は、この2行を削除し、次のようにします

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

枠になりました。


border:1px dotted #979797; の 1pxは線の太さ、 dottedは線の種類、#979797は線の色を意味します。

【線の種類】
dotted 破線 ・ solid 実線 ・ dashed 点線 ・ double 二重線

background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */ 

のカラーコードを変更すると、内部に色を付けることもできます。

カラーコードはこちらを参考にしてみてください

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください

コメントを残す