2025年1月 この範囲を時系列順で読む この範囲をファイルに出力する
4915です。
投稿2回に分かれてしまい申し訳ございません。
NSFW画像のみスライドの範囲を記事毎にしたい場合は、以下で出来ると思います。
(やり方)
利用しているスキンのskin-cover.htmlの[[JS:LIGHTBOX]]の直前に以下を追加する
<script>
document.addEventListener("DOMContentLoaded", function () {
const nsfws = document.querySelectorAll("a.nsfw");
for (let nsfw of nsfws) {
let page_id = nsfw.closest("article").id
nsfw.setAttribute("data-lightbox", "nsfw" + page_id);
}
});
</script>
NSFW画像かどうかに関わらず、スライドの範囲を記事毎にしたい場合は、追加するスクリプトを以下にすれば大丈夫です。
<script>
document.addEventListener("DOMContentLoaded", function () {
const imagelinks = document.querySelectorAll("a.imagelink");
for (let imagelink of imagelinks) {
let value = imagelink.getAttribute("data-lightbox");
if(value != null && value != "") {
let page_id = imagelink.closest("article").id
imagelink.setAttribute("data-lightbox", page_id);
}
}
});
</script>
参考スキン:X_modoki (管理者追記 2025/1/7)
4914です。
ご回答有難うございます。
JavaScriptの使用がサーバ等の理由で駄目というわけではなく、私の知識が乏しくて導入が難しいのでCGI本体側の設定で出来れば~と思っての質問でした。
ソースの記述までして頂いて有難うございます。
早速スキンに打ち込んでみましたらナビゲーションリンクのNo.が文字列に置き換わりました!
自サイトスキンのonelog.htmlのタイトルに設定されてるdiv classがonelogtitleとなっていた為、そこだけ変更しました。
(標準タイプは2行目が反映されるのにブログタイプのソースは何故反映すらされないのか半日頭を捻っていました…classの違いに気付けば単純な事でした…)
おかげ様で理想的な表示になりました。
有難うございますm(__)m
前後移動リンクなど外側スキンに投稿本文の内容を抜き出して表示させるには、現在はJavascriptを使わないと不可能です。お見かけしたというテンプレートサイトさんのスキンがJavascriptで実現しておられるのも同様の理由です。
使用しているスキンテンプレートへの導入が難しい為
の部分が、JavaScriptを使って実現すること自体がダメということでしたら以下の文章はスルーして下さい。
私は>>3855の者なのですが、3855を投稿した当時に変数を流用して<TITLE>~</TITLE>内だけじゃなくて前後移動リンクにも記事の1行目を反映するバージョンを副産物として作っていたのを思い出したので引っ張り出して来ました。
3855同様、外側スキンhtmlの最後の方にある遅延読み込みスクリプト群に下記の折りたたみ部分のソースを貼り付けるか、<script>~</script>の中身だけをjsファイルとして保存して遅延読み込みスクリプト群の所から<script src="保存したファイル名.js"></script>として呼び出せば使えるので、今ご利用中のスキンでもJavaScriptで実現することは可能なはずです。てがろぐ公式スキンのブログタイプスキンと、昔のツイッター風スキンで動作確認したものを置いておきます。
※JavaScriptを使っている都合上、記事単独ページを表示した時に一瞬だけ前後移動リンク部分に本来の「No.○○」が表示されてしまうのは仕様です。
ブログタイプスキン向け
(本文1行目をタイトルとして入力している、[[COMMENT:TITLE]]系の記法を使っているという環境向け)
<script>
window.addEventListener('load', function() {
let nowurl = location.href; //現在のURL
let singleurl = nowurl.indexOf('postid='); //記事単独表示かをURL内からpostid=の有無で判別
//postid=がURLに含まれる場合のみ実行
if( singleurl != -1){
let Basetitle = document.title; //元のページタイトルを変数に入れておく
let ArticleTitleget = document.querySelector('.logtitle'); //logtitleクラスのhtml要素を取得
let ArticleTitle = ArticleTitleget.innerText; //logtitleクラスのテキストだけ取得
document.title = Basetitle + ' - ' + ArticleTitle; //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
//<TITLE>タグに追加ここまで
//前後ページ移動リンクが存在するか確認(どちらか片方が無い場合もあるので)
let prevurl = document.querySelector('.prevlink') ? document.querySelector('.prevlink').href : null;
let nexturl = document.querySelector('.nextlink') ? document.querySelector('.nextlink').href : null;
if (prevurl !== null) {
fetch(prevurl).then(response => response.text()).then(data => {
let titlePREV = new DOMParser().parseFromString(data, 'text/html').querySelector('.logtitle').textContent;
document.querySelector('.prevlink').textContent = titlePREV;
});
}
if (nexturl !== null) {
fetch(nexturl).then(response => response.text()).then(data => {
let titleNEXT = new DOMParser().parseFromString(data, 'text/html').querySelector('.logtitle').textContent;
document.querySelector('.nextlink').textContent = titleNEXT;
});
}
}
});
</script>
※<TITLE>~</TITLE>に現在表示しているページの本文一行目を入れたくない場合は
document.title = Basetitle + ' - ' + ArticleTitle; //ページタイトルを元のタイトル、半角スペースとハイフン、記事タイトルを連結させたものにする
の行をコメントアウトして下さい。畳む
標準スキンや昔のツイッター風スキンなど、ブログタイプ以外のスキン向け
([[COMMENT:TITLE]]系の記法を使っていない場合。JavaScriptで投稿本文の冒頭部分から抜き出す文字数を指定する)
<script>
window.addEventListener('load', function() {
let nowurl = location.href; //現在のURL
let singleurl = nowurl.indexOf('postid='); //記事単独表示かをURL内からpostid=の有無で判別
//postid=がURLに含まれる場合のみ実行
if( singleurl != -1){
let Basetitle = document.title; //元のページタイトルを変数に入れておく
let ArticleTitleget = document.querySelector('.comment'); //commentクラスのhtml要素を取得
let ArticleTitle1 = ArticleTitleget.innerText; //commentクラスのテキストだけ取得
let textcount = 16; //ここで切り出す文字数を指定
let ArticleTitle = ArticleTitle1.substring(0, textcount); //0の部分を変えると切り出し開始位置を変更可能
document.title = Basetitle + ' - ' + ArticleTitle + '…'; //元のタイトルと連結させて最後に「…」を入れる
//<TITLE>タグに追加ここまで
//前後ページ移動リンクが存在するか確認(どちらか片方が無い場合もあるので)
let prevurl = document.querySelector('.prevlink') ? document.querySelector('.prevlink').href : null;
let nexturl = document.querySelector('.nextlink') ? document.querySelector('.nextlink').href : null;
if (prevurl !== null) {
fetch(prevurl).then(response => response.text()).then(data => {
let titlePREV1 = new DOMParser().parseFromString(data, 'text/html').querySelector('.comment').textContent; //commentクラスから取得
let titlePREV = titlePREV1.substring(0, textcount); //指定した文字数でカット
document.querySelector('.prevlink').textContent = titlePREV + '…'; //カットした前記事の文字の末尾に「…」を入れる
});
}
if (nexturl !== null) {
fetch(nexturl).then(response => response.text()).then(data => {
let titleNEXT1 = new DOMParser().parseFromString(data, 'text/html').querySelector('.comment').textContent; //commentクラスから取得
let titleNEXT = titleNEXT1.substring(0, textcount); //指定した文字数でカット
document.querySelector('.nextlink').textContent = titleNEXT + '…'; //カットした後記事の文字の末尾に「…」を入れる
});
}
}
});
</script>
※<TITLE>~</TITLE>に現在表示しているページの本文一行目を入れたくない場合は
document.title = Basetitle + ' - ' + ArticleTitle + '…'; //元のタイトルと連結させて最後に「…」を入れる
の行をコメントアウトして下さい。畳む
1時頃に一度投稿したのですが、最新の1件もしくは最古の1件を単独表示した時にうまく動かない欠陥を見つけたので削除・修正の上で再投稿しました。申し訳ございません。
横からすみません、
とりあえずNSFW画像(class="nsfw"リンク内の画像)をlightboxのスライドショーからから外す方法ですが、
以下で出来るのではと思います。
(記事内のNSFW画像をクリックして表示されるlightboxのスライドショーはNSFW画像のみのスライドショーに、通常画像をクリックして表示されるlightboxのスライドショーはNSFW画像以外のみのスライドショーになります)
NSFW用画像とその他画像のlightbox表示を分ける
aタグの「data-lightbox="tegalog"」でグループを指定しているので、NSFW画像の場合はdata-lightboxの値にデフォルト値(tegalog)以外を指定する
(やり方)
利用しているスキンのskin-cover.htmlの[[JS:LIGHTBOX]]の直前に以下を追加する
<script>
document.addEventListener("DOMContentLoaded", function () {
const nsfws = document.getElementsByClassName("nsfw");
for (let nsfw of nsfws) {
nsfw.setAttribute("data-lightbox", "nsfw");
}
});
</script>
先頃てがろぐCGIを知り、自サイトの小説展示用として導入させて頂きました。
そこで質問させて下さい。
単独投稿ページの前後移動リンクについて、現在No.〇〇と記事Noが表示されますが、そこに前後ページのタイトル(本文一行目)を表示させる事は可能でしょうか。
[[FREE:TITLE:MAIN]] [[FREE:DESCRIPTION]]でどうにか表示出来ないか試してみたのですが、表示対象が違うようで出来ませんでした。
テンプレートサイトさんで(恐らく)JavaScriptを使用して表示させているテンプレートは見かけましたが、使用しているスキンテンプレートへの導入が難しい為、
現在実装されている機能で表示方法があればご教示頂ければ嬉しいです。
2024年12月 この範囲を時系列順で読む この範囲をファイルに出力する
light boxを初期のまま使っているのですが、スライドショーのとき次々画像を切り替えるとてがろぐの記事を飛び越え、nsfwフラグのあるものも表示されてしまいます。
私が一番したいことはlightboxのグループを記事だけで完了したいです(スライドショーのときに他の記事をまたがない)
せめてnsfwフラグがあるものをグループから外したいです。
何か良い方法がございましたら教えていただけませんでしょうか?
🍵今年が残りあと5日しかないとか……。はやい。_(┐「ε:)_
🍵以前、いつ頃だったか完全に忘れたんですが、てがろぐの投稿本文の先頭数文字を画像化することでOGP用の画像を生成できるようなプログラムをPHPでお書きになって配布していたかソースを公開していたか何かしていた方がいらっしゃいませんでしたっけ?
なんかそんなのがあったような気がしていたのですけども、詳細は完全に忘却してしまったので、覚えている方(またはご本人)がいらっしゃったら、まだ公開しているか教えて欲しいのですけども。
『記事本文の文字を使ってOGP画像を生成する機能が欲しい』という要望を受けとりましたので、そういえば何かあったよな……と紹介しようと思ったんですけども、詳細を何も覚えていなかったものですから。(^_^;)
入れなおしたら動きました!
にししさん、すいません(*- -)(*_ _)ペコリ
#解決済み
この通りにやったんだけど
https://techtech.witchserver.net/?postid=3
#apache#動かない
たしかに、ログイン中かどうかのAPIっぽいものがあると助かります。class="Login-Required"でもなんとかできるかなと思いましたが、ソースからも見えない状態であれば他でも拡張機能的なものが作りやすいかなと。
いいね機能要望で思ったのですが、てがろぐ用の拡張機能を作る方もおり、需要が高そうなのでアドオンをてがろぐ上で管理できるような、いわゆるプラグイン的実装があるといいなと思いました。サポートやセキュリティ面などを考えると大変だとは思いますが…。
返信が遅くなってすみません。なぜか仕事が凄まじく忙しいので……。_(:3」z)_
🍩Re:4886◆あります。そのような表示でスキンを実現している方々もたくさんいらっしゃいますから、いろいろソースを眺めてみると参考になるのではないかと思います。とりあえず、デフォルトの設定なら、投稿画像の最も外側はfigure要素で囲まれていまして、このfigure要素が(横並びにならない)要因ですから、figure要素に対して何か横方向に並ぶようなCSSを適用すれば良いです。例えば、figure { display: inline-block; } とか。なお、画像周りの出力HTMLに関しては、ヘルプドキュメントの「画像表示のカスタマイズ方法」をご覧下さい。
🍩Re:4887◆ご要望は把握しました。ありがとうございます。「最初の投稿日時」でアクセスできるようにするためには、現状の「投稿日時」とは別に「最初の投稿日時」を保持する機能を加える必要がありまして、そのためにはデータ仕様の拡張から必要になりますから直近でできることはないのですけども、「初回投稿日時と更新日時とを両方表示したい」というご要望をちらほら頂いていますから、それを実装することがあれば、それと同時に実装できそうな気はします。気長にお待ち頂ければ幸いです。
🍩Re:4888◆てがろぐ側に「いまログイン中かどうか」を返すAPI的なものがあると、もしかして便利になりますかね?
🍩Re:4889◆Perl、PHP、SSIも使えるとは太っ腹ですね。
🍩Re:4890◆サポートありがとうございます。(╹◡╹)
🍩Re:4891◆Amazonギフト券ありがとうございます! クリスマスまではあと1週間以上くらいあるような気分で居たんですが、もうあと4日しかないんですね……。┌(:3」└)┐
ご要望をありがとうございます。いいね機能に関しては、まさしくdoさんの「いいねボタン・改」が使えるならいいか、と思っていた面もあったのですけども、なるほど一筋縄にはいかない問題があるケースもあるんですね。そこまで需要があるなら、てがろぐ本体側で直接いいね機能を実装するか、もしくは、てがろぐと組み合わせて使う専用のいいねアドオン的な何かを用意するか、何かそんな方向で考えてみます。情報ありがとうございます。(╹◡╹)ノ
🍩Re:4892◆リリースノートをチェックして下さってありがとうございます。リリースノートは本当に「読む人が居るんかいな……?」と思いながら毎回書いていますので。(笑)
てがろぐ4.5.0リリースノートからの抜粋です。
標準添付の各スキンのうち、ギャラリーモード等の特殊なモードで使われるスキンを除いた各スキンには、自由装飾記法の使用例として以前から3種類ほど書いていました。そこに4つ目の使用例として deco-flex を加えました。
Flexboxを使って、その内側のBoxを横並びに表示する装飾です。 [ F : flex : ~~~ ] と書くと使えます。
キャプション付き画像とか、Spotifyの埋め込みとか、デフォルトでは横並びにならないオブジェクトを横並びで表示させたい場合に使えるかもしれません。
既にスキンの紹介をされてる方もいらっしゃるのでお節介かと思いましたが、ちょっと手を入れるだけで良ければこちらの記述も使えるんじゃないかと思います。
いつも開発、サポートお疲れ様です! 私も別名義にて運営している個人サイトで、てがろぐさんには大変お世話になっています。
ささやかですが、先ほどAmazonギフト券をお送りしたのでご活用ください。
今日はご要望をお伝えに来ました。
といっても、私自身の要望ではなく、do宛てに寄せられる要望なのですが……
てがろぐの投稿それぞれに「いいねボタン」をつけることはできるでしょうか?
最近、「あらかじめいいねボタンが埋め込まれた、てがろぐスキンが欲しい」という要望が寄せられるようになりました。
当サイトで配布している「いいねボタン・改」をてがろぐスキンに埋め込むことはできるのですが、
Perl製プログラム(スキン)とPHP製プログラムを抱き合わせたものを配布するのも、なかなか難儀しそうに思います。
てがろぐはうまく設置できたのに、いいねボタンが動かない……とか、スキンが上手く編集できない……みたいなトラブルも起こり得そうです。
また、当サイトのいいねボタン・改には独自の管理画面があるのですが、てがろぐのいいね数はてがろぐで管理・閲覧できた方が良いのでは? とも感じます。
当サイトではいろいろなプログラムを配布していますが、特に人気があるのは「いいねボタン」系の、訪問者からのリアクションを得ることができるものです。
訪問者とのコミュニケーションが取れる機能は、意外と需要があるのかなと思うことがあります。
てがろぐさんにおいても、検討いただけましたら幸いです。
日々たくさんの要望や質問が寄せられてご多忙かと思いますが、よろしくお願いします。
スキン配布サイトを探されたらよいかと思います。
個人的にpipiさんの06:てがろぐだけで簡易サイトを作れるスキンが出来るんじゃないかと思います。
06:てがろぐだけで簡易サイトを作れるスキンのデモの日記カテゴリに説明があるのでご覧ください
https://pipi.noor.jp/t/
(自分のサイトではないので問題があれば削除してください)
スターサーバーの新無料プランで無事動作したようです。今後登録制限がかからなければ無料で始めるには現状一番手軽かも。(広告もないですし)
「てがろぐでD&Dまたはコピペで画像投稿するやつ」の投稿ボタン押下でアップロードするバージョンを作りました。仕組み上一部機能を使えなくしたので、別バージョンです。
ただ、あまりテストしていないので例によって不具合があるかもしれません。
また、リアクションボタンのデモが触れるサイトも作ったのでぜひお試しください。http://tekitote.s324.xrea.com/
4879です
日時も編集出来ましたね、全然使わない機能だったので失念してました……。
投稿番号と日時のふたパターンあるので、最初の投稿時点の日時でいいと思います。投稿日時と再編集後の日時の違いが気になる人は今までのpostid使えばいいと思うので……(これは再編集機能使わない立場だから言えることですが)
割と本当に欲してるので、実装していただけたら(いつでもいいので)有難いです😭🙏
🧇Re:4879,4882◆てがろぐの投稿は、本文を再編集できるだけでなく、投稿日時も自由に再編集できるんですよね……。あとから投稿日時を変更された場合、日時ベースのURLはどうなるべきでしょうね? 「変わらないURL」である必要があるなら『最初の投稿時点の日時』を維持すべきでしょうが、そうすると「URLで示されている日時」と「表示される投稿日時」が異なることになりますから、パラメータとしての役割がおかしくなる気もします。あと、投稿日時を再編集した結果として「同じ投稿日時の投稿が複数個ある」という状況になる可能性があるので、その場合にどう表示すべきか、という問題もあります。(^_^;)
……そう考えると、投稿IDの付け方を「連番」か「乱数」かで選べる仕組みにする方がまだ良いのかもしれませんね。(ただ、乱数にすると、「既に使われているIDでないかどうか」を1つ1つ比較して確認しないといけないので、投稿総数が多くなるとIDの生成に時間が掛かりそうな気もしますが。連番の場合は「一番大きい数」に1を足すだけで済みますので。もっともその点では、日時なら何も計算しなくて良いので一番速いですけどもね。:笑)
🧇Re:4880-4881◆お役立ちツールをありがとうございます。(╹◡╹)ノ
🧇Re:4883◆おおっと、確かに不具合ですね。ご指摘ありがとうございます! ページネーションを生成する処理で、CGIによくありがちな二重エスケープをやってしまっているようです。どうにかします。
🧇Re:4884◆その通りです。日付境界バーは、先頭だけでなく「日付が切り替わる投稿と投稿の間」にも出力する必要がありますから『一連の投稿の内部』に必要に応じて挿入されます。なので『日付境界バーを出力する専用の記法』というものはありません。ですから、(あらゆるスキンで日付境界バーを見せたくないなら設定でOFFにする手がありますが)スキンによって日付境界バーを見せたり見せなかったりしたい場合は、見せたくない方のスキンではCSSを使って非表示にして頂くしか方法はありません。
※ヘルプドキュメントの存在について既にご認識頂いているようですが、これを読んでいる第三者の方々にも参考のために記しておきます。
➡日付境界バーの装飾方法や、実際に出力されるHTMLについては、ヘルプドキュメントの「日付境界バーの装飾方法」をご覧下さい。なお、「先頭固定」の最初に出力される日付境界バーは若干仕様が異なります。そちらについては、「先頭固定専用の日付境界バーをCSSで装飾する方法」をご覧下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170