🗐 てがろぐ - Fumy Otegaru Memo Logger -

お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)

or 管理画面へ

2025年6月 この範囲を時系列順で読む この範囲をファイルに出力する

NO IMAGE
昼食はそうめん。

🥪Re:5242◆リンクを画像に変えたいだけなら、CSSで実現できます。
例えば、外側スキンに <div class="backlink">[[FREE:HOMELINK]]</div> のように書いているとします。
すると、実際には <div class="backlink"><a href="設定されたリンク先">設定されたラベル</a></div> というHTMLが出力されますね。
このリンクテキストを例えば back.png という画像に置き換えるには、以下のようなCSSを使えば可能です。

.backlink a {
  display: inline-block;
  width: 100px;                     /* 画像の幅に合わせて調整 */
  height: 30px;                     /* 画像の高さに合わせて調整 */
  background-image: url('back.png');/* 見せたい画像 */
  background-size: contain;      
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

この方法なら、HTMLは何も変えずに、CSSだけでテキストリンクを画像リンクに変更できます。
(他には、JavaScriptで innerText をimg要素に置き換える手もありますけども。)
Icon of admin
こんにちは、いつも愛用させていただいています。
要望になりますが、[[FREE:HOMELINK]]内のURLだけを抽出する抽出する要素はありませんか?ヘルプを見ても該当する要素がないようであるため、なければ要望としてHOMELINKのURLだけを指定できる要素を追加していただけると助かります。
(よくホームページへのリンクに画像を利用するためです。ALT要素のために「リンクラベル」も単独で指定できると助かります)
Icon of admin
5239です。にししさん返答ありがとうございます。

ご紹介頂いたページでは対処法に「投稿時だけWAFをoffにして投稿後に戻す」などがありましたが、最終的にcssのdecoで数ピクセルの空白を作ったものをorの左右に配置し、「a or b」ではなく「aorb」として認識されるようにして(?)回避することにしました。

サーバーの仕様になってしまうと素人には全くわからないので、とても助かりました。いつも丁寧なご対応ありがとうございます。
NO IMAGE
朝食はサンドイッチ。🥪🥪🥪

🥪Re:5237◆なるほど、画像の縦横サイズ情報が必要なギャラリー系ライブラリもあるんですねえ。次のβ版は、準備がとてもうまくいけば、今日の夜に公開できるかもしれません。うまくいけば、の話ですけども。^^;
なお、てがろぐで画像の縦横サイズが自動取得できるのは、JPEG、GIF、PNGと一部のSVGだけなので、WebP等をご使用の場合は、画像情報の編集画面で手動登録しておかない限り縦横サイズは出てきませんのでご注意下さい。

🥪Re:5238◆特に予定はありません。文章を複数のページに分割したい場合は、単純に複数の投稿に分割すれば良いのではないかと思います。複数投稿を1つにまとめる機能としては、カテゴリ機能やハッシュタグ機能がありますし、 >>5170,5123,5097 などのように任意の投稿No.を連結表示する機能もありますし。もしお一人でお使いの場合は「特定の投稿者だけの投稿を閲覧する機能」も「第2のカテゴリ」的に使えます。「他の投稿に絶対に登場しない単語」を含ませることで、全文検索結果へのリンクを使って任意の投稿をまとめることもできるでしょう。

🥪Re:5239◆お使いのサーバのWAF(Wab Application Firewall)が原因です。「or」という単語はSQLで論理演算子として頻繁に登場するので『SQLインジェクション攻撃パターン』と誤解されてブロックされるケースがあります。「or」という単語自体は英文には極めて頻繁に出てくると思いますから、いくらなんでもWAFの条件判定が厳しすぎると(個人的には)思うのですが、サーバ側(WAF側)がそういう判断をしている以上、(そのサーバ上で稼働しているに過ぎないCGI側では)どうしようもないのです。WAF機能をOFFにすれば解決しますが、WAFを有効にしたままどうにかなさりたい場合は、レンタルサーバへ苦情を入れて頂くほかなさそうに思います。

※ここまで厳しい条件で判定させると、ユーザ側がWAFをOFFにしようと思う動機になりやすいので、レンタルサーバ側はもうちょっとWAFの条件を緩める方が総合的には安全を維持できると思うのですけどもね……。

なお、「or」と書くだけで『SQLインジェクション攻撃パターン』だと誤解されてしまう詳細については、Perplexityによる説明 をご覧下さい。回答文章の上部に見える「ソース」リンクを押すと、情報元のWebページも閲覧できます。(※Perplexityのアカウントをお持ちではない場合、初回アクセス時にサインインを求められるかも知れませんが、何もせずに「閉じる」を押せば閲覧できます。)
Icon of admin
質問なのですが、自分のてがろぐで「or」という単語を入力して投稿しようとすると403エラーが出てしまうのですが、これは何が原因なのでしょうか?
Icon of misaki
いつも便利に使わせていただいています。
要望というほどではないのですが、ひとつの投稿内において、長文を複数のページに分割できる機能(小説投稿サイトのページ分割機能のような)の実装予定はございますでしょうか?
Icon of admin
全然要望を出した方とは関係ないのですが、「原寸画像へのリンクにならず、キャプションも付かず、ただimg要素だけで出力される記法」の実装されたバージョンにとてもわくわくしています。
特に画像のwidthとheightを出してくれるのが嬉しいです。
この本体画像サイズが取得できると事前に画像サイズの定義が必要になるギャラリー系のライブラリ(具体的にはPhotoswipe)を導入することができるようになります。

https://photoswipe.com/

フラグ自体も取得できるとのことでギャラリースキンの実装が色々簡単になると予想できるので、本当にこのアップデートが使えるようになるのが楽しみです。
NO IMAGE
クロワッサンは無事に食べました。🥐🥐🥐

🥐Re:5230◆投稿1枚目の画像が「原寸画像へのリンクにならず、キャプションも付かず、ただimg要素だけで出力される記法」を新たに用意しました。また、「指定画像のフラグだけを得る記法」も用意しました。次のβ版からお使い頂けますので、もうしばらくお待ち下さい。
Bluesky Pawoo

例えば、[[ONEPICT:1:VALUE:CLASS]] と書くと、1枚目の画像のフラグだけが出力されますので、<span class="[[ONEPICT:1:VALUE:CLASS]]">~</span> のような感じで書くと、画像のフラグだけを使って何か装飾したりできそうな気がします。

🥐Re:5233◆そうですね。そのスクリプトは、てがろぐ側の画像UP機能を経由せずに(新規投稿前に)画像をUPする仕様ですから、そこから画像インデックスも書き換えられれば、新規投稿前にNSFWフラグを付けることもできます。
🥐Re:5234◆サポートありがとうございます!(╹◡╹)ノ
🥐Re:5235◆WAFをOFFにすると解決はしますが、WAFをOFFにするのはあまり望ましくないのですよね。てがろぐにはCodePenを埋め込む機能がありますので、JavaScriptソースを掲載する用途なら、CodePenに書いて埋め込む方が(特にソースが長い場合には)便利かもしれません。文法に従って色分け表示もされますし。
CodePenを埋め込んだ例
こんな感じで埋め込めます。

ただし、この機能はデフォルトでOFFなので、使いたい場合は設定を事前にONにして頂く必要がありますが。
Icon of admin
5224,5228,5233です
>>5234さんのおっしゃる通りでした!!
WAFの設定でした。
ありがとうございます。お騒がせいたしました。
Icon of misaki
ロリポップで404が出るのはもしかしたらWAFによるものかもしれません…?
サーバの設定をみてみると良いかもです〜見当違いだったらごめんなさい!
Icon of admin
5224,5228です。
お返事ありがとうございます。
>>5232のような流れで処理されているのですね。
全然システム的なことが詳しくなくて見当違いなことをお話していたら恐縮なのですが
『「てがろぐ側の画像UP機能を使わずに、独自に画像をUPして画像インデックスを更新する」と言う処理が必要そう』、とのことでしたが
てきとーのーと様の『てがろぐでD&Dまたはコピペで画像投稿するやつV2 』を使用したらいけるといいなとおもいました。
実際にChatGPTに聞いてみると可能とのことでしたのでチャレンジしてみようと思います(ChatGPTは割と頻繁にいい加減なことを言いますが。。)

以下別件です。
セキュリティレベルをJavascriptでも可能なものにしたのですが、てがろぐで備忘録としてエスケープ文字を用いてコード(VueやJavascript)を記載し投稿しようとしたら404がでてしまいます(ロリポップのサーバーです)。
CSSはエスケープ文字で記載できたのですが、Javascriptについてはどうしようもないことなのでしょうか?
NO IMAGE
最近、クロワッサンを食べていないな……。🥐🥐🥐

🥐Re:5228◆投稿と同時に画像もUPする場合、内部では以下のような動作をしています。
  1. 画像をアップロードする。
  2. フラグを立てる必要がある場合はフラグを立てる。→この時点で画像インデックスファイル(index.xml)が更新される。
  3. 実際にアップロードされたファイル名から、画像挿入用記法([PICT:~])を作って本文の指定位置(※設定で選択できます)に追記する。
  4. 投稿本文をデータファイル(tegalog.xml)に追加する。
さらに、投稿直後にHOMEを表示するよう設定されているなら(※デフォルトではそう設定されています)、以下に続きます。
  1. 本文を表示する。
なので、「投稿と同時に実行されるJavaScript」等を使って画像インデックスファイル(index.xml)を書き換える場合、上記の「2より後」かつ「5より前」のタイミングで書き換えられれば望みのフラグを「5」の時点で反映させることは可能です。……が、現実的にはそんなタイミングを狙うのは無理だと思いますので、不可能でしょうね。^^;
新規投稿時に画像のメタデータをどうにかしたい場合は、「新規投稿されるよりも前の段階でindex.xmlを書き換えておく」みたいな手順でないと無理だと思います。(つまり、「てがろぐ側の画像UP機能を使わずに、独自に画像をUPして画像インデックスを更新する」のような処理が必要そうに思います。)

🥐Re:5230◆スキン配布ありがとうございます。てがろぐがお役に立っているようで嬉しいです。(╹◡╹)ノ 残念ながら、指定画像のフラグだけを得る記法はありません。……が、自力で画像表示用のimg要素を組み立てられるように、フラグとかサイズとかも取得できる記法も用意する方が良いかもしれませんね。ちょっと何か考えてみます。気長にお待ち頂ければ幸いです。

🥐Re:5231◆独自で検索窓を作った場合でも、てがろぐ側の検索機能を使って検索するなら(=URLに ?q=検索語 を付ける形のURLにアクセスさせるよう検索フォームを作るなら)検索結果にも「下げる」投稿は表示されます。(※『設定方法:下げた投稿が表示される状況を選択する方法』の説明にある「全文検索時」項目がONに設定されているなら、ですが。)
てがろぐ側の検索機能を使わずに、何らかの方法で投稿を絞り込んで表示しようとなさっている場合は、その方法を具体的に説明して頂かないと何とも答えようがありません。いろんな方法がありそうに思いますので。
(ついでに、なぜ標準の [[SEARCHBOX]]ではダメなのかも教えて頂けると、今後の参考になってありがたいです。)
Icon of admin
質問です。てがろぐの「下げる」について、[[searchbox]] などを使わずに、独自で作った検索BOXや検索カテゴリリンクで一致したら表示させる方法はないでしょうか?
下げた投稿はHTMLには出力されないため一致しても表示することができず、方法が分からないのですが…
Icon of sakura
てがろぐスキン作成と配布を行っている者です。いつもてがろぐを楽しく使わせていただいております!

質問です。
[[GETURL:PICT:1]]で画像を配置したい場所があり、その画像にNSFWフラグがついていれば、imgのclass名に「nsfw」が出力されるようにしたいです。そういった書き方はありますでしょうか?

そういった書き方が無いようでしたら、ギャラリーモードと同じようにサイトマップモードでも、[[ONEPICT:1]]で画像を配置するときに「原寸画像へのリンク無し」設定が可能になると嬉しいです。こちらはもし可能であれば…という要望になってしまい申し訳ありません。

配置したい場所というのはサイトマップモード用のskin-onelog.htmlで、各投稿の画像を一つだけ表示したいと思っています。ギャラリーモードではなくサイトマップモードを使う理由は、投稿内の画像の有無にかかわらず一覧にしたいからです。どうぞよろしくお願いいたします。
Icon of sakura
4226です。
ご教示ありがとうございます、リンクを張る方向でで試してみます。
まだやり始めたばかりですが、たくさん機能があって楽しいです!使いこなせるように頑張りますね!
Icon of admin
5224です、お返事ありがとうございます。
できるかどうかわからないんですが、投稿画面から画像を添付して投稿するときにindex.xmlを書き加える処理をedit.jsでしたとしてもてがろぐの元々の機能でフラグ部分を書き換えられてしまいそうですよね…
うーん、何か良い手がないか考えてみます…
NO IMAGE
ね、ねむい……!(別件のトラブルシューティングで凄まじく時間を使った……!)

🌭Re:5226◆鍵入力窓を任意の位置に挿入した場合は、「その鍵入力窓があった位置(=『見えている区画』と『隠されていた区画』との境界位置)」にアンカーが挿入されます。この仕様を利用すると、その「5000文字ほど書いた後」の位置にジャンプするなり、見た目を変えるなり、何らかの対処ができるでしょう。
(例えば、<a href="#HiddenPoint">隠されていた部分の先頭にジャンプ</a>みたいなリンクを用意しておくような。)
詳しくは、カスタマイズ方法ページの『正しい鍵が入力された後、鍵入力フォームのあった位置に挿入されるアンカーのHTML』項目をご覧下さい。
Icon of sakura
最近てがろぐを設置したのですが、「鍵の入力フォームを任意の位置に」し、キーを入れると記事のいちばん上(1行目)に戻ってしまいます。
5000文字ほど書いた後の文章を鍵付きにしたいのですが、1行目に戻ってしまうのでまた読み直さなければいけなくなり四苦八苦しています。
設定かスキン、記事で何か必要な記述があるのでしょうか。ご教示いただけたら幸いです。

#質問
NO IMAGE
ホットドッグでもいい。それもないけども。(´・ω・`)🌭🌭🌭

🌭Re:5224◆文章投稿と同時に画像をUPする場合、その投稿が「下書き」や「鍵付き」に指定されていれば、画像にも自動的に「一覧外」フラグが付くという仕様はありますが、それ以外では画像情報の編集画面から設定するしかありません。
画像に対するフラグ等の情報は、画像インデックスファイル(=画像保存用ディレクトリ内に自動生成される index.xml ファイル)に記録されています。このファイルを編集すると、複数の画像に対するフラグを一括変更できるので便利な場面もあるかもしれません。
➡ 詳しくは、豆知識・FAQページの「大量の画像キャプションを一括設定(編集)したい場合は、XMLデータを直接編集すると楽かもしれない」項目をご覧下さい。
Icon of admin
てがろぐで画像付の投稿をするときに画像にNSFWや一覧外のフラグを付与することって今の所方法ないですよね……?
このフラグってどこで管理されているのでしょうか?
NO IMAGE
ホットケーキを食べたい気分。ないけど。(´・ω・`)🥞🥞🥞

🥞Re:5222◆てがろぐの自動バックアップ機能は、常に「直前の状態」をバックアップしますので、「しまった!上書きしたかも!?」と思った瞬間にバックアップをダウンロードすると、上書き前のデータが手に入ります。ただ、残念ながら、次に何かを投稿(または編集)してしまうとバックアップも上書きされてしまいますけども。^^;

🥞Re:5221◆元の質問は分かりませんが、たぶん完璧な回答になっていると思いますので特に何も補足することはないと思うんですが、私が自分のてがろぐで使っているパンくずリストは以下のような逆向きのアプローチなので参考までに記します。

スキン側:
~ <a href="/">[[FREE:TITLE:MAIN]]</a> <span class="pankuzuAdd">[[SITUATION]]</span>
CSS:
.pankuzuAdd:empty {
   display: none;
}
.pankuzuAdd::before {
   content: '> ';
}


SITUATIONに何もない場合、出力されるHTMLは <span class="pankuzuAdd"></span> のような空要素になるので、その場合には :empty疑似クラスでこの要素を消すことで、「>」を見えなくしています。
No.5222さんのは「必要な状況で追加されるように書く」アプローチで、上記の私のは「不要な状況で消えるように書く」アプローチですね。もちろん、どちらでも良いと思います。

🥞Re:5220◆当初はあまり意味がある機能だとは思っていなかったのですけども、実際に実装してみると、確かにボタンの位置が動かない方が便利だな……と思いました。(笑) ご活用下さい~。(╹◡╹)ノ
Icon of admin
すみません、自分の投稿記事を編集しようとして質問のほうを上書きしてしまったかもしれません😰?
もしそうだとしたら質問された方へお詫び申し上げます。大変失礼しました。
Icon of admin
>>5221
1)外側スキンの[[SITUATION:HTML]]の部分をパンくずリスト風に
<div class="breadcrumb">
   <span class="homelink">[[FREE:HOMELINK]]</span><!-- フリースペースで設定した「ページのフッタ部分に表示するリンク」・不要なら削除 -->
   <a href="[[HOME:URL]]">[[FREE:TITLE:MAIN]]</a><!-- てがろぐのトップへのリンク -->
   [[SITUATION:HTML]]
