アメブロ

アメブロでメッセージボード機能は大事なお知らせに最適

アメブロにはブログのトップページの、記事一覧とヘッダーとの間に自由にHTMLを記述できるメッセージボードという領域があります。メッセージボードはブログのトップページに表示されるということもあり、目を引きやすいです。

自分のサービスや、ブログでどんな情報を発信しているかなど、読みに来てくれた人に特に見て欲しい情報は、メッセージボードに載せると、読んでもらいやすいと期待できます。

商用利用も可能になったアメブロで集客を強化したいという方はメッセージボードがおすすめです。この記事ではアメブロのメッセージボードの使い方を紹介します。

アメブロのメッセージボードとは

アメブロのメッセージボードとは、トップページに掲載するお知らせのようなものです。ヘッダーと投稿記事一覧の間に表示されます。

以下の画像の白いところです。

ブログデザインは「ふゆのくまさん」でメッセージボードを表示させてみました。とても目につきやすい位置に表示されています。

  • お店の営業時間やメニューを目立たせたい。
  • コンサル、教室の内容を知って欲しい。

アメブロを集客に使いたい、特に見せたい情報がある人はメッセージボードは必須の機能と言えるでしょう。ぜひカスタマイズしてみましょう。

メッセージボードの作り方

アメブロのメッセージボードは、デフォルトでは表示されていません。自分でカスタマイズして表示させる必要があります。

メッセージボードの作り方は簡単です。

アメブロの管理画面からメッセージボードを選択します。

クリックするとメッセージボードを投稿する画面が表示されます。

普通に文字を入力するだけでメッセージボードを使用することができます。

2019年現在ではメッセージボードは文字が入力できるだけで、メッセージボードから文字に色をつけるなどの編集ができません。

凝ったデザインにすることも可能

そのまま文字を入力するだけでもアメブロはメッセージボードを使用することができますが、冒頭で紹介したような、ただ黒い文字が並ぶだけのデザインになってしまいます。

難しいですが、アメブロのデザインをCSS編集用デザインにすると、凝ったデザインのメッセージボードを作ることも可能です。

CSSとはウェブページの見た目を自由に変更する設定のことです。アメブロのデザインのひとつであるCSS編集用デザインは、初期状態の見た目は簡素です。

しかしCSSを設定することで、アメブロのブログという仕組みにある程度制限されるもののオリジナリティのあるデザインにすることができます。

簡単な手順としてはこのとおり。

  1. アメブロのデザインをCSS編集用デザインにする。
  2. メッセージボードの編集で、HTMLのタグを書く。
  3. デザインにあわせてCSSを設定する。

凝ったデザインの作例

実際に私がメッセージボードを編集してみました。

編集した内容は次のような内容です。

  • メッセージボードの幅を少し狭くした。
  • メッセージボードに背景色や色をつけた。
  • 文字を中央ぞろえにした。
  • 花の画像を背景に設定した。

華やかで目を引きますね。

単に文字を入力しただけよりも、集客効果が期待できます。しかしこれを作るには、かなり勉強が必要になります。

とりあえず「こんなものも作れるよ」という作例として紹介するのに留めます。

初心者の方でも簡単に作れるカスタマイズ

ここからは初心者の方でも簡単に作れるメッセージボードのカスタマイズを紹介します。

複雑なデザインをしようとすると、メッセージボードの投稿画面から複雑な編集が必要になります。しかしこのカスタマイズでは、ブログデザインのCSSの編集のみで作成することができます。

ブログデザインのCSS編集を開き、以下の内容をコピペします。

/* (6-5) メッセージボード
——————————————–*/
.skin-message{

text-align:center;/* 文字の中央ぞろえ */

max-width:400px;/* 最大幅の設定 */

background: #f1f1f1;/* 背景色の設定 */

color: #333;/* 文字色の設定 */
}

保存すると以下のようなデザインにすることができます。

backgroundで背景色を、colorで文字の色を設定しています。#の後が色の設定になります。濃い色の背景色を指定する場合は、薄い色の文字にすると読みやすくておすすめです。

ぜひ挑戦してみてください。