PCインストラクターの川上です。
アメブロのブログトップ（トップページ）には、記事エリアの最上部にメッセージボードが表示されます。
こんなふうに↓↓↓
この場所は、目につくところですので、「お知らせ」やメッセージやリンクやバナーを配置したりするとよいですね。
メッセージボードの中に囲い枠を入れる方法
どのようにするのか、というと･･･
パソコン版の「マイページ」を開きます。
右上の三本線のマークをクリックして、一覧から「メッセージボード」をクリックします。
そう、「各種設定」の欄にある「メッセージボード」です。
すると、ブログ投稿画面と似た感じのメッセージボードを書く画面が表示されます。
普通はここにメッセージ等を入力していけばよいです。
今回は、囲い枠と一緒にメッセージを作ろうと思いますので、「HTMLタグを表示」をクリックして、HTMLで書く画面に切り替えます。
そして、この↓↓↓コードをコピー＆ペースト（コピペ）します。
<fieldset><legend><strong>◆お知らせ◆</strong></legend><font color="#ff0000">■年末年始のお休み■</font><br />
12月29日（日）より1月3日（金）までお休みとなります<br />
<br />
本年は色々とありがとうございます<br />
どうぞ、来年もよろしくお願いいたします！</fieldset>
貼り付けたら、「タグの非表示」をクリックして、通常の画面で確認します。
文字を修正したり、色をつけたり、リンクしたり、強調したりします。
（今回のように<fieldset>タグを使用している場合は、一度枠内をダブルクリックしてから編集します。）
できたら、「表示を確認する」を押して、一度確認します。
（ただし、ここで表示されるリンクは飛びませんのでご注意を。）
確認できたら、「公開」ボタンをクリックして完了です。
メッセージボードには、他の囲い枠を入れることもできます。
（他の囲い枠の種類に関してはこちらの記事をご参照ください。）
でも、欲張って、たくさ～ん、たくさ～ん書いてはいけませんよ～
だって、
記事はまだか～い！
ってなりますので^^!
メッセージボードをCSS編集で変更するには
また、メッセージボードそのものを目立たせたい、という方は、
CSS編集でメッセージボードの囲み線や背景を変更することができます。
すでに初期設定で、メッセージボードの上下に点線が入るようになっています。
/* (3-5) メッセージボード
--------------------------------------------*/
.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}この箇所（↑↑↑）を色々と変更するとよいですね。
例えば、次のように（↓）変更すると、
/* ■メッセージボード■ */
.skinMessageBoard {
margin :0px 0px 0px 0px;/* 上 右 下 左 */
border :2px solid #ffcc00;/* 線 */
background :#ffffcc;/* 背景の色 */
}こんな感じになりますね^^!
もちろんメッセージボードの背景に画像を入れることもできます↓↓↓
/* (3-5) メッセージボード
--------------------------------------------*/
.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:url(画像のurl) no-repeat;/* ←メッセージボードの背景に画像を入れたいとき */
}お好みでメッセージボードを活用してみましょう！
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大