</div>

css(簡易)
.breadcrumb .situation {
   display: inline;
}
.breadcrumb > *:not(:last-child)::after {
content: '>';
}

でいかがでしょうか

2)“全件”の数を取得したい
トップ(何も選択しない場合)に表示される記事総数をJavascriptで取得して表示する方法です。
フリースペースに(スキンに直接書いてもいいです)
<span class="soukensu">総記事数:[[INFO:TARGETPOSTS]]</span>
<div id="result"></div>

javascript
<script>
fetch('./') // 同一ドメイン内の別ページ
.then(response => response.text())
.then(html => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const targetElement = doc.querySelector('.soukensu');

  if (targetElement) {
    document.getElementById('result').innerHTML = targetElement.outerHTML;
  } else {
    console.warn('指定のクラスが見つかりませんでした');
  }
})
.catch(error => {
  console.error('取得エラー:', error);
});
</script>

css
.soukensu { display: none; }
#result .soukensu { display: block; }


上記2件を試したものを https://10prs.com/tegalog-cms/ で見ることができます(2.の件だけわかりやすいようCSSを適用していません、カテゴリ「sampleA」などを選んで該当箇所を見てみてください)
ご参考になれば幸いです。
Icon of misaki
お世話になっております。結構前にdetailsの折りたたみがほしい…と要望したことがあったのですが、とうとう実装されてて本当に嬉しいです。ありがとうございます!これからも活用させていただきます。
NO IMAGE
Google NotebookLM(AIリサーチアシスタント)に、てがろぐ公式ヘルプのURLを指定して読ませたら、カスタマイズ方法等の質問に会話形式で答えてくれるチャットAIになる。……という話を4月20日にしましたが、当時は作成したNotebookを共有する方法がありませんでした。その共有機能がどうやら今日実装されたっぽいので、共有してみます。
てがろぐ解説 notebook (使うには、Googleアカウントが必要だと思いますが、無料で使えます。)#🌱豆知識

