記事やメッセージボードにブログパーツを貼る | リアナのカスタマイズ日記(CSS編集用デザイン)

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

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

★ 記事やメッセージボードにブログパーツを貼る


● 注意

① ブログパーツの内容によっては、うまく記事に表示されない場合があります。
② このスクリプトでは、記事やメッセージボードに貼り付ける場所の指定がない場合は、
  ブログパーツを削除し、ページ内のどこにも表示されないようにしています。

  つまり、指定した記事やメッセージボード以外には表示しない。

③ アメンバー限定記事は対象外です。



● やり方



① ブログパーツを表示したい記事またはメッセージボードに下記を
  HTMLモードで追加する。

<div id="bparts1"></div>


◆ 作業手順


A 記事本文を書いて、HTMLタグを表示をクリックする


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


B ブログパーツを入れたい場所に <div id="bparts1"></div> を入れる。
  そして投稿する。


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



② 下記をフリープラグインへ追記する(の部分はブログパーツのタグを入れる


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

</div>
<script type="text/javascript">
$(document).ready(function(){
if($("#bparts1").length==1){$("#bparts1x").appendTo("#bparts1");
}else{$("#bparts1x").remove();}
})
</script>






◆ 複数の記事に異なるブログパーツを入れたい場合は、
  オレンジ色の名前を変えてください。(記事部分とフリープラグイン部分)




bparts1→bparts2
bparts1x→bparts2x


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

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



◆ スクリプト(プログラム)の説明。

① bparts1(記事に指定した場所)の数を数えます。
② 数が、1の場合は、bparts1x(ブログパーツ)をbparts1(記事に指定した場所)に
  移動します。
③ 数が、1でない場合は、bparts1x(ブログパーツ)を削除します。

尚、ページ内容がすべて表示された後に、このスクリプトは実行されます。