はじめに
今回は、毎回記事文章の末尾に表示させたい文章やリンクを定型文として表示させる方法です。いちいち記事を書く際に記入しなくても、一度設定すれば記事フッター部分に表示されますので便利です。
このブログでは「読者登録ボタン」「ペタボタン」を表示させています。
画像の赤枠の部分になります。
記事下に定型文を表示する方法
工程は３STEPコピペで終了です。①jqueryをフリープラグインに設定する。
②フリースペースに定型文を設定する。
③CSSで記事下に入れたい定型文の位置を設定します。
※コピペが解らない人は「コピペの方法( ´▽｀)bここを読んでみよう！ 」を読んで下さい。
①jqueryをフリープラグインに設定する。
<!-- 記事下に定型文設定ここから -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">$(function(){$("#ArticleFooter").appendTo(".articleText")});</script>
<!-- 記事下に定型文設定ここまで -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">$(function(){$("#ArticleFooter").appendTo(".articleText")});</script>
<!-- 記事下に定型文設定ここまで -->
②フリースペースに定型文を設定する。
※改行をしないで記入して下さい。
※赤字を消して任意の文章などを記入して下さい。
<div id="ArticleFooter">定型文のテキスト(HTMLタグも使えます)</div>③CSSで記事下に入れたい定型文の位置を設定します。
※青字を参考に位置を調整して下さい。
/* ▼▼記事下に定型文設定ここから▼▼ */
/*▲▲記事下に定型文設定ここまで▲▲*/
#ArticleFooter {
margin-top:20px;/*記事下からの距離*/
text-align:center;/*定型文の位置調整・左寄せ=left・右寄せ=right*/
}/*▲▲記事下に定型文設定ここまで▲▲*/
ブログの記事下(フッター)を確認して完了です。
サンプル
②のフリースペースに記入するサンプルです。読者登録
※赤字を自分のアメバIDに青字を使いたい画像URLに書き換え
<div id="ArticleFooter"><a href="http://blog.ameba.jp/reader.do?bnm=自分のID"><img src="画像URL"></a></div>
ペタ
<div id="ArticleFooter"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=自分のID"><img src="画像URL"></a></div>