Bluesky

ただ、これはヘルプの書き方や構造の問題もありそうですが、実際には解説は存在するのに「ない」と回答されることもありますので、(返ってきた解説自体は参考にできそうですが)「ない」と言われた場合には信用しないで、質問を変えるか、もしくは自力でWebをご覧下さい。(笑)
「こう質問したのに、適切な回答はなかった」みたいな情報があれば教えて下さい。もしかしたら、ヘルプドキュメントの改善の参考になるかもしれませんので。

※これは、リアルタイムにWebから情報を取ってくれるわけではなくて、ソース(資料)としてURLを指定した瞬間のHTMLソースからテキストデータを抽出して取り込む仕様っぽいので、(私が今後もメンテナンスをすれば別ですが)2025年6月3日時点のヘルプドキュメントを元にして回答されます。
Icon of admin
>5213 大丈夫です!ありがとうございます!
ブラウザによって改行処理が違うんですね。知りませんでした!
Icon of admin
5209の者です。ご回答有難うございました!
『リンク先のWebページにTwitter Cardの指定があって、そこで大画像が指定されている』と言うことが可能性として高いんですね。モヤモヤと「何故?」という疑問を携えていたのでスッキリいたしました。
今も「CARD-S」や「CARD-L」の記述を使わせて頂いておりますので、そちらを利用させて頂きます。
細やかな疑問にお答え頂き、本当にありがとうございました。
Icon of admin
>>5215
5214さんとは別人で、Blueskyのアカウントを持ってない者です。
Androidスマホのブラウザから、5215のにししさんの埋め込みは両方とも画像つきで見えてます!
NO IMAGE
ジャーマンポテトを食べました。再び。🥔🥔🥔

