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

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

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

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

 

 

 

 

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

 

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

 

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

ということで、バナー画像を用意して、
メッセージボードの上に、表示させる方法を、
ご紹介しました。
【メッセージボードに代わるスペースを追加する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 の設定をしていきます。

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

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

コメントアウト

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

 

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

 

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

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

 

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

 

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

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

コメントのフリースペース

 

 

どうでしょうか?

 

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

 

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

 

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

 

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

http://www.colordic.org/

★WEB色見本 原色大辞典

 

 

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

 

 

カスタマイズ・テンプレートに関しての、
お問い合わせ・リクエストも受け付けています。
お気軽にメールをしてくださいね。

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