メッセージボードを常に表示させる | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery


★ メッセージボードを常に表示させる


● 内容


① メッセージボードをブログホーム以外にも常に記事(全体)前に表示させます。
② Ajaxを利用してブログのホームのHTMLを読み込んで、メッセージ部分を
  抜き出して、記事前に表示しています。
  これによって、PV(ページ・ビュー)が加算されてしまう可能性があります。
  (アクセス解析)
③ ブログホームの場合は、何もしていません。



● やりかた


① フリープラグインに追加する。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
Message_all_disp(".skinMainArea");
</script>



◆ 説明

 ・ 下記はフリープラグインの最初に1つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>


・ 下記は既にフリープラグインに書かれていれば不要です。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>


Message_all_disp(".skinMainArea"); ・・・ .skinMainArea は記事(全体)のセレクタ名(場所の名前)
   指定したセレクタ名の前に表示されます。




● Message_all_dispの関数の内容


function Message_all_disp(msg_all_d_s){                                  // ● メッセージボードを常に表示
$(document).ready(function(){
if($(".skinMessageBoard").length==0){ // メッセージボードが表示されているか?
var AmebaID=ameba_id_get(); // アメーバIDを取得
var home_url='http://ameblo.jp/'+AmebaID; // URL作成
var message_data1=$.ajax({url: home_url, async: false}).responseText; // URLの読み込み
var message_data2=$(".skinMessageBoard",message_data1); // skinMessageBoard 部分を取り出す
$(msg_all_d_s).prepend(message_data2); // 指定箇所に skinMessageBoard 部分を追加する
}
});
}