🥔Re:5214◆なるほど、Bluesky側の個別ページにはOGPが含まれているんですね……! 有用な情報をありがとうございます! なお、私の投稿で試してみたところ、単純にブラウザのアドレス欄に表示される(個別投稿の)URLを使っても埋め込めました。(もしかしたら、そのアカウントの設定によって異なるのかもしれませんが。)

▼Bluesky上の個別投稿のURLを使用:
(Loading...)...

▼Bluesky側の「投稿を埋め込む」機能から抜き出したURLを使用:
(Loading...)...

OGPがあるだけでなく、Twitter Cardの指定もあるんですねえ。(「大画像」が指定されていました。)
Icon of sakura
現在のてがろぐにある機能でBlueskyの投稿を埋め込む方法があるか模索していたのですが、てがろぐに最近実装された「OGPカード」の機能で、埋め込みに近いことができると気づいたので、共有させていただきます。既出でしたら申し訳ございません。

■前提条件
  • Bluesky上の「投稿を埋め込む」機能を利用します。パソコンのブラウザでBlueskyを表示すればこの機能はあるのですが、BlueskyのAndroidアプリではこの機能がないかもしれません。iPhoneは確認できておりません。
  • 埋め込みたいポストのBlueskyアカウントで「アプリがログアウトしたユーザーに自分のアカウントを表示しないようにする」設定にチェックが入っているとBlueskyからの埋め込み用タグが提供されませんので、この方法が使えません。
  • 画像のあるポストを埋め込んだ場合、最初の1枚だけがOGPカード内に表示されます。


