今回は、FC2ブログの前のページ・次のページ表示をjqueryプラグインを使って、カッコよくしてみよう！
Contents
FC2ブログにページナビゲーションを実装する方法
プラグインをダウンロードしよう
simplePagination.jsにいき、queryプラグインの必要なファイルをダウンロードします。
サイトを開き、Downloadの項目のhere.をダウンロードします。
※わかりやすい場所（デスクトップ）などに保存しましょう。
zipファイルを展開しよう
先ほど、ダウンロードして保存したzipファイルを展開します。
使うファイルは、
「jquery.simplePagination.js」
「simplePagination.css」
jsファイルの一部を変更しよう
今回は、FC2ブログにページナビゲーション（ページ送り）設置するので、「jquerysimplePagination.js」のファイルの中をTeraPadなどで開いて一部変更します。
変更前
$link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
変更箇所は、360行目の
の(pageIndex + 1)+ 1を削除します。
変更後
$link = $('<a href="' + o.hrefTextPrefix + (pageIndex) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
変更したら、「上書き保存」します。
次に、FC2ブログではファイル名にドットやピリオドが使えないので、「jquery.simplePagination.js」のドットの部分を削除します。
変更後
「jquerysimplePagination.js」
これで、FC2ブログにページナビゲーションを設置するためのファイルの準備ができました。
simplePagination.jsファイルをFC2ブログにアップロードしよう
「jquerysimplePagination.js」
「simplePagination.css」
2つのファイルを、FC2ブログ管理画面からアップロードします。
URLを控えておこう
アップロードしたら、ファイルのURLをコピーしてメモ帳などにいったん控えておきましょう。
URLを記述しよう
先ほど控えておいたURLを、下記の「控えたURL」の部分に置き換えてください。
<script type="text/javascript" src="控えたjquerysimplePagination.jsのURL"></script> <link type="text/css" rel="stylesheet" href="控えたsimplePagination.cssのURL">
テンプレートのHTML編集しよう
今回のページナビゲーションはjqueryプラグインなので、jquery本体を設置してない方は、<head>～</head>内に下記を記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<head>～</head>内に記述しよう
続いて、先ほどアップロードした2つのファイルも<head>～</head>内に下記を記述します。
<script type="text/javascript" src="控えたjquerysimplePagination.jsのURL"></script> <link type="text/css" rel="stylesheet" href="控えたsimplePagination.cssのURL">
下記のスクリプトも<head>～</head>内に設置します。
こちらは、komonoteさんのブログを参考にさせていただきました。
<script type="text/javascript">
$(function() {
$('#pagenation').pagination ({
displayedPages:4,
pages:<%total_pages>,
cssStyle: 'light-theme',
hrefTextPrefix: 'page-',
hrefTextSuffix: '.html',
<!--category_area-->
hrefTextPrefix: 'blog-category-<%cno>-',
hrefTextSuffix: '.html',
<!--/category_area-->
<!--tag_area-->
hrefTextPrefix: '?tag=<%tag_word>&page=',
hrefTextSuffix: '',
<!--/tag_area-->
<!--date_area-->
hrefTextPrefix: 'blog-date-<%now_year><%now_month>-',
hrefTextSuffix: '.html',
<!--/date_area-->
<!--search_area-->
hrefTextPrefix: '?q=<%search_word>&page=',
hrefTextSuffix: '',
<!--/search_area-->
currentPage:<%current_page_num>
});
});
</script>
ページナビゲーションを表示したい場所に記述しよう
FC2ブログのページナビゲーション（ページ送り）を設置したいところに下記を記述します。
<!--not_permanent_area--> <div id="pagenation"></div> <!--/not_permanent_area-->
今回の設置場所は、basic_whiteのテンプレートを使用しているので、<!–permanent_area–>～<!–/not_permanent_area–>の間を書き換えます。
書き換え前
<!--permanent_area--> <div class="page_navi"> <!--preventry--><a href="<%preventry_url>" title="<%preventry_title>" class="prev preventry"><%preventry_title></a><!--/preventry--> <a href="<%url>" title="<%template_home>" class="home"><%template_home></a> <!--nextentry--><a href="<%nextentry_url>" title="<%nextentry_title>" class="next nextentry"><%nextentry_title></a><!--/nextentry--> </div><!--/page_navi--> <!--/permanent_area-->
書き換え後
<!--not_permanent_area--> <div id="pagenation"></div> <!--/not_permanent_area-->
ソース内を検索するときは<!–not_permanent_area–>や<div class=”page_navi”>と検索すると設置場所が見つけやすいです。
検索方法はキーボードのCtrl+Fキーなどを使って検索してみましょう。
全て記述が終わったら「更新」をして、ページナビゲーションが表示されていたら成功です。
お疲れ様でした。
