FC2ブログにページナビゲーション(ページ送り)をつけてみよう

FC2ブログにページナビゲーションをTOP

今回は、FC2ブログの前のページ・次のページ表示をjqueryプラグインを使って、カッコよくしてみよう!

スポンサーリンク

FC2ブログにページナビゲーションを実装する方法

プラグインをダウンロードしよう

simplePagination.jsにいき、queryプラグインの必要なファイルをダウンロードします。

サイトを開き、Downloadの項目のhere.をダウンロードします。

※わかりやすい場所(デスクトップ)などに保存しましょう。

here.をダウンロード

zipファイルを展開しよう

先ほど、ダウンロードして保存したzipファイルを展開します。

使うファイルは、

「jquery.simplePagination.js」

「simplePagination.css」

simplePagination.jsのファイルの中身

jsファイルの一部を変更しよう

今回は、FC2ブログにページナビゲーション(ページ送り)設置するので、「jquerysimplePagination.js」のファイルの中をTeraPadなどで開いて一部変更します。

変更前

$link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
Code language: HTML, XML (xml)

変更箇所は、360行目の

の(pageIndex + 1)+ 1を削除します。

変更後

$link = $('<a href="' + o.hrefTextPrefix + (pageIndex) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
Code language: HTML, XML (xml)

変更したら、「上書き保存」します。

次に、FC2ブログではファイル名にドットやピリオドが使えないので、「jquery.simplePagination.js」のドットの部分を削除します。

変更後

「jquerysimplePagination.js」

これで、FC2ブログにページナビゲーションを設置するためのファイルの準備ができました。

simplePagination.jsファイルをFC2ブログにアップロードしよう

「jquerysimplePagination.js」

「simplePagination.css」

2つのファイルを、FC2ブログ管理画面からアップロードします。

管理画面からアップロード

URLを控えておこう

アップロードしたら、ファイルのURLをコピーしてメモ帳などにいったん控えておきましょう。

ファイルのURLをコピー

URLを記述しよう

先ほど控えておいたURLを、下記の「控えたURL」の部分に置き換えてください。

<script type="text/javascript" src="控えたjquerysimplePagination.jsのURL"></script> <link type="text/css" rel="stylesheet" href="控えたsimplePagination.cssのURL">
Code language: HTML, XML (xml)
スポンサーリンク

テンプレートのHTML編集しよう

今回のページナビゲーションはjqueryプラグインなので、jquery本体を設置してない方は、<head>~</head>内に下記を記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Code language: HTML, XML (xml)

<head>~</head>内に記述しよう

続いて、先ほどアップロードした2つのファイルも<head>~</head>内に下記を記述します。

<script type="text/javascript" src="控えたjquerysimplePagination.jsのURL"></script> <link type="text/css" rel="stylesheet" href="控えたsimplePagination.cssのURL">
Code language: HTML, XML (xml)

下記のスクリプトも<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>
Code language: JavaScript (javascript)

ページナビゲーションを表示したい場所に記述しよう

FC2ブログのページナビゲーション(ページ送り)を設置したいところに下記を記述します。

<!--not_permanent_area--> <div id="pagenation"></div> <!--/not_permanent_area-->
Code language: HTML, XML (xml)

今回の設置場所は、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-->
Code language: HTML, XML (xml)

書き換え後

<!--not_permanent_area--> <div id="pagenation"></div> <!--/not_permanent_area-->
Code language: HTML, XML (xml)
テンプレートによって書き換えの場所は違うので注意しましょう。

ソース内を検索するときは<!–not_permanent_area–>や<div class=”page_navi”>と検索すると設置場所が見つけやすいです。

検索方法はキーボードのCtrl+Fキーなどを使って検索してみましょう。

全て記述が終わったら「更新」をして、ページナビゲーションが表示されていたら成功です。

合わせて読みたい
よろしければシェアお願いします
同じカテゴリーのコンテンツ一覧