ページナビに最初、最後のナビを追加する

★　ページナビに最初、最後のナビを追加する


●　 内容

①　<< 前ページ 記事一覧 次ページ >>　のページナビを下記の様にする


最初　<< 前ページ 記事一覧 次ページ >>　最後


②　最初、最後の文字は、自由に変更可能。
　　画像を指定してもＯＫ（ＨＴＭＬで記述する）


③　注意

最初・最後は下記HTMLとなります。
最後のページ数は、わからないので、99999 を指定します。


<a class="pagingFirst" href="http://ameblo.jp/アメーバＩＤ/page-1.html">最初</a>
<a class="pagingLast" href="http://ameblo.jp/アメーバＩＤ/page-99999.html">最後</a>





●　やり方

①　フリープラグインへ追記する

<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">
page_FL_set('最初','最後');
</script>

◆　説明

　・　下記はフリープラグインの最初に１つあれば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>


　　・　page_FL_set('最初','最後');

最初・・・表示したい文字を入れる。
最後・・・表示したい文字を入れる。

画像にしたい場合は下記

page_FL_set('<img src="画像のＵＲＬ">','<img src="画像のＵＲＬ">');






②　ＣＳＳへ下記を追記する（位置の調整）

.pagingFirst{/* ページナビ　最初 */
position:absolute;
left:55px;
top:5px;
}
.pagingLast{/* ページナビ　最後 */
position:absolute;
left:380px;
top:5px;
}

◆　スクリプトの内容

function page_FL_set(F_desc,L_desc){// ページナビに最初、最後を追加する
$(document).ready(function(){
$(".pagingArea").each(function(){
var page_html=$(this).html();
var new_page_html='<a class="pagingFirst" href="http://ameblo.jp/'+ameba_id_get()+'/page-1.html">'+F_desc+'</a>'+page_html+
'<a class="pagingLast" href="http://ameblo.jp/'+ameba_id_get()+'/page-99999.html">'+L_desc+'</a>';
$(this).html(new_page_html);
});
});
}