てがろぐ - Fumy Otegaru Memo Logger -

お手軽一言掲示板（この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。）

■フリースペース：編集

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン：標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキン《てがろぐCGIの配布ページに戻る》

No.4918, No.4917, No.4916, No.4915, No.4914, No.4912, No.4911［7件］

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)

(931文字) No.4918 at 2025/01/02(木) 17:54:16〔159日前〕 by

あどみ編

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

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

(358文字) No.4917 at 2025/01/02(木) 14:24:39〔159日前〕 by

あどみ編

>>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件を単独表示した時にうまく動かない欠陥を見つけたので削除・修正の上で再投稿しました。申し訳ございません。

(4545文字) No.4916 at 2025/01/02(木) 02:09:48〔160日前〕 by

あどみ編

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>

(627文字) No.4915 at 2025/01/01(水) 19:19:36〔160日前〕 by

あどみ編

明けましておめでとうございます。朝明と申します。
先頃てがろぐCGIを知り、自サイトの小説展示用として導入させて頂きました。
そこで質問させて下さい。

単独投稿ページの前後移動リンクについて、現在No.〇〇と記事Noが表示されますが、そこに前後ページのタイトル（本文一行目）を表示させる事は可能でしょうか。
[[FREE:TITLE:MAIN]] [[FREE:DESCRIPTION]]でどうにか表示出来ないか試してみたのですが、表示対象が違うようで出来ませんでした。
テンプレートサイトさんで（恐らく）JavaScriptを使用して表示させているテンプレートは見かけましたが、使用しているスキンテンプレートへの導入が難しい為、
現在実装されている機能で表示方法があればご教示頂ければ嬉しいです。

(350文字) No.4914 at 2025/01/01(水) 15:28:38〔160日前〕 by

あどみ編

あけおめ

(4文字) No.4912 at 2025/01/01(水) 09:42:27〔160日前〕 by

あどみ編

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

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

(93文字) No.4911 at 2024/12/30(月) 12:33:30〔162日前〕 by