てがろぐ - Fumy Otegaru Memo Logger -

あけましておめでとうございます
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◆ご要望をどうもありがとうございます！ 今後の参考にします。(╹◡╹)

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

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

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

4905さん

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)

＞＞4916さん
4914です。
ご回答有難うございます。
JavaScriptの使用がサーバ等の理由で駄目というわけではなく、私の知識が乏しくて導入が難しいのでCGI本体側の設定で出来れば～と思っての質問でした。

ソースの記述までして頂いて有難うございます。
早速スキンに打ち込んでみましたらナビゲーションリンクのNo.が文字列に置き換わりました！
自サイトスキンのonelog.htmlのタイトルに設定されてるdiv classがonelogtitleとなっていた為、そこだけ変更しました。
（標準タイプは2行目が反映されるのにブログタイプのソースは何故反映すらされないのか半日頭を捻っていました…classの違いに気付けば単純な事でした…）
おかげ様で理想的な表示になりました。
有難うございますm(__)m

>>4914
前後移動リンクなど外側スキンに投稿本文の内容を抜き出して表示させるには、現在は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件を単独表示した時にうまく動かない欠陥を見つけたので削除・修正の上で再投稿しました。申し訳ございません。

4905さん
横からすみません、
とりあえず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>