「知りたいことだけピンポイントでレッスンしています。」
湘南・茅ヶ崎のパソコンスクール FLEX Web（フレックス ウェブ）のミナベです。
これまで表示させていたアメブロのメッセージボードの見た目をCSSで見栄え良くしたので、そのご説明です。
この記事を初めてご覧になる方もいらっしゃるかと思うので、アメブロのメッセージボードについて簡単にご説明しますね。
アメブロのメッセージボードとは、アメブロのトップページ最新記事の上に表示される、自由スペースのことです。
ネイルサロンや鍼灸院などのアメブロで、このメッセージボードにお店のオフィシャルWebサイトのURLや、キャンペーン情報などが掲載されているのをよく目にするかと思います。
メッセージボードは、トップページに訪れてくれた方の目にとまりやすい場所に表示されますので、見て欲しい情報や知って欲しい情報をなるべく目立つように書きます。
では、FLEX Webのメッセージボード編集画面（ブラウザはCrome）です。ドン！
HTMLとCSSでデザインしたので、文字色を変えたり絵文字が挿入できる便利なメニューバーが付いたエディタの利用は必要ありません。したがって、いつも使っているCromeでメッセージボードの編集画面を開いて編集を行いました。
HTLMは余計な余白は入れず、そして改行せず繋げて記述してくださいね。
アメブロのメッセージボード編集画面でHTMLとCSSを編集する際は、みっちり繋げて書くのが表示崩れを起こさないコツです。
上記を公開すると、下の画像のデザインがメッセージボードのエリアに表示されます。ドン！
以前に比べて、すっきりと整理されて見やすくなったのではないかと思います。
お読みいただき、ありがとうございました。