MS Access Tips/Sample and VBA and Blog customize etc...

記事リストにページナビゲーションを追加

以前の記事 ページトップに記事リスト表示 で記事リストを表示させましたが、その下に、下図のようなページナビゲーションを設置する方法を紹介します。

PageNavigation.png

難易度:

どんぱんさんがFC2共有プラグインとして公開されている「ページナビ」を使わせていただきました。

ページ移動スクリプト - 空があんなに高い で公開されてますコードに一部追加したものを利用してます。(追加したのは、11行目と69行目の2行のみです。)

このスクリプトを<head> ~ </head>内に記述します。

ページトップに記事リスト表示 のコードの最後の <!--/not_permanent_area--> の直前(59行目)に下記のコードを挿入します。

align="center" style="letter-spacing:2px;" はセンタリングとも文字間隔の調整のためですので、必要なければ削除するか、ご自分の好みで変更してください。pagenavi(5) の引数の 5 は現在ページの前後何ページを表示するかを指定するもので、これを好みで変更してください。

拍手する

7 Comments

ティエラ says..."改めまして失礼致します"

HTMLの冒頭が
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
だったので、この下に上記に記載されている長い方を入れました。

<!--/edit_area-->は↓

<!--/edit_area-->
<!--
///
/// コメント部分ここまで
///
-->

ここでやっとみつかりました。(ここだけです)


しかし
<!--/not_permanent_area--> がどうしても見つかりません。
表記の仕方が違うのでしょうか?
それともやっぱり見落としなんでしょうか?(何十回と見てるんですが)

なので、最後の4行のスプリクトを挿入する事ができません><

どうしたら良いでしょうか?

2009.09.15 22:51 | URL | #- [edit]
hatena says..."ティエラさん、こんばんは。"

テンプレートによって、<!--/not_permanent_area--> がない場合もありえますので、それは気にせずにテンプレートの表示したい場所に挿入してみてください。

URLのソースを見させていただきましたが、ティアラさんがお使いのテンプレートには、
<!--
///
/// 前ページ・次ページ移動用ナビゲーションリンク部分ここから
///
-->
というコメント部分があると思いますので、この直後に挿入すればどうでしょうか。

2009.09.16 00:12 | URL | #5uE6dEgY [edit]
ティエラ says..."なりました!"

迅速なレス ありがとうございます┏○

お陰様で実現する事が出来ました! 感激です!

やはり、皆さん書き方がそれぞれなので、
同じ様な意味合いを指示していても、同じ言葉とは限らないんですね。
勉強になりました!

本当に本当にありがとうございました!!

2009.09.16 03:59 | URL | #- [edit]
855 says...""

こんにちは
こちらのやり方でナビゲーションが追加されました。
このナビゲーションをCSSで装飾したい場合
どの部分をいじればよいのでしょうか?

2013.04.29 15:41 | URL | #Lpqu8.Ho [edit]
hatena says..."CSS装飾"

テンプレートのHTMLのPageNaviを挿入する部分を下記のように Class を指定したDivで囲みます。

<div class="pagenavi">
<script type="text/javascript"><!--
pagenavi(5); //--></script>
</div>

※<>(全角) は <>(半角) に置換してください。スクリプトエラー対策

テンプレートのCSSで pagenavi要素に装飾を指定すればいいでしょう。

div.pagenavi {
font-size: 14px;
text-align:center;
color: #fff;
}

div.pagenavi a {

background: #0000ff;

}

div.pagenavi a:hover {

background: #00ff00;

}

2013.04.29 17:55 | URL | #5uE6dEgY [edit]
855 says...""

返答ありがとうございます。
無事装飾できました。

もう一つ質問があるのですが
例えば紹介されたhtmlを使用すると
pagenavi(5)となっていて5ページまではナビのボタンが表示され
残りのページのボタンの部分は..となっています。
この..のナビのボタンの数を現状より少なくしたいのですが
編集で数を減らすことはできますか?

2013.05.11 22:24 | URL | #Lpqu8.Ho [edit]
hatena says..."re:ボタンの数"

てきるとは思いますが、どんぱんさんがプラグインとして公開されている「ページナビ」に機能を追加しただけのものですので、私自身、ロジックを読み切れてないので、どうしたらいいかわかりません。

http://dongpan.blog95.fc2.com/blog-entry-255.html
で質問したら対応してくれるかもしれません。

2013.05.12 18:30 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/115-e0f3dd32
記事の表示件数 [2]
以前、便利ナビに[ 当月の記事一覧 ]を付け、月内の記事を参照し易くしましたが、 前月より以前の記事を参照するには、右サイドバーの「バ...
ページナビで表示させるページ番号数を変更する
改訂以前、拙作テンプレの通常ブログ画面、検索、月別アーカイブページのページナビゲーションはE - テンプレートのエリハラ様のオープンソースをお借りしておりましたが、今回、どんぱん様の共有プラグイン「...
該当の記事は見つかりませんでした。