アメブロ「メッセージボード」可愛くカスタマイズする

メッセージボードを可愛くカスタマイズしましょう

メッセージボードに文字を入力する

設定管理→メッセージボード
例）講座の案内

画像を入れる場合
記事を書く→表示したいように設定しHTMLをメッセージボードに入れる

注意：文字と文字の間に空白行が入るため
空白行を削除しましょう

メッセージボードに枠線を入れる

二重枠線　赤

デザインの設定＞CSS編集＞6-2 メッセージ
黄色の部分を追記します。

/* (6-2) メッセージ
——————————————–*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 30px;
margin: 10px 0 20px 20px;
border: 4px double #ff0000;/* 二重枠線 */
background-color:#fff;/* 背景色 */
}

点線枠線　赤

/* (6-2) メッセージ
——————————————–*/
/* メッセージ 背景 レイアウト */
.skin-message {
padding: 30px;
margin: 10px 0 20px 20px;
border: 3px dashed #ff0000;/* 点線枠線 */
background-color:#fff;/* 背景色 */
}

水色　枠線

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

色について
border:3px double #c1e4e9;　←点線
background:#f4ffff;　←背景色

その他の色はこちらを参照

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org