No.173, No.172, No.171, No.170, No.169, No.168, No.167[7件]
ページネーションスクリプトβ版配布
(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
畳む
(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 No.172
そういえば検索バー必要だよなと思って付けました。トップには出せないので全投稿から検索するには検索オプションのチェックを外す手間があるけど、まあないよりいいでしょう多分。
常に全投稿から検索する設定にしてもいいかもしれない。いつかしれっと変えてるかもしれません。
常に全投稿から検索する設定にしてもいいかもしれない。いつかしれっと変えてるかもしれません。
つぶやき 2025.5.31 No.171
>05/30 22:20の方へ
色々試されていたんですね。何が原因だったのかわかりませんが、結果うまくいったようでよかったです。tenran03を選んでいただいてありがとうございました。
畳む
色々試されていたんですね。何が原因だったのかわかりませんが、結果うまくいったようでよかったです。tenran03を選んでいただいてありがとうございました。
畳む
返信 2025.5.31 No.170
>05/30 8:35の方へ
まず前提として、
①そもそもてがろぐ自体にはmp4を記事に表示する機能はない
②私が他サイト様のスクリプト等を勝手に解説することはできない
③どのサイト様のスクリプトを使用したのか、また、どういう状況でうまく動かないのか情報が少なすぎる
他サイト様のスキンやスクリプトと当サイトのものを併用した場合、基本的には自己責任です。もちろん、相手サイト様に聞きに行くのもあまりよろしくありません。
なのでここからは私の勝手なお節介と推測になりますが、
・アップロードを許可する拡張子にmp4を追加できているか
公式ページ:アップロード可能な画像形式(拡張子)の設定
・JavaScriptのコードを<script>~</script>で囲んで、「skin-cover.html」の下の方の</body>の直前に書き込んでいるか
・[PICT:(動画のファイル名).mp4]というコードをちゃんと投稿できているか(画像管理画面でmp4のサムネイルが出ないのは仕様です。気にせずコードをコピペしよう)
以上のことを確認してみてください。
少なくとも私の環境でtenran03を使って検証してみた限りでは、
・アップロードを許可する拡張子を追加
・スクリプトをskin-cover.htmlに追記
だけで動作したので、これでうまくいかない場合は手順に問題があるか、他にカスタマイズした部分があればそこと干渉しているかの可能性が高いです。
私がお返事できるのはここまでです。てがろぐの機能を調べる、スクリプトの紹介記事をよく読むなど、ご自分でできそうなことは色々やってみてください。
畳む
まず前提として、
①そもそもてがろぐ自体にはmp4を記事に表示する機能はない
②私が他サイト様のスクリプト等を勝手に解説することはできない
③どのサイト様のスクリプトを使用したのか、また、どういう状況でうまく動かないのか情報が少なすぎる
他サイト様のスキンやスクリプトと当サイトのものを併用した場合、基本的には自己責任です。もちろん、相手サイト様に聞きに行くのもあまりよろしくありません。
なのでここからは私の勝手なお節介と推測になりますが、
・アップロードを許可する拡張子にmp4を追加できているか
公式ページ:アップロード可能な画像形式(拡張子)の設定
・JavaScriptのコードを<script>~</script>で囲んで、「skin-cover.html」の下の方の</body>の直前に書き込んでいるか
・[PICT:(動画のファイル名).mp4]というコードをちゃんと投稿できているか(画像管理画面でmp4のサムネイルが出ないのは仕様です。気にせずコードをコピペしよう)
以上のことを確認してみてください。
少なくとも私の環境でtenran03を使って検証してみた限りでは、
・アップロードを許可する拡張子を追加
・スクリプトをskin-cover.htmlに追記
だけで動作したので、これでうまくいかない場合は手順に問題があるか、他にカスタマイズした部分があればそこと干渉しているかの可能性が高いです。
私がお返事できるのはここまでです。てがろぐの機能を調べる、スクリプトの紹介記事をよく読むなど、ご自分でできそうなことは色々やってみてください。
畳む
返信 2025.5.30 No.169
- 開発(11)
- 自由装飾(5)
- スクリプトwakebun(1)
- スキンyousen(1)
- スキンtenran(3)
- スキンsirason(3)
- スキンmeikan(1)
- スキンkozin(6)
- スキンippen(9)
- スキンhokan(3)
- スキンaien(1)
- カスタマイズ(11)
- お知らせ(4)
- htmlテンプレート(1)
- JavaScript(6)
詳しく教えてくださりありがとうございます。温かいお言葉も嬉しいです。どうやらルビ変換スクリプトと競合しているようです。私が他の方のスクリプトを勝手に解説することはできない、という前提にはなりますが、以下お節介として…
こちらのスクリプトは特定書式で書かれた部分をルビタグに変換するものですね。このとき、1投稿(onelogboxクラス)に対してhtmlの総入れ替えを行うので、ページボタンに設定されたクリック動作を上書きして消してしまうようです。
…ということで、申し訳ありませんが私にはどうすることもできない問題でした…「$('.onelogbox')」部分のクラス指定をもう少しピンポイントに(例えば「$('.deco-onepage)」)とかするとページボタンが上書きされないのですが、そうするとonepageで囲ってない部分にルビがなくなっちゃうんですね…
クラス指定さえなんとかなれば併用できそうなので、よろしければそちらの環境でやりやすい方向で調整していただければと思います。お手数ですがよろしくお願いします。
畳む