■手順
  • 埋め込みたいBlueskyのポストの右下の「…」を押す
  • 開いたメニューから「投稿を埋め込む」を押す
  • 「コードをコピー」ボタンを押す
  • コピーしたテキストを、お使いのてがろぐの投稿フォームかメモアプリ等に貼り付け
  • 「/post/」で検索し、それが含まれるURLをコピー(末尾の ?ref_src=embed はあってもなくても大丈夫なようです)
  • てがろぐで「OGPカード」ボタンを押し、コピーしたURLを貼り付け


OGPカードなので、画像1枚と一定の文字数しか載せられず、完全な埋め込みの代替にはならないと思いますが、こんな投稿してるよ!のアピールには多少なるかなと思いました。

もしこの方法はあまり良くないなどのご指摘がありましたらお寄せいただければ幸いです。どうぞよろしくお願いいたします。

■フリースペース:

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン:標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキンてがろぐCGIの配布ページに戻る

編集

■複合検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

■新着画像リスト:

Perlのバージョンを上げる設定(さくらインターネット)

全321個 (総容量 36.37MB)

■日付一覧:

■日付検索:

■カレンダー:

2025年6月
1234567
891011121314
15161718192021
22232425262728
2930

■最近の投稿:

最終更新日時:
2025年9月1日(月) 02時08分01秒〔1時間前〕

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「昔のツイッターっぽいスキン(ブルー)」です。他に、 標準スキン昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る