アメブロ改造 メッセージボードに代わるスペースを追加する方法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はいろいろと変更してくださって結構です。
自分なりのカスタマイズを楽しんでくださいね。
お色を選ぶときはこのサイトがとっても便利です。
よかったら、参考にしてくださいね。
★WEB色見本 原色大辞典
※画像をクリックするとサイトへ飛びます。
カスタマイズ・テンプレートに関しての、
お問い合わせ・リクエストも受け付けています。
お気軽にメールをしてくださいね。
タグ:アメブロテンプレート, テンプレート改造, メッセージボード