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)
ご回答有難うございます。
JavaScriptの使用がサーバ等の理由で駄目というわけではなく、私の知識が乏しくて導入が難しいのでCGI本体側の設定で出来れば~と思っての質問でした。
ソースの記述までして頂いて有難うございます。
早速スキンに打ち込んでみましたらナビゲーションリンクのNo.が文字列に置き換わりました!
自サイトスキンのonelog.htmlのタイトルに設定されてるdiv classがonelogtitleとなっていた為、そこだけ変更しました。
(標準タイプは2行目が反映されるのにブログタイプのソースは何故反映すらされないのか半日頭を捻っていました…classの違いに気付けば単純な事でした…)
おかげ様で理想的な表示になりました。
有難うございますm(__)m
使用しているスキンテンプレートへの導入が難しい為
の部分が、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>
そこで質問させて下さい。
単独投稿ページの前後移動リンクについて、現在No.〇〇と記事Noが表示されますが、そこに前後ページのタイトル(本文一行目)を表示させる事は可能でしょうか。
[[FREE:TITLE:MAIN]] [[FREE:DESCRIPTION]]でどうにか表示出来ないか試してみたのですが、表示対象が違うようで出来ませんでした。
テンプレートサイトさんで(恐らく)JavaScriptを使用して表示させているテンプレートは見かけましたが、使用しているスキンテンプレートへの導入が難しい為、
現在実装されている機能で表示方法があればご教示頂ければ嬉しいです。
2024年12月 この範囲を時系列順で読む この範囲をファイルに出力する
私が一番したいことはlightboxのグループを記事だけで完了したいです(スライドショーのときに他の記事をまたがない)
せめてnsfwフラグがあるものをグループから外したいです。
何か良い方法がございましたら教えていただけませんでしょうか?
🍵以前、いつ頃だったか完全に忘れたんですが、てがろぐの投稿本文の先頭数文字を画像化することでOGP用の画像を生成できるようなプログラムをPHPでお書きになって配布していたかソースを公開していたか何かしていた方がいらっしゃいませんでしたっけ?
なんかそんなのがあったような気がしていたのですけども、詳細は完全に忘却してしまったので、覚えている方(またはご本人)がいらっしゃったら、まだ公開しているか教えて欲しいのですけども。
『記事本文の文字を使ってOGP画像を生成する機能が欲しい』という要望を受けとりましたので、そういえば何かあったよな……と紹介しようと思ったんですけども、詳細を何も覚えていなかったものですから。(^_^;)
いいね機能要望で思ったのですが、てがろぐ用の拡張機能を作る方もおり、需要が高そうなのでアドオンをてがろぐ上で管理できるような、いわゆるプラグイン的実装があるといいなと思いました。サポートやセキュリティ面などを考えると大変だとは思いますが…。
🍩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/
(自分のサイトではないので問題があれば削除してください)
ただ、あまりテストしていないので例によって不具合があるかもしれません。
また、リアクションボタンのデモが触れるサイトも作ったのでぜひお試しください。http://tekitote.s324.xrea.com/
日時も編集出来ましたね、全然使わない機能だったので失念してました……。
投稿番号と日時のふたパターンあるので、最初の投稿時点の日時でいいと思います。投稿日時と再編集後の日時の違いが気になる人は今までのpostid使えばいいと思うので……(これは再編集機能使わない立場だから言えることですが)
割と本当に欲してるので、実装していただけたら(いつでもいいので)有難いです😭🙏
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 171 172