2021年11月 この範囲を時系列順で読む この範囲をファイルに出力する
てがろぐCGIには「続きを読む」ボタンのラベルを変更する設定機能がありますが、すべての「続きを読む」ボタンのラベルが一括で変わります。そのため、そのままでは『普段は「続きを読む」という設定にしておいて、ある記事だけ「ネタバレ」などに個別に変更する』といったことはできません。しかし、「続きを読む」ボタンそのものを文字装飾の範囲内に含められる仕様がありますから、これとJavaScriptを併用すれば、「続きを読む」ボタンのラベルのバリエーションを複数用意することもできそうです。
長いので折りたたんでおきます。➡<>
▼投稿時の工夫
まず、「続きを読む」ボタンを、何らかの文字装飾の内側に書きます。
例えば、 [B:太字の[H:内側を隠す]感じです。]
このようにすると、<b class="decorationB">太字の<a class="readmorebutton readmoreopen" ……>続きを読む</a>～ のような感じでHTMLが出力されます。
▼ラベルを変えるJavaScript
なので、JavaScriptを以下のように書けば、『太字装飾の内側にある「続きを読む」ボタン』に限定して、ラベルを変更できます。
const readMoreBtn1 = document.querySelectorAll(".decorationB .readmoreopen");
readMoreBtn1.forEach(function(oneItem) {
oneItem.innerHTML = 'ネタバレ';
});
上記のJavaScriptソースを、外側スキンの末尾（</body>タグの直前あたり）に書いておけば、『太字装飾の内側にある「続きを読む」ボタン』はすべて「ネタバレ」というラベルに変わると思います。
※上記のJavaScriptソースの記述位置は、必ず「ページの末尾」でないとうまくいかない点にご注意下さい。（対象のHTMLをすべて読んだ後に実行しないと意味がないからです。）
▼ラベルのバリエーションを追加する場合は
デフォルトの「続きを読む」、バリエーション1「ネタバレ」以外にもいくつかのバリエーションを用意したい場合は、『斜体装飾の内側』とか『下線装飾の内側』などの装飾を使うと良いでしょう。
『斜体装飾の内側』を使う場合は、
const readMoreBtn2 = document.querySelectorAll(".decorationI .readmoreopen");
readMoreBtn2.forEach(function(oneItem) {
oneItem.innerHTML = 'つぼやき';
});
などのように書くと良いでしょう。
▼たぶんこれが一番良い？
ボタンのラベルや隠された範囲全体が太字や斜体などに装飾されてしまうのを避けたい場合は（たいてい避けたいでしょうね^^;）、既定の文字装飾ではなく自由装飾機能 [F:hogehoge:～] を使うと良いと思います。
例えば、[F:netabare:[H:ここにネタバレ]～] のように投稿するなら、ここの「続きを読む」ボタンのラベルだけを「ネタバレ」に変更するには、以下のJavaScriptソースを書いておけば良いでしょう。
const readMoreBtn3 = document.querySelectorAll(".deco-netabare .readmoreopen");
readMoreBtn3.forEach(function(oneItem) {
oneItem.innerHTML = 'ねたばれ';
});
※自由装飾でclass名を「netabare」と指定した場合、実際のHTMLに出力されるclass名は「deco-netabare」になる点にご注意下さい。
#🌱豆知識
🍔Re:2505◆みんなー！ヾ(๑╹◡╹)ﾉ"
🍔Re:2506◆下書き(非公開)機能は今まさに実装している最中でして、次のβ版でご試用頂けるようになる予定です。たぶん今月中には配布できる気がしています。クリップボードの画像貼り付けは、何か良さげな実装方法があれば良いと思ってはいるのですけどもね……。当面は[Windows]キー＋[PrintScreen]のような、キャプチャと同時にファイル化されるような手法などキャプチャ側の省力化を図る方向で対処頂ければ幸いです。
🍔Re:2507◆自己登録型のユーザリンク集ページを作りつつあります。てがろぐCGIの開発よりも進行速度は遅いので完成がいつになるかは分かりませんが。というか、完成しても登録してくれる方々がいらっしゃるかどうかは別の話ですけども。(笑) スキンの編集は、とりあえずHTMLの方で「順序を入れ替える」みたいなところから少しずつ初めていけばステップアップしやすいのではないかな、と思います。
🍔食べたのは肉まんだったと思うのだけど、謎肉すぎて難の肉なのかは分からなかった。たぶん豚だと思うのだけど。少なくとも魚ではなかった気がする。ただ、見た目は魚のミンチでもおかしくないなと思えるような感じだったけども。(笑) もらった肉まんなので、どこで買った何なのかまったく分からない……。
🍔肉まんの絵文字はないのか……。仕方がないのでハンバーガーで代用。
私はてがろぐを設置するだけで手一杯なのでスキンの変更が難しくて出来ません…
>>2501
神…！毎度なにげに面倒くさかったので早速真似したいと思います！シェアありがとうございます！！#感謝
最初はサイトで活用していたのですが、てがろぐが便利すぎてついにローカルでも使用するに至りました（にししさんのANHTTPDの記事参考にさせていただきました。ありがとうございます）。ただActivePerlに関してはDLするのに登録？Githubアカウント？が必要らしかったのでStrawberryPerlというのをDLしてインストールし使っています。
何度かここでもお見かけした#要望 ではありますが、
・下書き（投稿を非表示）機能
・クリップボードから画像を直に貼り付け
があればもう文句なしです。私は作業進捗もてがろぐにUPしているんですが、WindowsPCだけでなくスマホなどからも見え方のチェックができ、かつメモもつけられて、時系列で俯瞰できるソフト（プログラム）というのが意外とないんです。でもツイッター連携のサービスやスマホアプリなどは使いたくない……ので、てがろぐが本当にありがたい存在なのですが、画面のスクショを一度保存しなければならない点だけが惜しい！ 長々と書いてしまいましたが、ご検討に加えていただければ幸いです。
ヾ(*ﾟ▽ﾟ)ﾉｼ てがろぐユーザー友の会のみんなー！
スキンcssを微調整している時にhtmlファイルも書き換えるのが面倒だなぁと思っていたので、いい方法ですね！耳より情報感謝です！ #感謝
なるほど、そんな手が……！ たしかに楽で良い方法ですね。ちなみに INFO:LASTUPDATE の記法は（最新投稿の日時ではなく）データファイルの更新日時を出力しているので、新規投稿をしていなくても既存の投稿を再編集するだけで更新されます。（1文字も増減していなくても、既存投稿の投稿ボタンを押すだけでデータファイルは再生成されます。）
……と書いてから気付いたのですが、新規投稿で本文に1文字も入力せずに投稿ボタンを押すと「データファイルをリフレッシュしました」という報告だけが表示される仕様ですが、このときにもデータファイルは再生成されていますので、この方法でもデータファイルの更新日時は更新されますから INFO:LASTUPDATE の日時も変わります。^^;
……と書いてから気付いたのですが、新規投稿で本文に1文字も入力せずに投稿ボタンを押すと「データファイルをリフレッシュしました」という報告だけが表示される仕様ですが、このときにもデータファイルは再生成されていますので、この方法でもデータファイルの更新日時は更新されますから INFO:LASTUPDATE の日時も変わります。^^;
てがろぐのスキンを作った後に微調整でちょこちょこCSSを弄ることがあるんですが、そのたびににししさんの記事にある方法で再読込みを回避してました。しかし一々skin-cover.htmlにクエリを書き込むのが面倒なので、クエリの部分を[[INFO:LASTUPDATE:YMDhm]]と書くことで解決。CSSだけ弄ればいいので楽になりました。毎日何度も更新するから使える技ですが…。
図鑑みたいな用途とは新しいですね！ 活用の幅が広がっていることは開発者としてとても嬉しいです。(╹◡╹) ご要望は歓迎ですのでお気軽にどうぞー。
やっぱり任意URLとしてリンクする方法しかないのですね。了解しました。
てがろぐをブログ日記や交流の場ではなく図鑑みたいな感じで使用しているので、関連記事へのリンクは文字より画像の方がわかりやすいかなという超個人的理由で質問させていただきました。
実装してもらえたら嬉しいですけれど、どうぞお気遣いなく！
ご返答ありがとうございました。
てがろぐをブログ日記や交流の場ではなく図鑑みたいな感じで使用しているので、関連記事へのリンクは文字より画像の方がわかりやすいかなという超個人的理由で質問させていただきました。
実装してもらえたら嬉しいですけれど、どうぞお気遣いなく！
ご返答ありがとうございました。
🌰Re:2497◆てがろぐのご活用をどうもありがとうございます。さて、指定No.へリンクする記法では、おっしゃるとおり画像リンクにはできません。今のところは、指定No.ページのURLを使って、画像を使って任意のURLにリンクする書き方 の方法で画像リンクを作って頂くほかないです。たしかに、指定No.へのリンクでも画像を使いたい需要もありそうな気もしますので、今後のバージョンで記法を拡張できないか検討してみます。今後ともご愛用頂ければ幸いです。(╹◡╹)ﾉ
少し前にこちらのてがろぐを知り、求めていた以上の多機能で日々勉強しながら使わせていただいています。
質問なのですが、記事内リンク（＞記事No.でリンクされるものです）でラベルを使って文字リンクにできる機能ですが、これを画像リンクにできますでしょうか？
画像タグを記事No.リンクボタンで囲ってみると、画像は表示されず画像タグがラベル認識されて文字リンクとなってしまいました。
外部URLをリンクする方法で個別記事URLを書くとリンクされるのですが…この方法だけでしょうか。
使い方やカスタマイズのページを隅々まで目を通したつもりですが、既にどこかに記載されていたらすみません！
お教えいただけると嬉しいです。
質問なのですが、記事内リンク（＞記事No.でリンクされるものです）でラベルを使って文字リンクにできる機能ですが、これを画像リンクにできますでしょうか？
画像タグを記事No.リンクボタンで囲ってみると、画像は表示されず画像タグがラベル認識されて文字リンクとなってしまいました。
外部URLをリンクする方法で個別記事URLを書くとリンクされるのですが…この方法だけでしょうか。
使い方やカスタマイズのページを隅々まで目を通したつもりですが、既にどこかに記載されていたらすみません！
お教えいただけると嬉しいです。
🌰Re:2492◆β版のご試用ありがとうございます。skinパラメータの重複はずっと気になってはいたんです。ただ、誰からも指摘されなかったので解決の優先度が低かっただけで。(笑) ちょうど良い機会でした。蜜柑カラーテーマを気に入って頂けて良かったです。(╹◡╹)
🌰Re:2493◆動作報告をどうもありがとうございます。無事に動いているようで良かったです。(╹◡╹)
🌰Re:2494◆アップデートありがとうございます。「固定するほどではないけど再度上げたい記事」まさしくそういう用途のための機能なので、やはり需要があったと分かって嬉しいです。(๑╹◡╹๑) カラーテーマ、葡萄はちょうど良いですか。なるほど……。ディスプレイの明るさ設定は人それぞれですから、むしろ「明るめ」と「暗め」の両方がある方が望ましいのかもしれないな……とも思いました。使用感の報告はとてもありがたいです。m(_ _)m
🌰Re:2495◆カラーテーマをいろいろお試し下さってありがとうございます。橙色お好きですか～。良かったです。赤系統のテーマが「桃桜」しかなかったので、何か増やしたいな……と思ったのでした。オレンジにして良かったです。ネットから蜜柑の写真を拾ってきて、スポイトツールで色を調べてグラデーションに使いました。(笑)
モンブラン食べたい🌰🌰🌰。ないけど。(´･ω･`)
新しいカラーテーマの色味ですが、私の環境では葡萄🍇は暗すぎずちょうどよく、蜜柑🍊はオレンジ色に白の文字がやや見づらい（コントラストが弱い）感じです。色味の調整は難しいかと思いますが、参考になれば幸いです。
2432です。Ver.3.4.5お疲れ様です！早速アップデートいたしました。
skin=xxxxxが二重に出力されていた部分、何だかお手数をおかけしてしまう形になってしまったのにご対応頂きありがとうございました。
管理画面の新しいカラーテーマもいいですね！蜜柑がお気に入りです。管理画面に入るたびに蜜柑が食べたくなります🍊
skin=xxxxxが二重に出力されていた部分、何だかお手数をおかけしてしまう形になってしまったのにご対応頂きありがとうございました。
管理画面の新しいカラーテーマもいいですね！蜜柑がお気に入りです。管理画面に入るたびに蜜柑が食べたくなります🍊
ロリポップのサーバにセットアップしたときに、ログイン画面から先に全然進まない場合は、サーバのコントロールパネルで「ロリポップアクセラレータ」を無効にしてくだしあ……。（無効にするか、または画像にしかキャッシュが効かない設定にすると、ログインできるようになります。ロリポップアクセラレータが有効な場合、CGIが生成するログイン画面をサーバ側で強力にキャッシュしてしまうために、内部ではログインできているのにログイン画面が延々と表示されるっぽいです……。）この現象は常に発生するわけではないようですけども。 #🌱豆知識
🆕 Ver 3.4.5βの更新点(概要)：
●画像の代替文字をLightbox系スクリプトのキャプションとして出力できるようにする属性名の設定機能を追加。
●編集した投稿を（先頭固定はせずに）先頭に移動できる機能。（日付は自動更新）
●2つ以上の半角空白文字が連続する際に、空白量をそのまま表示できる機能を追加。（OFFにも設定可能）
●管理画面のカラーテーマを3つ追加。
●スキンの一時適用時に、一部でURLに「skin=xxxxx」が二重に出力される問題を解消。
詳しい記述方法等は、上記の開発進捗状況報告ページの記事をご覧下さい。今のところ、そこ以外に解説はありません。
スパムが投稿されては困るので、設定のオンオフで切り替えられる画像認証などを付けてくださると非常に嬉しいです。
🍰画像の代替文字をLightboxのキャプションとして出力(data-title="代替文字")できたり、 >>2473
🍰編集した投稿を（先頭固定はせずに）先頭に移動することもできたり、
🍰スキンの一時適用時に一部のリンクURLで「skin=xxxxx」が二重に出力される問題が解消されていたり、 >>2432
🍰管理画面のカラーテーマが3つ増えていたりします。 >>2399
カラーテーマはちょっと配色実験中のような感じなので後で変えるかも知れませんが。
上記の写真をクリックすると、Lightboxによって拡大された際に、代替文字として指定されている文字列がキャプションとして拡大画像の下に表示されます。（代替文字の指定がない場合は、キャプションとしては何も出力されません。）
🍰編集した投稿を（先頭固定はせずに）先頭に移動することもできたり、
🍰スキンの一時適用時に一部のリンクURLで「skin=xxxxx」が二重に出力される問題が解消されていたり、 >>2432
🍰管理画面のカラーテーマが3つ増えていたりします。 >>2399
カラーテーマはちょっと配色実験中のような感じなので後で変えるかも知れませんが。
上記の写真をクリックすると、Lightboxによって拡大された際に、代替文字として指定されている文字列がキャプションとして拡大画像の下に表示されます。（代替文字の指定がない場合は、キャプションとしては何も出力されません。）
昨日は一日中ずっと眠くて仕方がなかった……。何故なのか。
🍘Re:2472◆現実逃避時計のご活用をありがとうございます。(笑)
🍘Re:2473◆キャプションというのは、Lightboxとかのスクリプトで拡大表示したときのキャプションという意味でしょうかね？ たしかに、キャプション用属性を自由に指定できるようにして、そこに代替文字を挿入する仕組みがあると役に立ちそうですね。ちょっと実装方法を考えます。ご要望ありがとうございます。
🍘Re:2474◆よく気付きましたね。^^;
🍘Re:2478◆現時点での対策としては、YouTube動画の埋め込み部分を [H: ～ ] で隠して頂くとか、何らかのダミー画像を用意して頂いてそのリンク先をYouTubeのURLにするとか、そういう方法しかないかな……という気がします。
🍘Re:2479◆β版のご試用をどうもありがとうございます。うまく動いているようで良かったです。(╹◡╹) ご要望もどうもありがとうございます。説明はよく分かります。私も同様の問題を感じていました。ただ、うまい解決方法を思いつけていないのですよね……。「畳む」ボタンが押されたときに、展開された空間の高さ分ほど上方向にスクロールさせれば良いか、とか「続きを読む」ボタンがあった位置の座標へスクロールすれば良いか……とも思ったのですが、展開された分量が少ない場合には1ミリもスクロールする必要が無い場合もあるわけで、どんな場合にも強制スクロールさせれば良いわけではないのですよね……。その辺のうまい解決策を思いつけば実現は可能かなという気はしているのですけども。「ファイル名検索」は画像一覧画面で画像ファイル名を指定して検索したい、というご要望でしょうかね？ たしかにそれもあると便利そうですね。ToDoリストに入れておきます。
🍘Fumy News Clipperの試験ページで「てがろぐにスキンを使い回せるのか」とご質問下さった方に、1ヶ月遅れで返信を書きました。ここにも転載しておきます。
Fumy News Clipperに存在するすべての機能を将来的にはてがろぐに搭載させるつもりでおりまして、将来的には開発を継続するCGIをてがろぐに一本化したいと考えています。
🍘Re:2472◆現実逃避時計のご活用をありがとうございます。(笑)
🍘Re:2473◆キャプションというのは、Lightboxとかのスクリプトで拡大表示したときのキャプションという意味でしょうかね？ たしかに、キャプション用属性を自由に指定できるようにして、そこに代替文字を挿入する仕組みがあると役に立ちそうですね。ちょっと実装方法を考えます。ご要望ありがとうございます。
🍘Re:2474◆よく気付きましたね。^^;
🍘Re:2478◆現時点での対策としては、YouTube動画の埋め込み部分を [H: ～ ] で隠して頂くとか、何らかのダミー画像を用意して頂いてそのリンク先をYouTubeのURLにするとか、そういう方法しかないかな……という気がします。
🍘Re:2479◆β版のご試用をどうもありがとうございます。うまく動いているようで良かったです。(╹◡╹) ご要望もどうもありがとうございます。説明はよく分かります。私も同様の問題を感じていました。ただ、うまい解決方法を思いつけていないのですよね……。「畳む」ボタンが押されたときに、展開された空間の高さ分ほど上方向にスクロールさせれば良いか、とか「続きを読む」ボタンがあった位置の座標へスクロールすれば良いか……とも思ったのですが、展開された分量が少ない場合には1ミリもスクロールする必要が無い場合もあるわけで、どんな場合にも強制スクロールさせれば良いわけではないのですよね……。その辺のうまい解決策を思いつけば実現は可能かなという気はしているのですけども。「ファイル名検索」は画像一覧画面で画像ファイル名を指定して検索したい、というご要望でしょうかね？ たしかにそれもあると便利そうですね。ToDoリストに入れておきます。
🍘Fumy News Clipperの試験ページで「てがろぐにスキンを使い回せるのか」とご質問下さった方に、1ヶ月遅れで返信を書きました。ここにも転載しておきます。
てがろぐでFumy News Clipper用のスキンをそのまま使うことはできないのですが、てがろぐはFumy News Clipperをベースにして開発したCGIなので共通点は多々あります。ソースを見比べて頂ければ一部を流用することは難しくないのではないかと思います。畳む
なお、年月リストの空間にスクロールバーがあるのは、年月リストを作っているボックスに、max-height: 30em; で高さの最大値を指定し、overflow: auto; で（必要に応じて）スクロールバーを表示するようCSSを書いているだけです。なので、てがろぐでもその他のページでも何でも、その2行のCSSさえ書けば「疑似フレーム」っぽく見せられます。
ぜひお試し下さい。(╹◡╹)ﾉ
Fumy News Clipperに存在するすべての機能を将来的にはてがろぐに搭載させるつもりでおりまして、将来的には開発を継続するCGIをてがろぐに一本化したいと考えています。
<>
テスト
テスト
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 173 174 175 176 177 178 179 180 181
