てがろぐ - Fumy Otegaru Memo Logger -

現在[[LOOPCOUNT]]で各記事のタイトルを「No.数字」としているのですが、現在の仕様だと上（新しいもの）から1～の数字になるのですが、これを逆にすることはできますか？（古いものからNo.1～にしたい、一番新しい記事を表示されている数の一番上の数字にしたい）

もともと[[COMMENT:TITLE]]で各記事にNO.数字というふうにしていたのですが、これだと一覧外にした記事の分の数字が抜けてしまう（No.123の隣にあるのがNo.125とか）になっているのが気になってしまい、[[LOOPCOUT]]に切り替えたのですが、今度は新しいものがNo.1になるのが気になってしまって…。

需要の低い要望かつ、なんなら自分で一行目に「No.数字」を書けばいいのですが……。
もしほかに対処法などがありましたらお教えしていただけると助かります。

⭐️投稿フォームに、ワンクリックで【複数カテゴリ】を選択できるフォーマット的な機能が欲しい

親カテゴリ:ギャラリー
子カテゴリ:シリーズタイトル
孫カテゴリ:ナンバリング

……というように、複数カテゴリを選択して投稿する記事があります。手動でもそこまで手間はありませんが、必要なものを選択し忘れる事があるので、事前に設定(上記の場合は親〜孫の3つをグループ化して)登録→投稿フォームでそれを呼び出せるものがあると嬉しいです🙇

4905です
Re:4915　Re:4918さん
ご丁寧にコードありがとうございます。
スライドの範囲を記事毎にしたかったのですがなぜかスライドショーではなくそのまま画像URLに飛びました…
NSFWを除外するコードは簡単に実装出来ました。
本当にありがとうございます！

Re:4920　にししさんもありがとうございます。
補足読んだのですがうまくコード解らなくてこちらでは使えませんでした……！
他の方にとって助かる情報に違いないのですが申し訳ないです。。。

今年もどうぞよろしくお願いします。

年末に書いた開発近況とか諸々はこちら。
今年もよろしくお願い致します。

ちょいと放置気味ですみません。年末から今月にかけて仕事が忙しいので。_(:3」∠)_

🍔Re:4905◆残念ながら記事をまたがない専用機能(記法)は今のところありません。ただ、隣接画像を連続して閲覧させなくするにはこのへんの方法はあります。NSFWだけを除外するにはNo.4915さんがご提示下さったようなJavaScriptを活用する手がありますのでお試し下さい。
🍔Re:4911◆おぉ、製作中ですか。期待しています！(╹◡╹)ﾉ
🍔Re:4914,4917◆今のところ専用機能はないのですが、解決したようで良かったです。^^
🍔Re:4915◆JavaScriptの提示をどうもありがとうございます！
🍔Re:4916◆詳しい情報と解説付きのサポートをどうもありがとうございます！

🍔Re:4918◆参考情報をどうもありがとうございます。そのJavaScriptソースは、各投稿が article要素 で囲まれていることが前提になっていますね。外部で配布されているスキンが前提でしょうかね。もしよろしければそのスキンの情報も教えて頂けると、今後に読む方の参考になって（汎用的に役に立つ情報になって）ありがたいです。何にしても、詳しいお役立ち情報をありがとうございます！(╹◡╹)ﾉ
なお、このソースを任意のスキンでお試しになる方々のための参考情報として補足しておきますと、各投稿が <div class="onelogbox" id="…">～</div> という要素で囲まれている場合（標準スキンなどがそうです／※id属性値に投稿番号が出力されるスキンである必要があります。例えばスキンソースに id="pos[[LOOPCOUNT]]" と書かれているなど）は、No.4918さんのソースに含まれる imagelink.closest("article").id の部分を imagelink.closest("div.onelogbox").id に書き換えると良いと思います。

🍔Re:4919◆ご要望をどうもありがとうございます！ 今後の参考にします。(╹◡╹)

いつもお世話になっております。
「続きを読む/畳む」ボタンの位置が変わらないよう一括で設定変更できるようになると嬉しいです。

【続きを読む】
(本文)
↓「続きを読む」押下後
【畳む】
(本文)
となるイメージです。

過去ログは拝見済みです。

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を使用して表示させているテンプレートは見かけましたが、使用しているスキンテンプレートへの導入が難しい為、
現在実装されている機能で表示方法があればご教示頂ければ嬉しいです。

あけおめ

横で申し訳ないのですが、たぶんこの方ではないでしょうか？
>>4842

あと、文頭のテキストを画像にしてimageフォルダ入れるPHPなら今作ってますが、テスト中です😅

未完！！

次回作にご期待ください

おれたちのクリスマスはこれからだ！

メリー！　クリスマス！

light boxを初期のまま使っているのですが、スライドショーのとき次々画像を切り替えるとてがろぐの記事を飛び越え、nsfwフラグのあるものも表示されてしまいます。
私が一番したいことはlightboxのグループを記事だけで完了したいです（スライドショーのときに他の記事をまたがない）
せめてnsfwフラグがあるものをグループから外したいです。
何か良い方法がございましたら教えていただけませんでしょうか？

🍵今年が残りあと5日しかないとか……。はやい。_(┐｢ε:)_

🍵以前、いつ頃だったか完全に忘れたんですが、てがろぐの投稿本文の先頭数文字を画像化することでOGP用の画像を生成できるようなプログラムをPHPでお書きになって配布していたかソースを公開していたか何かしていた方がいらっしゃいませんでしたっけ？
なんかそんなのがあったような気がしていたのですけども、詳細は完全に忘却してしまったので、覚えている方（またはご本人）がいらっしゃったら、まだ公開しているか教えて欲しいのですけども。

『記事本文の文字を使ってOGP画像を生成する機能が欲しい』という要望を受けとりましたので、そういえば何かあったよな……と紹介しようと思ったんですけども、詳細を何も覚えていなかったものですから。(^_^;)

年末年始が駆け寄ってくる…！

メリークリスマス！

メリクリ🎉

メリークリスマス！✨🎉🎁🍰

入れなおしたら動きました！
にししさん、すいません(*- -)(*_ _)ペコリ
#解決済み

🎄Re:4896◆とりあえず、ログイン中かどうかを返す機能は用意するようにします。プラグイン的な機能は（開発の）手間が掛かりすぎるので考えていませんが、「この状態(情報)が取得できると便利」というような細々した機能は、API的に提供するかもしれません。
🎄Re:4897◆Apacheのような本格サーバをローカルで使えるのは、文字化け程度は自力でどうにかできるスキルがある人間だけです。┌(:3」└)┐

この通りにやったんだけど
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/
（自分のサイトではないので問題があれば削除してください）