小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

ページネーション(ページ番号でのリンク)の表示方法

最終更新日: 2016-09-01

ページネーションの概要

ページネーションの表示

ページネーション (ページング、ページ分割、ページ移動リンク) は、分割した長いページを「1」「2」「3」...のページ番号で相互リンクするものです。

このページでは JavaScript を利用してページネーションを表示する方法をご紹介します。

ページネーション表示対応製品

「大容量版」と表示のある製品でページネーションの表示が可能です。

ページネーションの表示設定方法

※ 製品によっては初期設定で既にテンプレートに含まれている場合もあります。全一覧の上下のどちらかにありますので、編集を始める前に確認して下さい。

準備:「すぐ使えるCGI」の設置

ダウンロードと設置

製品をダウンロードしてサーバに設置して下さい。

設置方法は、ダウンロード後のページに表示される「ステップ by ステップガイド」をご覧下さい。

テスト登録

設置がうまくいったら10件以上テスト登録して下さい。「全一覧」が分割されて、初期設定の「前」「次」のリンクが表示されるようになります。

templates/article/article_list.html の編集

全一覧 (目次) 用のテンプレート templates/article/article_list.html  を編集します。
編集のポイントは以下の2点です。

  1. ページネーション用の CSS スタイル設定
  2. ページネーション表示用の JavaScript 追加

templates/article/article_list.html に追加するコード

templates/article/article_list.html に以下の赤字部分を追加して下さい (2箇所)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>記事一覧</title>
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
<style type="text/css">
/* ページネーションリンクをリストで構成。
  リストのマークを消す設定、左の空間を消す設定。 */
.pagination ul {
     list-style-type: none;
     padding-left: 0;
}
/* 各ページリンクを横並べにし、間隔を開ける */
.pagination li {
    float: left;
    margin-right: 6px;
}
/* 「前へ」のリンクが「すぐ使えるCGI」の機能で削除された時に、幅を保つ */
.keepwidth {
    width: 24px;
    height: 24px;
}
/* 各ページへのリンクタグに幅と囲みを設定する。こうする事により、「前へ」「次へ」が
 「すぐ使えるCGI」の機能で削除された時に、枠も消える。 (li に付けると残ってしまう。)  */
.pagination a {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px gray solid;
    text-decoration: none;
}
/* ページへのリンクにマウスオーバーした時に色を変える。
  フォントの変更等を足したいときはここに足して下さい。 */
.pagination a:hover {
    background-color: #efefef;
}
/* 現在いるページ番号の表示設定 */
.pagination .active {
    font-weight: bold;
}
/* 枠内でスペースを取るためのラッパー。
  フォントの指定などもここに設定。 */
.pagination a span {
    font-size: 18px;
    display: block;
    width: 1.3em;
    height: 1em;
    margin: 3px 6px;
}
</style>
</head>
<body bgcolor="#ffffff">

<h1>記事一覧</h1>

<div class="pagination">
<ul>
<li class="keepwidth"><a href="%_page_prev_%"><span>&#xab;</span></a></li>
<script type="text/javascript">
/* ページごとの件数:環境変数 $conf{index_list_no} で設定した値を設定して下さい。 */
var index_list_no = 10;

/* 書き出すコード;CSSの設定と組み合わせて変更して下さい。 */

/* 他のページへのリンク */
/* リンク先のページ名は1ページ目ファイル名を指定、ページ番号の部分は NU と記載して下さい。 */
var pagelink = '<li><a href="index.html"><span>NU</span></a></li>';

/* 現在のページの表示 */
var pagelink_active = '<li class="active"><a href="javascript:void(0);"><span>NU</span></a></li>';

