メッセージボードの各種設定 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ メセージボードの各種設定



◆ メッセージボードの枠


① 枠を消す

/* ------------------------------------------------------- */
/* メッセージボードの枠を消す               */
/* ------------------------------------------------------- */
.skinMessageBoard{
border:none;
}



② 枠をつける

/* ------------------------------------------------------- */
/* メッセージボードの枠を設定               */
/* ------------------------------------------------------- */
.skinMessageBoard{
border-top :1px solid #ff00ff;/* 上 */
border-right :1px solid #ffff00;/* 右 */
border-bottom:1px solid #0000ff;/* 下 */
border-left :1px solid #00ffff;/* 左 */
}




◆ メッセージボードの背景色


① 背景色

/* ------------------------------------------------------- */
/* メッセージボードの背景色                */
/* ------------------------------------------------------- */
.skinMessageBoard{
background-color:#ffff00;
}



◆ メッセージボードの文字・画像の中央寄せ


① 文字・画像の中央寄せ

/* ------------------------------------------------------- */
/* メッセージボードの文字・画像を中央寄せ         */
/* ------------------------------------------------------- */
.skinMessageBoard{
text-align:center;/* center→中央 left→左 right→右 */
}



◆ メッセージボードの文字の色・大きさ・太さ


① 文字の色・大きさ・太さ

/* ------------------------------------------------------- */
/* メッセージボードの文字の色・大きさ・太さ        */
/* ------------------------------------------------------- */
.skinMessageBoard{
color:#00ffff;/* 色 */
font-size:12px;/* 大きさ */
font-weight:bold;/* bold→太い文字 normal→普通 */
}




◆ メッセージボードの背景画像設定


 ① 画像を繰り返しない

/* ------------------------------------------------------- */
/* メッセージボードの背景画像設定             */
/* ------------------------------------------------------- */
.skinMessageBoard{
background-image:url(画像のURL);
background-repeat:no-repeat;/* 繰り返ししない */
background-position:center top;/* 位置 */
}



 ② 画像を繰り返しする

/* ------------------------------------------------------- */
/* メッセージボードの背景画像設定             */
/* ------------------------------------------------------- */
.skinMessageBoard{
background-image:url(画像のURL);
background-repeat:repeat;/* 繰り返しする */
background-position:left top;/* 位置 */
}




◆ メッセージボードのスクロール


 ① スクロールバーをつける(指定した高さを超えた場合)

/* ------------------------------------------------------- */
/* メッセージボードのスクロール              */
/* ------------------------------------------------------- */
.skinMessageBoard{
height:200px;/* 高さ */
overflow:auto;
}





◆ メッセージボードの削除


 ① 削除する

/* ------------------------------------------------------- */
/* メッセージボードの削除                 */
/* ------------------------------------------------------- */
.skinMessageBoard{
display:none;
}