No.172

ページネーションスクリプトβ版配布

(06/28追記)
正式配布しました→>>179

JavaScriptの練習に、ページネーションスクリプト作ってみました。てがろぐでもhtml製サイトでも使えるはず。
β版を置いておくので、よければ使い心地とかバグとかご希望とかお気軽にお送りください。できたら修正します。


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

β版ダウンロード

β版更新履歴
6/22　ボタン背景色の設定追加


・てがろぐでの使い方
①「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ページ目のテキスト]
]

てがろぐ投稿時のページ間の改行は無視するように処理していますが、表示がずれたり変な余白が入る場合は、自由装飾タグの間の改行とかを調整してみてください。

・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.jsの上の方の「設定(変数定義)」部分で設定できます。配色やページ上部に戻るときの余白の調整はwakebun-style.cssの上の方で。

#JavaScript
畳む

つぶやき 2025.6.17

back

HOME