2025年1月 この範囲を時系列順で読む この範囲をファイルに出力する
4930さん
遅くなって申し訳ありません。
スキンの確認本当にありがとうございます。
また、丁寧な説明もとても助かります。
「画像一覧」以外でしておりましたので、先程教えていただいた通りにしましたところうまくいきました!
本当にありがとうございました。
id="[[POSTID]]"が必要だったのですね…!
スキンの情報ありがとうございます!
お使いのスキンを確認したところ、「画像一覧」の実現に、てがろぐの画像一覧モード(mode=picts)が使用されています。
画像一覧モードは、投稿に関係ない表示モード となるため、
「画像一覧」で、投稿単位にLightBoxのスライドの範囲を指定することはできません。
「画像一覧」以外の場合は、
skin-cover.htmlに、
4918の二つ目のコードを追加いただき、
skin-onelog.htmlの、
<articleで始まるタグの最後に、
id="[[POSTID]]"を追加いただければ、ご希望の動作になると思います。
4923でカテゴリに関する要望を出したものです。
ご教授ありがとうございます🙇♀️
教えて頂いた方法を実践してカスタマイズに成功しました。JavaScriptで出来ることも多いのですね……勉強不足でお恥ずかしい限りです。今回を機に、JavaScriptにも積極的に触れて勉強しようと思います。本当にありがとうございました!
月餅ならありますけども。🥮🥮🥮
☕Re:4921◆便利そうなスクリプトをありがとうございます!
☕Re:4923◆ご要望をありがとうございます。ご要望としては記録しておきますが、そのように設定できる機能を作るのは大変なので、ご自身でJavaScriptを書いてスキンに追加なさるのがたぶん一番早いのではないかと思います。スキンだけでなく管理画面の投稿欄でもedit.jsやedit.htmを使う方法で、任意のJavaScriptを加えられます。
てがろぐ投稿欄のカテゴリチェックボックスはinput要素で作られていますが、value="info"のようにカテゴリIDが値に含まれています。これを利用することで、『Ⓐにチェックが入ったらⒷにもチェックを入れる』というような処理はJavaScriptで実現可能です。
例えば、infoにチェックを入れたらmemoにも入れるという場合は、
document.addEventListener('DOMContentLoaded', function () {
// カテゴリID「info」のチェックボックスを取得
const infoCheckbox = document.querySelector('input[type="checkbox"][value="info"]');
// カテゴリID「memo」のチェックボックスを取得
const memoCheckbox = document.querySelector('input[type="checkbox"][value="memo"]');
// infoチェックボックスの状態が変わったら……
infoCheckbox.addEventListener('change', function () {
// memoチェックボックスの状態を infoチェックボックスに合わせる
memoCheckbox.checked = infoCheckbox.checked;
});
});
動作確認はしていないんですけども、だいたいこんな感じでいけるのではないかと思います。カテゴリID名はハードコーディングになりますから汎用的ではありませんが、自分だけで使うなら使えるのではないかと思います。(^_^;)
☕Re:4924◆[[LOOPCOUNT]]は「そのページ内で上から何番目に表示されているのか」を出すだけなので、2ページ目に行けばまたNo.1から始まりますが、その点は大丈夫ですかね……?
また、そもそも投稿単独ページでは、常に「No.1」になってしまうと思いますが。
もし「一欄外にした投稿にNo.を割り振りたくない」というご要望だとすると、そこはさすがに、現状のシステムから乖離しすぎるので実現は困難だと思います。まさしくご自身で書かれている通り、直接本文に「No.123」のようにお好きな番号を書くのが現実的ではないかと思います。いっそのこと、記事No.を表示するのをやめてしまえば良い気もしますけどもね。(^_^;)
もしくは、てがろぐを2個セットアップして、これまで一覧外にしていた投稿をすべて2つ目のてがろぐに移す方法もありそうです。それだと、1つ目のてがろぐ(全部見せる投稿だけのてがろぐ)では番号は連番になるでしょうから。
☕Re:4926◆なるほど、お知らせありがとうございます。スキン名とリンクを No.4918 の本文末尾に加えておきました。
>>4926さん
お、お言葉に甘えまして…!
pipiさんのてがろぐだけで簡易サイトを作れるスキンを利用しております…!
https://pipi.noor.jp/t/06/tegalog.cgi
お手すきの際で全然問題ありませんので!
現在[[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を使用して表示させているテンプレートは見かけましたが、使用しているスキンテンプレートへの導入が難しい為、
現在実装されている機能で表示方法があればご教示頂ければ嬉しいです。
2024年12月 この範囲を時系列順で読む この範囲をファイルに出力する
light boxを初期のまま使っているのですが、スライドショーのとき次々画像を切り替えるとてがろぐの記事を飛び越え、nsfwフラグのあるものも表示されてしまいます。
私が一番したいことはlightboxのグループを記事だけで完了したいです(スライドショーのときに他の記事をまたがない)
せめてnsfwフラグがあるものをグループから外したいです。
何か良い方法がございましたら教えていただけませんでしょうか?
🍵今年が残りあと5日しかないとか……。はやい。_(┐「ε:)_
🍵以前、いつ頃だったか完全に忘れたんですが、てがろぐの投稿本文の先頭数文字を画像化することでOGP用の画像を生成できるようなプログラムをPHPでお書きになって配布していたかソースを公開していたか何かしていた方がいらっしゃいませんでしたっけ?
なんかそんなのがあったような気がしていたのですけども、詳細は完全に忘却してしまったので、覚えている方(またはご本人)がいらっしゃったら、まだ公開しているか教えて欲しいのですけども。
『記事本文の文字を使ってOGP画像を生成する機能が欲しい』という要望を受けとりましたので、そういえば何かあったよな……と紹介しようと思ったんですけども、詳細を何も覚えていなかったものですから。(^_^;)