新アメブロのカスタマイズ~メッセージボードを全てのページに表示させる~

メッセージボードを全てのページに表示させる

 

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

今回はブログ村などのブログランキングを利用している方にとっても役立つアメブロのカスタマイズです。

通常、アメブロのメッセージボードはトップページのみに表示されるものですが、

そのメッセージボードをアメブロ内の全てのページにを表示させることができます。

いや、この言い方では誤解を生んでしまうので・・・

正式に言うと、全てのページのメッセージボードの位置に定型文を表示できます。

要はメッセージボードだけを使用した場合、アメブロのトップページはこのように表示されますが、

メッセージボードを全てのページに表示させる

 

メッセージボードのさらに上の位置に定型文(今回は画像)を表示できます。

メッセージボードを全てのページに表示させる

 

さらにこの定型文はトップページのみならず全てのページに表示されます。

メッセージボードを全てのページに表示させる

 

ブログランキングバナーを設置するもよし、イベントやセールなどの告知をするもよし。

とても便利なカスタマイズです。

念のためもう一度言いますが、これはメッセージボードを全てのページに表示しているわけではなく、

定型文を全てのページの最上部に表示しているだけで、メッセージボードとは関係ありません。

 

今回は定型文ではなくバナーを貼り付けたいと思うので、まずはバナーを作成する必要があります。

バナーの作成にはInkscapeがおすすめ。

Inkscapeは誰でも今すぐダウンロードして利用できる無料ソフトです。

ダウンロード方法やInkscapeの使い方についてはこちらをご覧下さい。

今回はInkscapeで以下のようなバナーを作成しました。

バナー

 

それではカスタマイズ開始。

まずは「ブログ管理」⇒「投稿・編集」⇒「画像フォルダ」とクリックし、画像をアップロードします。

メッセージボードを全てのページに表示させる

 

次に「ブログを書く」⇒「サイドバー」⇒「プラグインの追加」とクリック。

そして「フリープラグイン」タブの中に、以下を全てコピペし各所を編集、保存します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1.6");</script>
<script type="text/javascript">
var myMe ='ここに画像のURLを入力(定型文を入力)'
$(function() {
$(".skinMainArea2").before('<div class="fix">'+ myMe + '</div>');
});
</script>

赤字のところは人によって異なるのでそれぞれ編集してください。

赤字部分は長文になっても構いませんが、キーボードのEnterを押して改行しないでください。

改行する際は改行タグ「<br />」で改行してください。

メッセージボードを全てのページに表示させる

 

そして最後に「ブログを書く」⇒「サイドバー」⇒「配置設定」とクリック。

「フリープラグイン」をドラッグ&ドロップでサイドバーに配置します。

 

これで完了。

今まで投稿した全記事、そしてこれから投稿する記事にも自動的に定型文が挿入されます。

※これは2011年8月以降の新スキンにのみ対応しています。

 

人気ブログランキングで今何位?

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る