てがろぐ - Fumy Otegaru Memo Logger -
2025年6月8日(日) 01:18:17〔10時間前〕 更新
■No.5167, No.5166, No.5165, No.5164, No.5163, No.5162, No.5161［7件］ （ 7 件 ）
■フリースペース： 編集
ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン：標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキン 《てがろぐCGIの配布ページに戻る》
動作サンプルです。◆他のスキン：標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキン 《てがろぐCGIの配布ページに戻る》
■日付検索：
■全文検索：
〔2005文字〕 編集
2025/05/08 (Thu)
06:14:53
No.5166
by
さくら
〔31日前〕
いつもてがろぐに大変お世話になってます。てがろぐ本体・tegupともに最新版にアップデートしました。何でも簡単入力ボタン機能がすごく便利です！
にししさんが>>5160内の5158さんへのレスで書かれている「半角英数1文字だけで検索するとJavaScriptソースが崩れてしまう」件、「続きを読む」ボタンのソースにも同様の影響が出ているようです。設定で「全文検索時でも隠す機能を有効にする」にチェックがついていても、半角英数1文字だけで検索すると「続きを読む」装飾で隠されている部分が全て表示された状態になります。半角英数2文字や全角1文字で検索すると設定通りに隠す機能が有効になるので、半角英数1文字だけの時に起こります。
もう1つ、この検索結果で続きを読むボタンのソースが変わることに関連して要望です。
私は画像拡大スクリプトにbaguetteBox.js を使用しており、commentクラスを対象に画像拡大スクリプトを実行するようにしています。この環境だと、検索キーワードに画像の拡張子が含まれる場合に、続きを読むボタンと画像拡大表示用スクリプトが衝突してしまいます。
【再現手順】※てがろぐデフォルトスキンで再現確認済み
①baguetteBox.jsの配布元 からダウンロードしたzipのdistフォルダにある、baguetteBox.min.jsとbaguetteBox.min.cssを、てがろぐと同じディレクトリにアップロード
②てがろぐデフォルトスキンをテキストエディタで開き
外側スキンの<head>内に
<link rel="stylesheet" href="baguetteBox.min.css">
外側スキンの遅延読み込みスクリプト群の
[[JS:LIGHTBOX:JQ]]
を消して
<script src="baguetteBox.min.js"></script>
<script type="text/javascript">
// comment クラスの中の画像リンクだけをbaguetteBox.jsの実行対象にする
window.addEventListener('load', function() {
baguetteBox.run('.comment');
});
</script>
と書いてアップロード
③適当な画像と、続きを読むボタンを含む投稿をする(画像は「続きを読む」で隠される部分でなくてもよい)
④新着画像リストに表示されている小さい画像をクリックするか、全文検索窓から「.png」「.jpg」など、記事内に存在する画像の拡張子をドットつきで検索をする
※「png」「.pn」「.j」のように画像の拡張子として不完全な文字列ではダメ
⑤検索結果画面にある記事の「続きを読む」ボタンをクリックした瞬間にbaguetteBox.jsが作動するが、画像ファイルのリンクではないので存在しない画像を読み込もうとし続ける畳む
普通に記事を表示した時は続きを読むボタンをクリックしてもbaguetteBox.jsは作動しないのですが、画像の拡張子が含まれる検索結果画面で続きを読むボタンをクリックした時にだけこの現象が起こります。
続きを読むボタンの<a>タグのリンク先は現在のURLの末尾に「#readmore」が付与されたものになりますが、
検索結果画面だと
https://example.com/tegalog/tegalog.cgi?q=.png#readmore
となるため、続きを読むボタンのリンク先URLに含まれる拡張子部分にbaguetteBox.jsが反応してしまうようです。
一応baguetteBox.js側の機能として、ignoreClassで指定したクラスを拡大表示処理の対象から除外することはできます。
【例】
baguetteBox.run('.comment',{
ignoreClass:'readmorebutton'
}
);
ただ、このignoreClassは1つしか指定できないので、続きを読むボタン(readmorebutton)を除外指定してしまうと、別の除外したいクラスが指定できなくなってしまうのです…。AIにbaguetteBox.jsのソースを読ませてignoreClassを複数指定する方法などを質問して色々試してみたりもしたのですが、やはり1つしか指定できない仕様のようです。
ちょうどignoreClassで指定したいクラスが出来て動作確認をしていた際、新着画像をクリックして見ていた時に気付きました。続きを読むボタンの<a>タグに検索キーワードを含めないようにして頂くことはできませんでしょうか。
にししさんが>>5160内の5158さんへのレスで書かれている「半角英数1文字だけで検索するとJavaScriptソースが崩れてしまう」件、「続きを読む」ボタンのソースにも同様の影響が出ているようです。設定で「全文検索時でも隠す機能を有効にする」にチェックがついていても、半角英数1文字だけで検索すると「続きを読む」装飾で隠されている部分が全て表示された状態になります。半角英数2文字や全角1文字で検索すると設定通りに隠す機能が有効になるので、半角英数1文字だけの時に起こります。
もう1つ、この検索結果で続きを読むボタンのソースが変わることに関連して要望です。
私は画像拡大スクリプトにbaguetteBox.js を使用しており、commentクラスを対象に画像拡大スクリプトを実行するようにしています。この環境だと、検索キーワードに画像の拡張子が含まれる場合に、続きを読むボタンと画像拡大表示用スクリプトが衝突してしまいます。
【再現手順】※てがろぐデフォルトスキンで再現確認済み
①baguetteBox.jsの配布元 からダウンロードしたzipのdistフォルダにある、baguetteBox.min.jsとbaguetteBox.min.cssを、てがろぐと同じディレクトリにアップロード
②てがろぐデフォルトスキンをテキストエディタで開き
外側スキンの<head>内に
<link rel="stylesheet" href="baguetteBox.min.css">
外側スキンの遅延読み込みスクリプト群の
[[JS:LIGHTBOX:JQ]]
を消して
<script src="baguetteBox.min.js"></script>
<script type="text/javascript">
// comment クラスの中の画像リンクだけをbaguetteBox.jsの実行対象にする
window.addEventListener('load', function() {
baguetteBox.run('.comment');
});
</script>
と書いてアップロード
③適当な画像と、続きを読むボタンを含む投稿をする(画像は「続きを読む」で隠される部分でなくてもよい)
④新着画像リストに表示されている小さい画像をクリックするか、全文検索窓から「.png」「.jpg」など、記事内に存在する画像の拡張子をドットつきで検索をする
※「png」「.pn」「.j」のように画像の拡張子として不完全な文字列ではダメ
⑤検索結果画面にある記事の「続きを読む」ボタンをクリックした瞬間にbaguetteBox.jsが作動するが、画像ファイルのリンクではないので存在しない画像を読み込もうとし続ける畳む
普通に記事を表示した時は続きを読むボタンをクリックしてもbaguetteBox.jsは作動しないのですが、画像の拡張子が含まれる検索結果画面で続きを読むボタンをクリックした時にだけこの現象が起こります。
続きを読むボタンの<a>タグのリンク先は現在のURLの末尾に「#readmore」が付与されたものになりますが、
検索結果画面だと
https://example.com/tegalog/tegalog.cgi?q=.png#readmore
となるため、続きを読むボタンのリンク先URLに含まれる拡張子部分にbaguetteBox.jsが反応してしまうようです。
一応baguetteBox.js側の機能として、ignoreClassで指定したクラスを拡大表示処理の対象から除外することはできます。
【例】
baguetteBox.run('.comment',{
ignoreClass:'readmorebutton'
}
);
ただ、このignoreClassは1つしか指定できないので、続きを読むボタン(readmorebutton)を除外指定してしまうと、別の除外したいクラスが指定できなくなってしまうのです…。AIにbaguetteBox.jsのソースを読ませてignoreClassを複数指定する方法などを質問して色々試してみたりもしたのですが、やはり1つしか指定できない仕様のようです。
ちょうどignoreClassで指定したいクラスが出来て動作確認をしていた際、新着画像をクリックして見ていた時に気付きました。続きを読むボタンの<a>タグに検索キーワードを含めないようにして頂くことはできませんでしょうか。
〔288文字〕 編集
〔159文字〕 編集
2025/05/06 (Tue)
05:21:16
No.5164
by
あどみ
〔33日前〕
アップデートお疲れ様です。
新しい機能のカード型リンク、ずっと欲しかった機能なのでとても嬉しいです。ありがとうございます🙇
ラベルを省略しても使えるのがすごくありがたいです。OGPカードボタンからURLを入力するだけで使えるので、すぐ使えてとても便利です。
いつも更新ありがとうございます。これからもお世話になります🙏
新しい機能のカード型リンク、ずっと欲しかった機能なのでとても嬉しいです。ありがとうございます🙇
ラベルを省略しても使えるのがすごくありがたいです。OGPカードボタンからURLを入力するだけで使えるので、すぐ使えてとても便利です。
いつも更新ありがとうございます。これからもお世話になります🙏
〔209文字〕 編集
〔603文字〕 編集
2025/05/05 (Mon)
17:30:48
No.5162
by
あどみ
〔33日前〕
5160
たしかに、自作スキンのCSSとかを確認している最中だったので適当な半角の英語1文字で検索してました……。ここでは「てがろぐ」で検索していたからなんともなかったんですね。スッキリしました！ありがとうございます。
あと5150の件ですが（書いたのは自分です）、フリースペース内には簡単な自己紹介？やお知らせ、細々とした部分（自分が書いてる内容をちょくちょく文言を変えたくなる気質？のため、ウェブ上からすぐ編集できるのが便利でいろいろ使ってるのです……）、ほかのてがろぐと共通して使うhtmlにそれぞれのディレクトリ名（tegalogとかmemoとか）をいれるために使ってます。[[FREESPACE:0]].cssみたいな感じで……。(前はヘッダ用フリースペースなどを使っていたのですが、ログイン画面かどこかでここの文言が出るのが気になってしまいすべてをフリースペースに書いています）
だいたい5個前後くらいですが、skin-coverに書くときに上から順にFREESPACE0→1みたいな感じで順番にしたい、しかしそうするとよく編集しがちな部分が（てがろぐから編集するほうの）フリースペースの下の方になってしまい編集がしづらい……ため、できたら好きな文字列にできたらなと思いました；わかりにくい文章ですいません……。
かなり個人的なわがまま要望になってしまうのでもし可能であれば、で構いません！
たしかに、自作スキンのCSSとかを確認している最中だったので適当な半角の英語1文字で検索してました……。ここでは「てがろぐ」で検索していたからなんともなかったんですね。スッキリしました！ありがとうございます。
あと5150の件ですが（書いたのは自分です）、フリースペース内には簡単な自己紹介？やお知らせ、細々とした部分（自分が書いてる内容をちょくちょく文言を変えたくなる気質？のため、ウェブ上からすぐ編集できるのが便利でいろいろ使ってるのです……）、ほかのてがろぐと共通して使うhtmlにそれぞれのディレクトリ名（tegalogとかmemoとか）をいれるために使ってます。[[FREESPACE:0]].cssみたいな感じで……。(前はヘッダ用フリースペースなどを使っていたのですが、ログイン画面かどこかでここの文言が出るのが気になってしまいすべてをフリースペースに書いています）
だいたい5個前後くらいですが、skin-coverに書くときに上から順にFREESPACE0→1みたいな感じで順番にしたい、しかしそうするとよく編集しがちな部分が（てがろぐから編集するほうの）フリースペースの下の方になってしまい編集がしづらい……ため、できたら好きな文字列にできたらなと思いました；わかりにくい文章ですいません……。
かなり個人的なわがまま要望になってしまうのでもし可能であれば、で構いません！
5166後半の「画像拡張子で検索をした時に、続きを読むボタンを押すと画像拡大スクリプトが動作してしまう」件は、<a>タグのリンク先URLの末尾が画像の拡張子かどうかを先にjavascriptで判定してから画像拡大スクリプトを実行するようにしたら自己解決できました。お騒がせしました。
同じようなことをしたい方が他にいるかは不明ですが、一応解決方法を書いておきます。
外側スキンに書く遅延読み込みスクリプト群を下記のコードにする。
baguetteBox.jsの動作除外用クラスに「uc-nomodal」を指定しています
<script src="baguetteBox.min.js"></script>
<script type="text/javascript">
window.onload = function() {
// 画像拡張子の正規表現
var imageExtensions = /\.(jpg|jpeg|png|gif|webp)$/i;
// すべての `.comment` クラスを持つ `a` タグを取得
var links = document.querySelectorAll('.comment a');
// リンク先URL末尾が画像拡張子になっているリンクがあるかチェック
var hasImageLinks = false;
links.forEach(function(link) {
if (imageExtensions.test(link.href)) {
hasImageLinks = true;
} else {
// 末尾が画像拡張子じゃなければignoreClassで指定するものと同じ除外用クラスを追加
link.classList.add('uc-nomodal');
}
});
// リンク先URL末尾が画像拡張子の場合のみbaguetteBox.jsを実行、uc-nomodalクラスは除外
if (hasImageLinks) {
baguetteBox.run('.comment', {
ignoreClass: 'uc-nomodal'
});
}
};
</script>畳む