アメブロ改造 メッセージボードに代わるスペースを追加する方法２

アメブロのテンプレート改造です。

メッセージボードに変わるスペースを追加する方法をご紹介しますね。

 

 

 

 

アメブロでは、メッセージボードという、
ちょっとした宣伝するスペースを
トップページに表示させることができます。

 

でも、トップページのみの表示なので、
全部のページでは見ることができません。

 

以前の記事でも書いたのですが、
それならば、メッセージボードも使えて、
なおかつ、メッセージボードの代わりのスペースを
全部のページに表示させればいいんじゃない？

ということで、バナー画像を用意して、
メッセージボードの上に、表示させる方法を、
ご紹介しました。
→ 【メッセージボードに代わるスペースを追加する1】

 

 

画像を作るのって、めんどう！！

 

そういう方もいるかと思います。

でも、そこはなんとか頑張ることも必要ですよ！！

 

練習だと思って、やってみて！！

 

 

がしかし、バナーを作成するのも初めてさんは、
時間がかかってしまいます。

 

ならば、ちょっときれいな背景にして、
アピールポイントを表示できるようにしてあげましょう。

 

バナー画像を設置するのと、大差はありませんので、
ぜひにやってみてくださいね。

 

設置手順

 

今回は、私のサンプルブログで試しているんですが、
ヘッダー画像をオレンジにしています。

ですので、フリースペースもオレンジ系に統一しました。
※同じ色目にすると、統一感がでますよ。
こんな感じになります。

 

まず、デザイン変更 → プラグインの追加をクリックします。

 

魔法のプラグインが記載していない方は、
まず、魔法のプラグンを追加してください。

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://nomadelinks.xsrv.jp/ame2/js/social_2c.js"></script>

 

魔法のプラグインの下に、コードを追加しましょう。

 

<script type="text/javascript">
$(function() {
$(".skinMainArea").prepend('<div id="bnr_text"><font color="#66cdaa">ここに、アピールすることを、書いてみよう！！<br>画像を貼ってもいいですよ！！</font></div>');
});
</script>

 

文字が書いてある部分を、あなたの入れたい文言を入力してくださいね。
<br>で改行できます。
文字の次に画像を入れたい場合は、<img src=”アップロードした画像”>
を追加してください。

 

次に作った id＝bnr_text の設定をしていきます。

デザインの変更 → ＣＳＳの編集をクリック。

ＣＳＳのところでの一番下に、こんなコメントアウトがあります。

その下に、下記のソースを入力してくださいね。

 

後で変更するときに、解りやすいように、
コメントアウトを書いておくといいです。

 

/* プラグイン */
#bnr_text{
width:auto;
margin:5px 0 10px; ← 余白部分
position:relative;
padding:10px; ← 文字の位置余白
background:#ffc993; ← 背景色
border-radius:15px; ← 背景の角を丸くする設定
font-size:14px; ← 文字の大きさ
font-family:"メイリオ","Meiryo"; ← 文字の種類
}

※ ← の部分は、削除してくださいね。

 

← の説明部分は、数字を変更してもOKです。
フォントの種類や、大きさ背景色なども、
自分の好みで変更してみてくださいね。

 

記載したら、保存してブログを表示させます。
表示できないようであれば、Ｆ５ キーで更新をかけてみてくださいね。

こんな感じになります！！

 

 

どうでしょうか？

 

こんな感じで、自分のアピールしたいことや、
お問い合わせ先・メルマガ登録の誘導など、
全ページからアクセスできるようにすると、
訪問者の方も嬉しいですよね。

 

ＣＳＳはいろいろと変更してくださって結構です。

 

自分なりのカスタマイズを楽しんでくださいね。

 

お色を選ぶときはこのサイトがとっても便利です。
よかったら、参考にしてくださいね。

★WEB色見本 原色大辞典

 

 

※画像をクリックするとサイトへ飛びます。