ページネーションスクリプト「wakebun」配布




　そのころわたくしは、モリーオ市の博物局に勤めて居りました。
　十八等官でしたから役所のなかでも、ずうっと下の方でしたし俸給もほんのわずかでしたが、受持ちが標本の採集や整理で生れ付き好きなことでしたから、わたくしは毎日ずいぶん愉快にはたらきました。殊にそのころ、モリーオ市では競馬場を植物園に拵え直すというので、その景色のいいまわりにアカシヤを植え込んだ広い地面が、切符売場や信号所の建物のついたまま、わたくしどもの役所の方へまわって来たものですから、わたくしはすぐ宿直という名前で月賦で買った小さな蓄音器と二十枚ばかりのレコードをもって、その番小屋にひとり住むことになりました。わたくしはそこの馬を置く場所に板で小さなしきいをつけて一疋の山羊を飼いました。毎朝その乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。
　あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
　またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。(青空文庫 宮沢賢治/ポラーノの広場 より)

ダウンロード (2025/07/04更新)

※2025/07/04…「pagination」のつづりを「pagenation」にミスってたのを修正したので、更新した方は投稿文のクラス名の方も書き換えておいてください…すいません…


説明

• 長文などをページ分けしてボタンで表示切り替えできるページネーションスクリプトです。
• 「てがろぐ」でもHTML製サイトでも使えます。
• ページを切り替えると先頭に戻ります。
• CSSや設定部分をいじることである程度デザインを変更できます。
• 配布はゆるゆる適当ですが一応利用規約的なものをさらっと読んでおいてください。

使い方
※てがろぐでの使い方
①「wakebun.js」と「wakebun-style.css」の入った「wakebun」フォルダをtegalog.cgiのあるディレクトリと同じ場所に置く
②skin-cover.htmlのheadに
<link type="text/css" rel="stylesheet" href="[[PATH:CGIDIR]]wakebun/wakebun-style.css">
と書いてwakebun-style.cssを読み込む
③同じくskin-cover.htmlの</body>直前に
<script src="wakebun/wakebun.js"></script>
と書いてwakebun.jsを読み込む
④投稿文を特定クラスの自由装飾で囲む
こんな感じ↓

[F:pagination:
[F:onepage:1ページ目のテキスト]
[F:onepage:2ページ目のテキスト]
[F:onepage:3ページ目のテキスト]
]

てがろぐ投稿時のページ間の改行は無視するように処理していますが、表示がずれたり変な余白が入る場合は、自由装飾タグの間の改行とかを調整してみてください。
フォルダは指定場所以外に置いてもいいですが、cssとjsを読み込むパスはそれに合わせて書き換えてください。

※htmlサイトでの使い方
↑の③までと同じように、フォルダを置いてcssとjsを読み込む(スクリプトを置いた場所に合わせて読み込むパスを書き換えてください)
④文章を特定クラスの要素で囲む
こんな感じ↓(てがろぐに合わせてあるのでクラス名に「deco-」がつきますが、設定で変更できます)

<div class="deco-pagination">
   <div class="deco-onepage">1ページ目のテキスト</div>
   <div class="deco-onepage">2ページ目のテキスト</div>
   <div class="deco-onepage">3ページ目のテキスト</div>
</div>

※色カスタマイズ方法
「wakebun-style.css」ファイル6行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください。

※ページ先頭に戻るときの上部の余白
「wakebun-style.css」ファイル14行目あたり「スクロール用アンカーの上の余白」。特にヘッダー固定メニューがある場合など、上部が隠れてしまうことがあるのでいい感じに調整してください。

※上部のページ案内の「Page」とか「/」の変更
「wakebun-style.css」29行目あたりからの記述。この辺はCSSで挿入してるのでお好きに変更できます。

※特定クラス名の変更や上部のページ案内・次前ボタンの表示
「wakebun.js」ファイル4行目あたりからの「設定(変数定義)」。


#スクリプトwakebun #JavaScript
　
更新履歴
2025/07/04　「pagination」のつづりを「pagenation」にミスってたのを修正
2025/06/28　配布開始