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

アメブロ メッセージボードを装飾してみましょう。 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


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

アメブロのデザインスキンでは、メッセージボードがついています。

このメッセージボードは、トップページのみ表示可能。
アピールポイントとして、利用できます。

 

 

 

 

アメブロのメッセージボードは、
特に使わなくてもいいのですが、トップページのみに表示されるので、
ちょっとした宣伝効果も期待できます。

 

 

ヘッダーでアピールできる方はいいですが、
CSS変更可能スキンや、普通のデザインテンプレートでは、
ちょっと物足りない・・・・

 

 

そんな方には、このメッセージボードの部分って、大事です。

 

 

アクセスって、どのページから訪問されるかって、解らないものです。

 

 

ブログに訪問してくださった方で、
そのブログが気に入ってくださった方なら、
トップページに戻ってくださる可能性もあります。

 

 

その時に、目につくものがあったら、
ますます興味をいただいてくれるはず!!

 

 

もとより、いろんなページを見てくださる方って、
その方や、ブログのファンの可能性が大きいです。
もっと濃いファンを作るためにも、メッセージボードで、
あたなのブログのことをアピールしてみましょう。

 

 

 

各種設定メッセージボードへの投稿は、【各種設定】から入って、
メッセージボードをクリックします。

 

 

 

 

 

 

 

こんな感じ。

メッセージボード

 

 

記事投稿と同じ要領で、好きなことを書いてくださいね。

簡単でしょう!!

 

 

 

でも、ちょっとね・・・・

 

というのは、装飾の部分。

 

デフォルト(初期設定)では、点線が上下にひかれているだけ。

 

まーここに、アピールしたい画像などを貼ったり、
大きなバナーを飾ったすればいいかもしれませんが、
メッセージを書いたとしても、なんだか目立ちませんよね。

 

 

だったら、飾ってあげましょうね。

 

 

これは、CSSにちょっと追加すればすぐにできる方法です。
※CSS編集可能デザインをサンプルにしています。

 

では、やってみましょうね。

 

 

hana2メッセージボードCSSの変更

いつもの通り、【デザインの変更】から【CSS編集可能】をクリックです。

 

 

CSSの記載しているところから、

/* (3-5) メッセージボード
——————————————–*/

上記の表示を探してください。
※control + Fキーで、検索をして、【メッセージボード】と入力すると、
探すのが簡単です。

 

デフォルト(初期設定)では、こんな感じの記述があります。

CSS編集

 

 

 

黄色いハイライトの部分を、変更していきます。

 

今回は、背景を薄いピンクにして角を丸くしています。
それから、メッセージボードを囲んでいた、
点線を見えなくしています。

ついでに、フォント(文字)のサイズと種類の変更もしました。

 

出来上がりはこんな感じです。

 

messe-css変更

 

 

 

まず、メッセージボードのCSSの削除から行います。

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */

の下の、この3行を削除してください。

 

 

 

では、ここに、下記のコードをコピーして、貼ってください。

 

 

 

上記で、背景色の設定が完了しました。

 

次に、.skinMessageBoard2{
の部分で、文字がはみ出した場合、表示させないという設定を記述します。
下記のコードをコピーして、貼ってください。

 

 

 

次に、

.skinMessageBoard3{

の部分ですが、デフォルト(初期設定)では、

padding:16px 30px; という記述があります。
これは、余白の設定を予めしてあるので、
余白を狭くしたり、広くしたりは、この数字を変更します。

今回はこのままデフォルトのまま、使用しています。

上記のコードの下に、下記のコードを追加します。
 

 

 

 

以上です。

 

上記のコードを追加することによって、
メッセージボードの背景色を変更・点線を表示させずに、
角を丸めた図形の中に、メッセージを記述できることが、可能となりました。

 

 

フォントも、デフォルトより大きい文字にし、種類も変更しました。

 

これでカスタマイズが完成です。

 

 

ちょっとコメント書いてみて、表示を確認してみましょう。
こんな感じね。

 

messe-css変更

 

 

どうでしょうか?

これなら、アピールできそうですよね。

 

ちょっとのカスタマイズで、ブログも自分の個性に合わせたデザインに変更できます。

 

 

簡単なこと部分から、ぜひチャレンジしてみてくださいね。

 

 

初心者にもできるアメブロカスタマイズ 2012

 

楽天アフィリエイトを楽しみたい方は、
こちらからどうぞ!!
【日記ブログから楽天アフィリエイトをする方法】

 
 
 

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

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