メッセージボードのCSS設定のリセット方法

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

当ブログのメッセージボードを新デザイン用に書き換える用意をしている際、メッセージボード上下の罫線、周囲のスペースの設定を変更する必要に迫られました。

編集可能CSSには、特にコメントも書かれておりませんので、どうすれば罫線を消せるか、スペースを調整できるかについて説明したいと思います。

メッセージボードの初期設定

編集可能CSSがページに読み込まれる前に、複数のアメブロの共通設定用CSSが先に読み込まれて基本的な設定が行われます。罫線とスペースの設定は、そのCSSのうちの一つでで次のように行われています。

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#fff;
}
.skinMessageBoard2{}
.skinMessageBoard3{
padding:16px 30px;
}

リセット方法

罫線を消し、領域周辺のスペース（padding）をリセットする（ゼロにする）ためには、編集可能CSSに以下の記述を追加すればOKです。

.skinMessageBoard{
/* 注 blog.cssに margin-bottom の記述有り */
	border:hidden;
}
.skinMessageBoard3{
	padding:0;
}

paddingについては、適宜調整していただければよいと思います。