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

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

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

メッセージボードを、トップページ以外にも
表示
できませんか?という
カスタマイズ・リクエストがあったので、ご紹介しますね。
 
 

 
 
 

アメブロでは、メッセージボードというスペースがあります。
こんな感じね。

アメブロにメッセージボードを設置

 

このメッセージボードは、自分の宣伝したいことを、
トップページに表示させることができる場所として、
有効利用ができます。

 

ただ、デメリットというか、メッセージボードは、
トップページのみの表示なんです。

 

ですから、トップページの記事には表示されても、
次のページや、検索エンジンから訪問くださった方には、
このメッセージボードの表示を見ることができません。

 

ということは・・・・・?

 

例えば、ここに読者登録ボタンや、
メルマガへの誘導バナーを貼っていたとしたら、
トップページへ戻っていただかなければ、
見ることができないわけです。

 

 

それは、ちょっとね・・・・
どうでしょう?

 

メッセージボードは、アメブロではトップだけの表示だよ!!って、
予め設定してあります。

 

それに、トップページだけでOK!!
という方も、中にはいらっしゃるわけです。

 

じゃぁ~ メッセージボードに代わるスペースを追加して、
どのトップページ以外のページからでも、
表示できるスペースを追加してしまいましょう。

 

それなら、メッセージボードも使うことができるので、ナイスでしょう?
例として、ちょっとかわいめのバナーを作成しました。
メッセージボードの上に、表示させることにします。
こんな感じで。

アメブロにフリースペースを設置

 

これなら、メッセージボードも使えるし、
作成した、バナーは全ページで表示されます。

 

これは、フリープラグインにjavascript を追加し、
更にCSSを整えていきます。

さっそくやってみましょう。

 

設定手順

今回は、サンプルとしてCSS編集可能なデザインテンプレート
使っています。

まず、表示する画像を作成してくださいね。
アメブロのカラム構成にもよりますが、
だいたい幅が560pxくらいのものがいいかもです。

 

作成した画像を、アップロードしておきましょう。

 

アメブロ内でもいいですが、今回私は、
以前記事でも書きましたが、【Dropbox】を利用して、
アップロードしました。
【Dropbox】は、パブリックフォルダを利用すると、
リンク先のURLが、共有できるのでとっても便利です。
参考にしてみてくださいね。
【Dropbox の使用方法】

 

アメブロのデザイン変更から、【プラグインの追加】をクリック。
フリープラグインにコードを追加していきます。

 

アメブロはJqueryを使っているので、
一番上に、魔法のプラグイン(下記のコード)を追加します。
 

<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_box"><img src="アップロードした画像" width="画像の幅" height="画像の高さ" alt="バナー"></div>');
});
</script>

 

idを【bnr_box】と今回名前を付けていますが、
これは、好きな名前で解りやすいものがいいかと思います。

 

これで、いったん保存します。
※このままでは、うまく表示できません。

 

次に、このアップロードした画像の設定をするために、
CSSを追加します。

 

デザインの変更 → CSSの編集からCSSコードを見てみましょう。

CSS編集画面こんなコメントアウトが書かれているかと思いますので、その下にCSSを追加しましょう。

 

 

その時に、あとで変更できるように、
コメントアウトを一緒に書いておくといいです。
※コメントアウトとは、説明分みたいなものです。

 

 

/* プラグイン */
#bnr_box {
width:auto;
margin:5px 0 10px;
}

 
 

このコードは、作成したバナー画像の高さと、
周りの余白の設定をしています。

 

これで保存をかけて、ブログを確認してくださいね。
こんな感じになっていれば、OK!!です。

アメブロバナー設置完成

 

確認事項として、トップページからブログを一度確認。
それから、次のページを見てみてください。
画像が表示されていれば、設置成功です!!

 

お疲れさま!!

 

お疲れ様でした!!

 

 

これなら、全部のページで表示できますし、
素敵なバナーを作成すれば、アピールにもなりますね。

 

ちょっとめんどくさいところもありますが、
自分の可愛いブログです。

苦労した分だけ、愛着がわきますよ。

 

ぜひチャレンジしてみてくださいね。

 

私がアメブロで一押しなテンプレートです。

テンプレートをサクッと作成して、
ご自分の好きなカスタマイズを研究してみてください。
ちなみに、アメブロビズ2(AmebloBiz2)のテンプレートは、
カスタマイズの必要はありません!

 

アメブロ・ワードプレステンプレートで、
ご質問や、リクエストなどございましたら、
メールでお気軽にお寄せくださいね。

 
 
 

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

  1. […] 紹介しました。 → 【メッセージボードに代わるスペースを追加する1】 […]

  2. こんにちは。

    アメブロの可能性は、まだまだあるんですね。

    もうちょっと見なおしてみます。

    いい情報をありがとうございました☆

    応援ポチ

    • ちえぞう より:

      むらかみさん、こんにちは。

      私のブログに訪問&コメントありがとうございます。

      アメブロには可能性がいっぱいです。
      お持ちであれば、うまく使えばいいと思います。

      サテライトとかには、ピッタリ!!
      ちなみに私のアメブロは、しっかり集客用として、大活躍です!!

      お役にたてて、嬉しいです。

      応援ありがとうございます。

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



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

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

line

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



Fc2ランキングへ



お問い合わせ

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

pen

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

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

このページの先頭へ