var total = %_total_%;
var thispage = %_min_%;
for (i=0; i<total/index_list_no; i++){
    var first = i*index_list_no+1;
    if (first == thispage){
        document.write(pagelink_active.replace(/NU/g, i+1));
    } else {
        var link = pagelink.replace(/NU/g, i+1);
        if (i!=0){
            document.write(link.replace(/\.html/g, '_'+i+'.html'));
        } else {
            document.write(link);
        }
    }
}
</script>
<li><a href="%_page_next_%"><span>&#xbb;</span></a></li>
</ul>
</div>
<div style="clear: both"></div>

<!-- article list : generate from article_list.txt -->
%_article_list_%

<!-- 従来の前後移動リンク -->
<p>
%_total_%件中 %_min_%-%_max_% を表示&nbsp;&nbsp;&nbsp;&nbsp;
<a href="%_page_first_%">[先頭]</a>
<a href="%_page_prev_%">[前]</a>
<a href="%_page_next_%">[次]</a>
<a href="%_page_last_%">[最後]</a>
</p>

</body>
</html>

アップロード

変更した以下のファイルをサーバに上書きアップロードして下さい。

templates/article/article_list.html

再構築

管理画面の一覧から「再構築 (テンプレート変更反映) 」ボタンを押して下さい。

確認

全一覧を表示すると、ページ番号のリンクが表示されているはずです。
これで、基本的な設定は完了です。

デザインの変更や件数の変更をしたい場合は、引き続き以下の設定を行って下さい。

ページネーションの件数の変更

ページネーションの件数を変更する場合は、以下の2点をそれぞれ下記例のように変更して下さい。

  1. admin/admin.cgi 中の環境変数 $conf{index_list_no}
  2. templates/article/article_list.html の JavaScript 内の設定

admin/admin.cgi 中のページネーションの件数設定

admin/admin.cgi を開いて下記例の青字部分を1ページに表示したい件数に設定して下さい。

#--------------------------------------------------------[line 170]--
# 一覧に表示する件数
#--------------------------------------------------------------------
# 全一覧および管理画面の記事一覧に表示する記事件数を設定して下さい。
# これより多い登録があるとページ分割されます。
# 0を指定すると1ページに全件を表示します。

$conf{index_list_no} = 10;

templates/article/article_list.html  中のページネーションの件数設定

同じ希望件数を、先ほど templates/article/article_list.html 追加した JavaScript 中の下記の部分にも設定して下さい (青字部分)。

/* ページごとの件数:環境変数 $conf{index_list_no} で設定した値を設定して下さい。 */
var index_list_no = 10;

変更の反映

変更した下記のファイルをサーバに上書きアップロードの上、「再構築」を行って下さい。

admin/admin.cgi
templates/article/article_list.html

ページネーションのデザイン変更

ページネーションの表示デザイン (フォントサイズ、色 等々) を変更するには、templates/article/article_list.html 内に追加した CSS スタイルシートの設定を変更して下さい。

変更の反映

設定を変更したらサーバに上書きアップロードの上、「再構築」を行って下さい。

ページネーションのタグ変更

ページネーション部分の HTML タグ自体を変更したい場合は、先ほど templates/article/article_list.html 追加した JavaScript 中の下記の青字の部分を変更して下さい。

/* 書き出すコード;CSSの設定と組み合わせて変更して下さい。 */

/* 他のページへのリンク */
/* リンク先のページ名は1ページ目ファイル名を指定、
  ページ番号の部分は NU と記載して下さい。 */
var pagelink = '<li><a href="index.html"><span>NU</span></a></li>';

/* 現在のページの表示 */
var pagelink_active = '<li class="active"><a href="javascript:void(0);"><span>NU</span></a></li>';

参考情報:ページネーションタグとの対応

上記の設定だと、以下のように HTMLタグに反映されます (2ページ目を表示した場合)。

<li><a href="index.html"><span>1</span></a></li>
<li class="active"><a href="javascript:void(0);"><span>2</span></a></li>
<li><a href="index_2.html"><span>3</span></a></li>


変更の反映

設定を変更したらサーバに上書きアップロードの上、「再構築」を行って下さい。

関連リンク

さらに詳しく