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

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

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

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

画像を入れる場合
記事を書く→表示したいように設定し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色見本

コメント

タイトルとURLをコピーしました