アメブロdeアクセスアップ

アメブロ 簡単にメッセージボードを目立たせる方法とは? | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:CSSでカスタマイズ

アメブロのカスタマイズです。

メッセージボードって使っていますか?
ちょっと簡単に目立たせる方法をご紹介しますね。

 

 

 

 

アメブロのメッセージボードは、
トップページのみに表示される場所です。

 

ただ、アクセスというのは、
決してトップページから、来るわけではないってこと。

 

 

 

検索エンジンからのアクセスは、
検索ワードで見つかった、ページ・サイトから来るので、
検索ワードでヒットしたページから読者さんは読むことになります。

 

 

でも、いい感じの記事だった場合、
そのブログのトップページに大体の方がトップページを見てくれます。

 

 

 

そこに、自分のアピールポイントや、
読者さんが気になること、告知情報などがあったら、
目に留まりやすいですよね。

 

 

 

以前の記事でも書いているんですが、
そのメッセージボードをちょっと飾ってみる。
背景色を変える方法をご紹介してみました。
アメブロ メッセージボードを装飾してみましょう。

 

 

 

 

メッセージボードの背景色を変えるだけでも、
簡単に目に留まりやすくなりますが、
その他にも、メッセージボードの部分に枠なんかつけるのも、目立つ方法の一つです。

 

 

メッセージボードのデフォルト(初期設定)の時はこんな感じです。

 

メッセージボードでアピール

 

 

 

 

なんか味気ないでしょう?

 

ここを、全体のブログのお色に合わせるた枠を付けると、
こんな感じになりますよ。

 

枠線をつけました。

 

 

これまた、簡単ですので、ぜひに、やってみてください。

 

 

 

今回は、CSSの修正だけで行います。

 

 

hana2 CSSの修正

※CSS編集可能のテンプレートをお使いの場合の例です。

 

デザイン変更 → CSS編集をクリックします。

 

 

CSSコードが記載されている部分の、
メッセージボードという場所を探します。

 

messe-css

※control + Fキーで検索窓が開きますので(画面の下の部分に)
「メッセージボード」と入力すると、探しやすいです。

※上図のように、角を丸くして1本の線で枠を作ります。

 

 

 

このCSS(黄色いハイライトの部分)を下記のコードに差し替えます。
 

 

表示で確認してみてね。

 

 

 

point

 

CSSの解説

 

 

border → 線の表すコードです。

border:3px は、線の太さを表しています。
数字を大きくすると、線の太さが太くなりますよ。

 

 

solid → ボーダー(線)を表示させるコードです。

 

 

#ffca99 → 色のコードです。ここは好きな色に変更してね。

こちらのサイトで、色を作ってみましょう。
原色大辞典

 

 

 

border-radius:10px → 枠の角を丸くします。
数字が大きくなると、角の丸みが大きくなります。

 

 

 

簡単ですよね。

 

 

 

枠線の種類は、他にもこんな感じです。

ドット(点線)の場合は、こんな感じね。

 

ドットの枠線

 

※solid を dotted に変更すればOKです。

 

 

二重線の場合はこんな感じね。

 

二重線の枠線

 

※solid を double に変更すればOKです。

 

 

どうでしょうか?

 

メッセージボードの枠線を追加しただけでも、
ちょっと目立つ場所になったと思いませんか?

 

 

 

背景色や背景画像を変更しても、
目立つようになりますが、簡単な枠線だけでも、
いい感じでしょう?

 

 

 

メッセージボードを利用している方は、
たくさんいらっしゃいます。

 

ただし、先ほども書きましたが
メッセージボードは、トップページしか表示ができません。

 

 

 

たくさんアピールポイントを書いたり、
画像を飾ったりするのには、トップページのみの方が、
かえって読者さんを、惹きつけます。

 

 

ぜひとも、やってみてくださいね。

 

 

 

全部のページに、アピールしたいことを表示させたいなら、
他の方法もありますよ。
こちらを参考にしてくださいね。
アメブロ改造 メッセージボードに代わるスペースを追加する方法

 

 

 

カスタマイズのリクエストや質問がございましたら、
お気軽にメールを送ってくださいね。

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.