No.5170, No.5169, No.5168, No.5167, No.5166, No.5165, No.5164［7件］
にしし
＞
details要素＋summary要素で実現される「折り畳む」機能を搭載した Ver 4.6.1β(未配布)の動作テスト。折り畳み
折り畳み表示のテスト
こんな感じで見えます。
こんな感じで見えます。
ラベルはその都度指定します
もちろん、1投稿内にいくつでも書けます。
入れ子にもできます
ただし、details要素はspan要素等のインライン要素の内側に書くとHTMLの文法的に正しくなくなるため、そのように文字装飾を書いてしまうと直前のCSSが意図通りに適用されなくなる問題がある点に注意が必要です。
JavaScriptなしで動作する点も良いですね。装飾はCSS次第で好きなようにできます。
ここの動作試験場では、標準スキンにしか(まだ)CSSを用意していません。が、details要素＋summary要素はHTMLだけで動作しますから、CSSがなくても（単に装飾がないだけで）動作はします。 12日前（土 19:39:11）
あどみ
＞
>>5168修正ありがとうございます！お疲れ様です。
1行単位のフリースペース、私はあると助かります！
それと現在特定の自由装飾をjsでdetails+summayに変換して隠す機能の代わりに使ってるので、もし公式で実装されるとすごくすごく嬉しいです！！！
13日前（金 15:43:55）
にしし
＞
そういえば最近、クロワッサンを食べていないな……。🥐🥐🥐🥐Re:5161◆ご要望の背景説明をありがとうございます。ご要望としては記録しておきますが、「最初の画面に任意の案内文を表示する機能」と「ログインフォームの下部に任意の案内文を表示する機能」の2つが既にある状況で、さらに上にも表示できるようにする機能を用意するのは、よほど需要がない限りはToDoリストの前方には来ないと思いますので、案内文面をどうにか工夫してご対処頂くのが現実的だろうと思います。
🥐Re:5162◆英数字1文字の検索でカード型リンクが表示されなくなる問題は（こちらのローカルにある版では）修正しましたので、次のバージョンでは解決します。公開までもうしばらくお待ち下さい。◆No.5150の詳細説明もありがとうございます。もしかして、下記のような「1行単位のフリースペース」的なものが別途存在したら便利でしょうかね？
sakura:さくら
tomoyo:ともよ
……のように登録しておくと、[[FREELINE:sakura]]の記述で「さくら」が出力されるような。既存のフリースペースを名前付きに改修するのはちょっと困難なのですが、短いリンクリストの掲載にフリースペースを使われているケースがちらほらありますので、そういうのに活用できる（1行単位で完結する）自由入力欄もあると便利なのかな……とちょっと考えてはいました（まだ何も予定はしていないのですけども）。そうすると、
link1name:ほげほげ
link1url:https://www.example.com/
link2name:ひげひげ
link2url:https://www.example.org/
のように書くだけで、リンクリストとして掲載できるようにスキンを作っておくこともできるかな……とか。まあ、この方法だと総数が可変長にはなりませんけども。^^;
🥐Re:5163◆いろいろ方法を試して下さってありがとうございました。そういった試行錯誤の過程が見られたからこそ、専用機能の実装を考えられた面もありますので、とてもありがたいです。Amazonギフト券もどうもありがとうございました！(╹◡╹)ﾉ
🥐Re:5164◆お役に立っているようで嬉しいです～。^^
🥐Re:5165◆お役立ちサイトなので、不届きなBotによるスクレイピングも多いのではないかと想像します。もしサーバ負荷が高まっていることが522エラーの要因になっているようなら、
🥐Re:5165◆情報をどうもありがとうございます！ たしかに、「全文検索時でも隠す機能を有効にする」がONのとき、半角英数字1文字だけを検索すると、続きを読む関連のJavaScriptの実行も妨げられてしまいますね。こちらのローカルにあるプログラムは修正しましたので、次のバージョンでは解消します。お知らせ下さってありがとうございました！
🥐Re:5166◆自己解決ありがとうございます。[Ctrl]＋[U]等で閲覧できるソースの方をご覧頂くと分かりますが、「続きを読む」ボタンのa要素にはURLは含まれていません。通常のページ内リンクと同様に、単に <a href="#readmore" ～ > のようになっているだけです。リンクの上にマウスポインタを載せてリンク先を確認するとURLが見えますが、それはブラウザ側が自動的に補完しているだけです。ただ、てがろぐ側の設定もいろいろありますので、もしかしたらURLが出力されるような状況もあるのかもしれませんが(^_^;)。もし本当にURLが出力されているようでしたら教えて下さい。そうでないなら、原因は別のところにありそうな気がします。（とはいえ、まさしく正攻法で自己解決なさっていますから、問題ないわけですけども。）
指定範囲を隠す機能を、現状の「a要素＋JavaScript」ではなく、「details＋summary要素」で出力できるオプションも用意した方が良いのかな、という気もします。（details要素はspan要素の内側には書けないので、文字装飾の入れ子構造によっては文法的に正しくなくなる懸念があるので実装は見送っていたのですけども、まあ「分かっている人だけが使ってくれれば良い」と考えることもできますしね……。）
14日前（木 20:33:28） 回答/返信
さくら
＞
5166です。たびたびすみません…。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>畳む 14日前（木 18:06:20）
さくら
＞
いつもてがろぐに大変お世話になってます。てがろぐ本体・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>タグに検索キーワードを含めないようにして頂くことはできませんでしょうか。 14日前（木 06:14:53）
あどみ
＞
>>51605153,5159です、お返事ありがとうございます。上書きスタイルシートの処理について解説していただき、納得できました。
スキンの作り方を変えて対応しようと思います。
あとリンク先のCloudflareの522エラーすみません…🙇
ドメインをCloudflareに移管したらこのエラーが頻発するようになってしまって調べながら設定いじっているのですが解消できず私も困ってます😅
数分置いて再アクセスすれば見れることがほとんどですがストレスですよね。
使っているCMSとの相性もあるのかと乗り換えも検討してますがなかなか時間が取れずしばらくはこのままです…😥 15日前（水 18:32:15）
あどみ
＞
アップデートお疲れ様です。新しい機能のカード型リンク、ずっと欲しかった機能なのでとても嬉しいです。ありがとうございます🙇
ラベルを省略しても使えるのがすごくありがたいです。OGPカードボタンからURLを入力するだけで使えるので、すぐ使えてとても便利です。
いつも更新ありがとうございます。これからもお世話になります🙏 17日前（火 05:21:16）