カテゴリ「カテゴリなし」の投稿[4061件](14ページ目)
前後移動リンクなど外側スキンに投稿本文の内容を抜き出して表示させるには、現在は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を使用して表示させているテンプレートは見かけましたが、使用しているスキンテンプレートへの導入が難しい為、
現在実装されている機能で表示方法があればご教示頂ければ嬉しいです。
light boxを初期のまま使っているのですが、スライドショーのとき次々画像を切り替えるとてがろぐの記事を飛び越え、nsfwフラグのあるものも表示されてしまいます。
私が一番したいことはlightboxのグループを記事だけで完了したいです(スライドショーのときに他の記事をまたがない)
せめてnsfwフラグがあるものをグループから外したいです。
何か良い方法がございましたら教えていただけませんでしょうか?
🍵今年が残りあと5日しかないとか……。はやい。_(┐「ε:)_
🍵以前、いつ頃だったか完全に忘れたんですが、てがろぐの投稿本文の先頭数文字を画像化することでOGP用の画像を生成できるようなプログラムをPHPでお書きになって配布していたかソースを公開していたか何かしていた方がいらっしゃいませんでしたっけ?
なんかそんなのがあったような気がしていたのですけども、詳細は完全に忘却してしまったので、覚えている方(またはご本人)がいらっしゃったら、まだ公開しているか教えて欲しいのですけども。
『記事本文の文字を使ってOGP画像を生成する機能が欲しい』という要望を受けとりましたので、そういえば何かあったよな……と紹介しようと思ったんですけども、詳細を何も覚えていなかったものですから。(^_^;)
入れなおしたら動きました!
にししさん、すいません(*- -)(*_ _)ペコリ
#解決済み
この通りにやったんだけど
https://techtech.witchserver.net/?postid=3
#apache#動かない
たしかに、ログイン中かどうかのAPIっぽいものがあると助かります。class="Login-Required"でもなんとかできるかなと思いましたが、ソースからも見えない状態であれば他でも拡張機能的なものが作りやすいかなと。
いいね機能要望で思ったのですが、てがろぐ用の拡張機能を作る方もおり、需要が高そうなのでアドオンをてがろぐ上で管理できるような、いわゆるプラグイン的実装があるといいなと思いました。サポートやセキュリティ面などを考えると大変だとは思いますが…。
てがろぐ4.5.0リリースノートからの抜粋です。
標準添付の各スキンのうち、ギャラリーモード等の特殊なモードで使われるスキンを除いた各スキンには、自由装飾記法の使用例として以前から3種類ほど書いていました。そこに4つ目の使用例として deco-flex を加えました。
Flexboxを使って、その内側のBoxを横並びに表示する装飾です。 [ F : flex : ~~~ ] と書くと使えます。
キャプション付き画像とか、Spotifyの埋め込みとか、デフォルトでは横並びにならないオブジェクトを横並びで表示させたい場合に使えるかもしれません。
既にスキンの紹介をされてる方もいらっしゃるのでお節介かと思いましたが、ちょっと手を入れるだけで良ければこちらの記述も使えるんじゃないかと思います。
いつも開発、サポートお疲れ様です! 私も別名義にて運営している個人サイトで、てがろぐさんには大変お世話になっています。
ささやかですが、先ほどAmazonギフト券をお送りしたのでご活用ください。
今日はご要望をお伝えに来ました。
といっても、私自身の要望ではなく、do宛てに寄せられる要望なのですが……
てがろぐの投稿それぞれに「いいねボタン」をつけることはできるでしょうか?
最近、「あらかじめいいねボタンが埋め込まれた、てがろぐスキンが欲しい」という要望が寄せられるようになりました。
当サイトで配布している「いいねボタン・改」をてがろぐスキンに埋め込むことはできるのですが、
Perl製プログラム(スキン)とPHP製プログラムを抱き合わせたものを配布するのも、なかなか難儀しそうに思います。
てがろぐはうまく設置できたのに、いいねボタンが動かない……とか、スキンが上手く編集できない……みたいなトラブルも起こり得そうです。
また、当サイトのいいねボタン・改には独自の管理画面があるのですが、てがろぐのいいね数はてがろぐで管理・閲覧できた方が良いのでは? とも感じます。
当サイトではいろいろなプログラムを配布していますが、特に人気があるのは「いいねボタン」系の、訪問者からのリアクションを得ることができるものです。
訪問者とのコミュニケーションが取れる機能は、意外と需要があるのかなと思うことがあります。
てがろぐさんにおいても、検討いただけましたら幸いです。
日々たくさんの要望や質問が寄せられてご多忙かと思いますが、よろしくお願いします。
スキン配布サイトを探されたらよいかと思います。
個人的にpipiさんの06:てがろぐだけで簡易サイトを作れるスキンが出来るんじゃないかと思います。
06:てがろぐだけで簡易サイトを作れるスキンのデモの日記カテゴリに説明があるのでご覧ください
https://pipi.noor.jp/t/
(自分のサイトではないので問題があれば削除してください)
スターサーバーの新無料プランで無事動作したようです。今後登録制限がかからなければ無料で始めるには現状一番手軽かも。(広告もないですし)
「てがろぐでD&Dまたはコピペで画像投稿するやつ」の投稿ボタン押下でアップロードするバージョンを作りました。仕組み上一部機能を使えなくしたので、別バージョンです。
ただ、あまりテストしていないので例によって不具合があるかもしれません。
また、リアクションボタンのデモが触れるサイトも作ったのでぜひお試しください。http://tekitote.s324.xrea.com/
4879です
日時も編集出来ましたね、全然使わない機能だったので失念してました……。
投稿番号と日時のふたパターンあるので、最初の投稿時点の日時でいいと思います。投稿日時と再編集後の日時の違いが気になる人は今までのpostid使えばいいと思うので……(これは再編集機能使わない立場だから言えることですが)
割と本当に欲してるので、実装していただけたら(いつでもいいので)有難いです😭🙏
日付境界バーについてわからないことがあったので質問失礼します🙇
スキンAでは日付境界バーを非表示、スキンBでは日付境界バーを表示したいのですが……この場合はマニュアルの<日付境界バーの装飾>にある、pクラスdateseparatorを、スキンそれぞれのCSSで表示・非表示に指定すればいいのでしょうか?(日付境界バー用の[]タグがあるわけではない…?🤔)
他の方が作成されたスキンを使用中で、そのスキンでは非表示だったのでどうやってるんだろう…となったので質問させていただきました🙋♀️
多分不具合だと思うので#報告 させていただきます。
一部の記号(<、>、&、"、' 等)を含むテキストを検索すると、2ページ目以降は検索文字が実体参照に変換され、検索結果は0件になってしまいました。
↓画像はここで試しに「class="」を検索した結果です。



3枚目の画像が検索結果の2ページ目の画面です。
また、管理画面で検索した場合は何故か入力ボックスに「&」が記号の前に追加され、検索結果が0件になりました。
↓こちらは「="」で検索した結果です。


バージョンは最新の4.5.1を使用しています。
> 既存の投稿単独ページURLのエイリアス(別名)として、例えば ?posttime=20241211105450 のようなパラメータで特定の投稿が単独表示されるようにする、という機能ならできるとは思います。
私が欲しかったのはその機能なので、嬉しいです。
ご提案くださった形は要望通りです。記事番号を使いたいユーザーのために、AとBの両方の表示方法があることが望ましいです。
その場合、(1)管理画面でどちらを優先出力するか選ぶ項目がある (2)あるいはにししさんが特定のパラメータを設置したあとで、我々利用者はスキンを[[PERMAURL:ID]]や[[PERMAURL:TIME]]のように好きな方を書いてカスタマイズする…という形を考えました。
>その場合は、単に「投稿番号を連番に直さなければ良い」のではないでしょうか?(^_^;)
確かにそのとおりです。私が連番機能を触らなければいいだけの話と言われればぐうの音も出ません。
ですがこの要望を出しているのは「連番にしたいから」ではなく、
「単独記事のURLを固定化したい」の気持ちの方が大きいです。
単に個人の趣味で番号をそろえたいなら、意志と機能の力で押さえることはできますが、
どうしても過去の一部を消すことになった、あるいは多人数で使っている場合、不適切な投稿者(荒らし)の記録を消す必要に駆られた…など、
運営に関わる理由で連番機能を使わなければいけないことは、
どんなユーザーにとってもあり得ると考えます。
なので何が起ころうが、見返し手段として、あるいはSNSで単独記事を共有する手助けとしての
固定URLがあると嬉しい、それにはタイムスタンプ出力が適切かと考えました。
なので、たとえばidが20桁くらいの乱数出力になっても私の要望には叶いますが(^▽^;)
多くの人の利便性を考えると時刻表示が良いと思ったのです。
前回の書き込みは言葉が足らず、ただこちらの話をしただけになってしまい、申し訳ありません。
あくまで、いつかこのような機能が加わるといいなという希望として、受け取っていただければ幸いですm(_ _)m
<script type="text/javascript">
///動画
$(document).ready(function() {
$('a[href$=".mp4"], a[href$=".mov"], a[href$=".webm"], a[href$=".ogg"], a[href$=".m4v"], a[href$=".avi"]').each(function() {
const $link = $(this);
const href = $link.attr('href');
// 拡張子に応じて適切なMIMEタイプを設定
const getVideoType = (ext) => {
const types = {
'mov': 'video/quicktime',
'mp4': 'video/mp4',
'webm': 'video/webm',
'ogg': 'video/ogg',
'm4v': 'video/mp4',
'avi': 'video/x-msvideo'
};
return types[ext.toLowerCase()] || '';
};
const fileExt = href.split('.').pop().toLowerCase();
const mimeType = getVideoType(fileExt);
const playerElement = `
<div class="video-container">
<video controls width="100%">
<source src="${href}" type="${mimeType}">
お使いのブラウザは動画の再生に対応していません。
</video>
</div>
`;
$link.replaceWith(playerElement);
});
});
</script>
バグってたら申し訳ないです
仕様
- 管理画面>設定>システム設定>【許可する画像の種類】で拡張子を入れると管理画面とQUICKPOSTからアップできるようになります(管理画面の画像の管理の画像欄には表示されません)
- URLの末尾に動画の拡張子がある場合、自動的にプレイヤーに変更されます
- サイズ変更はスクリプト内の<div class="video-container">~からどうぞ
- 5秒のところがサムネイルとして初期設定されているので、変えたい場合はMath.min(5, video.duration)の数値を変更してください
元の方とは違う人間ですが自分も日付のURLあると嬉しいです。
AとBどちらもあって、どちらでも飛べるのでいいと思います。
自分も投稿消しがちで連番じゃないのが気になって番号の振り直しするのですが、日付の場合は特に気になりません。(日付みたいな長めの数字列で連番になってるほうが逆に違和感です……)感覚的なものなのでうまく言えないのでわかりにくいかもしれませんが……。