てがろぐ - Fumy Otegaru Memo Logger -

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

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

or 管理画面へ

カテゴリ「情報」に属する投稿49件]2ページ目)

🍘作らないものの話
ありがたいことに最近はユーザさんも増えてきましたので、「何を作らないか」についても語っておく方が良いのかなという気もしまして、ちょっと長くなりますが語ってみます。そのうちFAQにまとめようと思いますが、とりあえずここに。

長々と書くほどの話ではなくて、要するに『利便性と手軽さの両立はなかなか難しいよね……』というだけの話なんですが。

■スキンが増えて欲しい
今のところ、てがろぐのパッケージに含んでいる標準添付スキンは9種類(モード別も合わせれば12種類)あるわけですが、私個人でこれ以上増やすのは(管理の面で)なかなか難しいかな、と感じているのですよね。
なので、できるだけたくさんの方々がスキンを作って配布して下さると(その他のユーザさんへの選択肢が増えるので)嬉しいな……と思っています。
で、そのためには、『スキンを作るハードルは低い方が望ましい』と考えています。(WordPressのテーマとか作るのめちゃくちゃ大変ですよね。)畳む


■スキン側の仕様が複雑にならないようにしたい
WordPressのように管理画面上からいろいろカスタマイズできれば確かに便利かもしれないのですが、そういう仕組みを用意すればするほど、スキン側の仕様が複雑になってしまって、スキン製作の手間が増えてしまう問題があります(たぶん)。
何でも至れり尽くせりなWordPress等CMSのテーマを作るのが大変な理由は、テーマ側に配慮しないといけない要素が莫大だからですよね。(いや、まあ、もちろんツールそのものの規模も全然違うわけですから、今のてがろぐがどれだけ機能を増やしたところで、スキンがあそこまで複雑・大規模になることはありませんけども。)畳む


■管理画面で何でもしようと思うと(たぶん)際限がなく、スキンが複雑になる
仮に、掲載要素の「表示/非表示」が管理画面上で選べるようになったとしても、それだけでは掲載位置や掲載順序は変化しませんし、もちろんレイアウトも変わらなければ配色も変わらないので、ほとんど自由度は上がりません。
そうすると、次には「掲載順序も管理画面から選べるようになって欲しい」、「配色も管理画面上で指定できるようになって欲しい」……というような要望が出てくると思うんですよね。
そうなると、だんだんWordPress的になってきて、管理画面そのものも複雑になる上に、その設定を反映できるスキンを製作する手間も跳ね上がると思います。(管理画面で指定された順序や配色が表示に反映されるようスキンを作るのはたぶん大変になるでしょう。)畳む


■スキン製作の手間を低く抑えたい(同時にカスタマイズの手間も低くなります)
てがろぐは利用者総数も多くないツールなので、あえて莫大な手間を掛けてまでスキンを作って配布しようとはあまり思われないでしょう。
今、てがろぐのスキンを作って配布して下さっている方々も、「作るのが簡単だから作ってみた」というケースも多々あるのではないかと思っています。
なので、(管理画面上の設定をスキンに反映する仕組みが複雑になるなどして)スキン製作の手間が増えれば増えるほど、第三者がスキンを作ってくれにくくなるだろうという懸念があります。
なので、「スキン製作の手間は低く抑え続けたい」と考えています。

※もちろんそれは、(配布を前提にしたスキンでなくても)多くのユーザさんにとって「自分用のスキンのカスタマイズも楽にできる」というメリットにもなります。畳む


■できるだけシンプルに留めたい
もちろん機能の増加はしたいと思っているのですが、しかし、できるだけシンプルにも留めておきたいと思っています。(まあ、現状を「シンプル」と言えるかどうかはよく分かりませんが。^^; 少なくとも大規模なCMSに比べれば、よっぽどシンプルなことは間違いないでしょう。ファイル数も少ないですし。)
なので、管理画面上から表示/非表示を切り替えたり、掲載順序を入れ替えたり、配色を指定したり、といった大規模CMS的な機能は用意しない方針でいます。

※とはいえ、スキンに書きようがないものについては、管理画面上から出力仕様やON/OFFを切り替えられるようにはなっていますが。
  • 例えば、「日付境界バー」は日付の境目に出てくるので、スキン側で「ここ」とは位置を指定できません。
  • ナビゲーションリンクは、(てがろぐでは一覧表示も単独表示も共通のスキンなので)スキン側で状況を判別しての出力調整ができません。(※今はCSSで見えなくできますが、昔の仕様はそうではなかったので。)
そういうものは、問答無用で強制出力されるよりは、管理画面から表示/非表示を切り替えられる方が良いでしょうから、そう作っています。(※CSSで見えなくする手があっても、無駄なHTMLは出力されない方が望ましいですし。)畳む


■HTMLから不要部分を削除する程度のスキルはあることが前提
てがろぐに限らずフリーCGIはたいていそうだと思いますが、HTMLを編集する程度のスキルはあることが前提のツールです。そこはたぶん、今後も変わらないです。
「機能を増やしたい」とは思っていますが、「WordPressのようにしたい」とは思っていないので。設計思想の違いと言っても良いのかもしれませんが。(まあ、規模も全然違いますけども。)

せっかく独特の有用さがあったのにFacebookに似せすぎてユーザ離れを起こしたmixiのようにはなりたくないと思っています。(^_^;)畳む


■スキンHTMLから要らない部分を消すのは本当に簡単
スキンHTMLから不要な部分を削除したり順序を入れ替えたりするのは、本当に大したスキルは要らず簡単ですから、そこはなんとか頑張ってHTMLを編集できるようになって頂くのが一番だと思っています。(どうしてもそれを避けたい場合は、WordPressのような至れり尽くせりのツールを選択する方が幸せになれると思います。)

要らない部分は、ただ消せばいいだけ、なんです。ほとんどスキルは要りません。
少なくとも標準添付の各スキンには、わりと詳しめにHTMLソース内にコメントを加えて「ここが何々の部分ですよ、ここは何々の部分ですよ」と示してありますから、消すのにスキルはそれほど要らないと思います。(必要なのは、せいぜい削除範囲を見極める能力くらいでしょうか。それもインデントで示してありますから、把握は難しくないと思います。)

標準添付の各スキンを、あえて「機能全部盛り」な状態で作ってあるのは、そのためなんです。
  • 白紙に近い状態から「必要なものを加えていく」タイプだと、最初に「何をどうやって書き足せば良いのか?」を調べる必要があるのでハードルが高いですよね。(そもそも、「何を付け加えられるのか?」の選択肢も最初には全然分からないわけで。)
  • でも、逆に「全部盛りの中から不要な物を消していく」タイプだと「ただ消せば良いだけ」なので話が簡単です。

なので、カスタマイズといっても「消すだけ」なら簡単なハズですから。まずは試してみて下さい。畳む


■CGIの設置ができるなら、HTMLの編集も絶対にできる!^^;
というか、CGIの設置ができるスキルがあるなら、それくらいのHTML編集は絶対にできます!
だって、HTMLを「書け」と言っているわけではなくて、「消すだけ」ですから。

しかも、標準添付スキンのHTMLソース内にはコメントが日本語で書いてありますから!
ここまで書いてあって、しかも、自分で用意した個人サイトにCGIの設置すらもできているのに、スキンHTMLから不要部分の削除だけはできない、……という人が居るとはあまり思えないんですよね。^^;

なので、もし「自分はスキルがないのでスキン編集は難しいはずだ」と思って(思い込んで)いるなら、まずはスキンHTMLをテキストエディタで読み込んでみて、中を見てみて下さい。
CGIが設置できたのなら、それくらいは難なくできるでしょう。
すると、スキンHTMLの編集も、意外と簡単だと分かるのではないかと思います。

だって、それでもどうしても「消すことすらもできない」と言われる場合、その人はそもそも個人サイトを作れていないと思うんですよね……。^^;
「個人サイトを用意する」という最初のハードルを越えられている人なら、スキンHTMLから不要な部分を消すくらい、絶対できると思うんですよ。(^_^;;;

※いや、本当にそのスキルが今はなかったとしても、「個人サイトを用意する」という気力がある時点で、HTMLから不要な部分を消せるようになるスキルくらい、あっという間に身につけられると思うんですよね。^^;畳む


■利便性と手軽さの両立が難しい場合は、手軽さを取る
結局、「管理画面上で何でもできる」ことと「スキン(HTML+CSS)ソースがカスタマイズしやすい」こととは、トレードオフの関係になるのではないかな……と思っています。全部が全部そうだとは限りませんから、スキン側のシンプルさを維持したまま管理画面でいろいろできるようにできるなら、そうしたい気はあるのですけども。(ただ、あれもこれも試す余裕があるとは限りませんので、「それは複雑になるのではないかな?」くらいの疑念を持った段階で、詳しい検討を保留にすることもありますが。)畳む

管理画面に設定を増やしたがためにスキンが作りにくく(カスタマイズしにくく)なった、ということにはならないようにする方針で居ます。
なので、管理画面上から装飾やレイアウトに手を出すような仕組みは、(よほど何かシンプルさを保てるうまい方法を思いつかない限りは)作らない方針だと解釈して頂いておくと良いのではないかと思います。
畳む

by nishishi. 情報 <4042文字> 編集

てがろぐでは、投稿内に含まれる1つ目の画像をOGPの og:image に出力する機能がありまして、デフォルトで有効になっています。
この機能では、投稿内にある1つ目の画像を問答無用で採用するので、1つ目の画像が「Twitter側がCardに求める様式」に該当していない場合は、Twitter Cardには画像が表示されないことになります。#🌱豆知識

一番よくありそうなケースは、SVGな気がします。Twitter CardはSVG形式の画像をサポートしていないので、SVG画像が1枚目にあるとTwitter Cardに画像は出ません。WebPは使えます。
JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
https://developer.twitter.com/en/docs/twitter-for-webs...

あと、Twitter側が指定している条件は下記の通りです。

▼summary(小画像の場合):Twitterのドキュメント
Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms.
➡ 縦横比 1:1、最小サイズ 144x144、最大サイズ 4096x4096 ピクセル。画像サイズは 5MB まで。画像は正方形にトリミングされる。

▼summary_large_image(大画像の場合):Twitterのドキュメント
Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size.
➡ 縦横比 2:1、最小サイズ 300x157、最大サイズ 4096x4096 ピクセル。画像サイズは 5MB まで。

by nishishi. 情報 <1100文字> 編集

てがろぐ一式をサーバにUPした後、「どんなURLでアクセスできるのか分からん」とか「404エラーになったり500エラーになったりする」という場合は、とりあえず tegalog.cgi ではなく skin-cover.html を表示してみると良いかもしれません。

https://なんとなく想像するパス/tegalog.cgi ではなく
https://なんとなく想像するパス/skin-cover.html のように。

それで、
  • skin-cover.html すらも 404 Not Found エラーになるなら、間違いなくURLが違います。
    • その場合は、なんとかして正しいURLを探る必要があります。
  • skin-cover.html は表示されるなら、URL自体は正しいです。

「404エラーになったり500エラーになったりする」という場合、可能性としては「そもそもアクセスするURLが間違っている」場合と、「URLは合っているが動作していない」場合とがありますので、まずは「そのどちらなのか」を先に確定させる方が望ましいと思います。(アクセスできない原因が1つとは限りませんから、一気に解決させようとせずに、1つずつ可能性を潰していって特定する方が近道だと思います。)

by nishishi. 情報 <594文字> 編集

日付境界バーにデフォルトで表示される2つのボタンのうち片方(または両方)を非表示にしたい場合は、
管理画面の[設定]→[ページの表示]→【ページの表示/全体】→[▼日付境界バーの挿入位置]→[バーに表示する機能]で、
  • この範囲を逆順で表示するリンク
  • この範囲をファイルに出力するリンク(エクスポート機能)
のチェックをOFFにしてくだしあ。 #🌱豆知識

by nishishi. 情報 <182文字> 編集

ご報告に感謝致します。

🧀Re:3438◆なるほど、スペースが2つ入っていましたか……。もしかして『画像リンクに独自のclass属性値を追加』にチェックが入っていて、なおかつ直下の「class="  "」の入力欄は空っぽになっていたりしないでしょうか?(下図の緑色矢印の先です。その条件だと、こちらでも不具合が再現しました。)その場合、『画像リンクに独自のclass属性値を追加』のチェックをOFFにすると解決すると思います。

緑色矢印の先が空欄で、その直上のチェックボックスがONのとき
緑色矢印の先が空欄で、その直上のチェックボックスがONのとき


画像をリンクにするa要素部分は、正確には <a class="● ▲ ■" ~> のように3種類のclass名が出力されるようになっています。●はimagelink固定で必ず含まれます。▲は『画像リンクに独自のclass属性値を追加』のチェックがONの時に限って直下のテキスト入力欄に設定された文字列が出力されます。■には画像に付加されたフラグがある場合に限ってフラグに対応する文字列(nsfwやnolisted)が出力されます。なので、●は必ず出力されますが、▲と■は状況によって出力されたりされなかったりします。

このとき、『画像リンクに独自のclass属性値を追加』にチェックが入っている状態で、直下のテキスト入力欄が空っぽだと、● ▲ ■ の「▲」が0文字になるため、たしかに空白が2つ連続で挿入されてしまいます。通常のHTMLならそうなっても問題ありませんが、別の設定項目『空白の連続を再現 (半角空白文字の連続をそのまま見せる)』がONの場合(※デフォルトでONです)には、連続する2つ以上の空白が&nbsp;という文字実体参照に変換される機能が働いてしまって(本当は働いてはいけないのですが)、それが悪影響を及ぼしてしまうのだと分かりました。(^_^;;;
ううーん、そんな問題があったとは……。今までは(画像フラグの実装前までは)ここに2種類のclassしか入らなかったので、空白が2つ以上連続する状況があり得なかったから問題なかったのでしょうね。次のバージョンで仕様を修正します。畳む


とりあえず今のバージョンでは、
🍩解決策1:『画像リンクに独自のclass属性値を追加』のチェックをOFFにする。
🍩解決策2:『画像リンクに独自のclass属性値を追加』直下のテキスト入力欄に半角英数字を1文字以上書く。
🍩解決策3:『空白の連続を再現 (半角空白文字の連続をそのまま見せる)』のチェックをOFFにする。
……のどれかで解決はできます。(どれか1つだけで大丈夫です。)

ご報告をどうもありがとうございました!
これも絶対に誰かから報告されないと気付かなかったでしょうね……。(^_^;;; 「スペースが2つ入っていた」という情報が重要なヒントになりました。ありがとうございます。

by nishishi. 情報,回答/返信 <1182文字> 編集

ご質問を頂きましたので、カスタマイズ方法ページにも回答を書いておきました。#🌱豆知識
➡『先頭固定機能を使いつつ、最新の1件を別ページに埋め込みたい場合の方法(『あるスキンの出力結果を別のページに埋め込む方法』の補足)

SSIやPHP等を使って「最新の1件」を別ページに埋め込んでいるとき、先頭固定機能も同時に使うと、そのままでは「先頭固定された投稿」だけがずっと固定的に埋め込まれてしまって役に立ちません。^^; そんなときには、「表示条件が限定されているときには先頭固定機能は働かない」という仕様を利用するとうまくいきます。……という解説を加えました。

by nishishi. 情報 <281文字> 編集

先月から実施中の「てがろぐユーザアンケート」について、今月10日に回答数67件の時点で一旦集計してブログ記事で紹介しました。
その『稼働サーバ』集計のアップデート版を掲載します。回答総数は78件(※レンタルサーバ名の記述がない回答を除く)です。
20221124215946-nishishi.png
ご協力下さった方々、どうもありがとうございます。これらのデータを元に、昨日レンタルサーバ別のセットアップ方法各ページを公式サイトに加えました。
アンケート自体は今後も継続して受け付けております。)

各レンタルサーバの内訳は以下の通りでした。
  • さくらインターネット:ライト11、スタンダード7
  • リトルサーバー:ミニ5、ワード4、リトル2、ビッグ1、不明1
  • ロリポップ:エコノミー3、ライト8、ハイスピード1
  • スターサーバー:フリー4、エコノミー2、ライト1、ハイスピード2
  • XREA:全員Free
  • mixhost:スタンダード2、プレミアム1
  • Just-Size.Networks:サブドメイン2、エコノミー1
ほかは、契約プランが1種類だけか、回答者が1人だけか、プランの記載がなかったかです。

ブログ記事中で紹介した集計結果から減っているのがあります(ロリポップとスターサーバーが1ずつ減っています)が、集計がミスっていたようです。^^;

by nishishi. 情報 <553文字> 編集

てがろぐ設置方法の解説ページを拡充して、レンタルサーバ別のセットアップ方法(15件)を加えました。これからセットアップされる方は参考にして下さい。
https://www.nishishi.com/cgi/tegalog/setup/#howtoset
20221123235726-nishishi.png

by nishishi. 情報 <129文字> 編集

てがろぐベースのスケジュールカレンダー表示CGI「さんごよみ」Ver 1.0.0をリリースしました。
てがろぐと併せて(いや併せなくても良いのですけども^^;)ご活用頂ければ幸いです。

詳しい機能説明は、公式ページをご覧下さい。
また、開発進捗状況報告ページでも背景等を軽く紹介しています

by nishishi. 情報 <147文字> 編集

てがろぐ Ver 3.7.0 を公開しました。下書きプレビュー機能、下げる投稿機能、状況に応じた見出しのバリエーション選択機能や装飾仕様の追加、CGIの1行目を書き換えずに済む仕様改善などが主な更新点です。その他、細かな機能追加と(セキュリティ面を含む)不具合修正を含んでいます。
https://www.nishishi.com/cgi/tegalog/

アップデートするには、tegalog.cgifumycts.pl の2ファイルだけを上書きアップロードして下さい。
データファイルや設定ファイルは、すべてそのまま引き継げます。(Ver.2以下も含む過去のどのバージョンからでも)

※セキュリティ面に影響する不具合を修正しました(詳細は最下部)ので、できるだけ早めのバージョンアップをお勧め致します。(特に、不特定多数からのゲスト投稿を認める形態で運営している場合は早急なバージョンアップを強くお勧め致します。)

🆕 Ver 3.7.0の更新点(概要):
下書き投稿を(非公開状態のままで)プレビューできる機能を追加。
下げる(一覧外)投稿機能を追加。(通常では表示されないが、指定条件下や単独表示時のみ表示されるようにする機能)
状況に応じた見出しの表示バリエーション選択機能と装飾仕様を追加。
tegalog.cgi の1行目を、書き換えなくても済む可能性の高い「 #! /usr/bin/env perl 」に変更。
管理画面に表示される各種「削除ボタン」を(左寄せではなく)右寄せで表示できる設定機能を追加。
管理画面のページタイトル先頭に任意の識別名称を付与できる設定機能を追加。
●ログインされていない状況で非表示にするためのCSSを、スキン側のCSSに影響されないよう修正。
各スキンのRSS Auto-Discoveryの記述には、状況に依存しない [[RSS:URL:PURE:FULL]] を使うよう修正。
ルビを振られる側の文字列が半角英数だけの場合にルビが振られない不具合を解消。
リンクURLの後に半角空白が2つ続くと、リンク先が正しくなくなる不具合を解消。
不正な画像ファイルが投稿された際に、動作が極端に遅くなる問題に対処。(セキュリティ面での更新)

更新点について詳しい解説は、リリースノート(No.37)をご参照下さい。

なお、解説ドキュメントも増強してあります。主な増量ポイントはリリースノートからもリンクしてありますのでご参照頂ければ幸いです。

by nishishi. 情報,アップデート✨ <1066文字> 編集

#🌱 #🌱豆知識 #TES畳むT #´・ω・` #使い方

by misaki. 情報,テストテスト <30文字> 編集

≪ ご意見募集 ≫
ちょっと何やら開発当初の想定とは異なる動作をしているような箇所に気付いたのですが……。(^_^;;;

投稿単独ページへのURLを出力する [[PARMAURL]] という記法に対して、
一時適用中のスキンを維持しないURLを出力する [[PARMAURL:PURE]] という記法があります。
(リファレンス) https://www.nishishi.com/cgi/tegalog/custom/#customize...

これらの出力内容は、管理画面の[設定]→[ページの表示]→【投稿本文の表示/テキスト】→[▼テキストリンクの出力調整]→『一時適用中のスキンを維持できるリンクを出力する』チェックボックスで、動作を選択できます。

この  [[PARMAURL:PURE]] という記法は Ver 2.5.0 (2020年2月リリース)で追加されました。
過去バージョンのソースを確認したところ、
Ver 2.7.0 (2020年6月リリース)以降のすべてのバージョン(最新版まで含めて全て)では、下記のような動作になっているように見えます。

この『一時適用中のスキンを維持できるリンクを出力する』項目が……

▼ONのとき、
 [[PARMAURL]]      では、スキンが維持されるリンク
 [[PARMAURL:PURE]] でも、スキンが維持されるリンク

▼OFFのとき、
 [[PARMAURL]]      では、スキンが維持されるリンク
 [[PARMAURL:PURE]] では、スキンが維持されないリンク

上記の赤色で表示した部分は、私の想定とは異なる動作です。
私の当初の想定では、以下のような動作になることを考えていたのですが……。

▼ONのとき、
 [[PARMAURL]]      では、スキンが維持されるリンク
 [[PARMAURL:PURE]] では、スキンが維持されないリンク

▼OFFのとき、
 [[PARMAURL]]      では、スキンが維持されないリンク
 [[PARMAURL:PURE]] でも、スキンが維持されないリンク


これ、いまさら後者のように動作仕様を変更すると困る方って、いらっしゃいますかね……?
複数のスキンを併用してアクロバットに構築なさっている場合には影響ありそうなんですが。

Ver 2.7.0 (2020年6月リリース)から発生している問題なので、さすがに1年半も経っていますから、上記の動作を前提にして独自スキンを作っていらっしゃる方々も居るだろうな……と思いまして、今更修正するかどうか迷っています。

もしご意見がありましたら、ここにご投稿頂くなり、メールでお知らせ頂くなり、開発進捗状況報告サイトの当該記事にコメント頂くなりして頂けると助かります。

by nishishi. 情報 <1206文字> 編集

メールで頂いたご質問ですが、他の方々にも役立つ可能性がありそうなのでここでOPENにしておきます。

てがろぐ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」になる点にご注意下さい。

#🌱豆知識 畳む

by nishishi. 情報 <1683文字> 編集

CGIを設置する際に、最初に何らかの編集(例えば1行目の /usr/bin/perl のパスを変更するとか)が必要になる場合で、適当なテキストエディタがない場合は、もしかするとブラウザ版のVisual Studio Codeが便利かもしれません。ブラウザ上で動作するのでローカルには何もインストールしておく必要がありませんし、プログラミング目的のエディタなので改行コードや文字コードの維持が確実な点も安心ですし。メニューがすべて英語ですが、上書き保存は「≡」→「File」→「Save」でできます([Ctrl]+[S]でもできますが)。ただ、ブラウザによってはローカルファイルへのアクセスができない場合がありますから、普段お使いのブラウザが非対応の場合には別のブラウザを使う必要があります。Windows版ブラウザでは、ChromeではいけましたがFirefoxではダメでした。 ➡https://vscode.dev/
20211022142815-nishishi.png

by nishishi. 情報 <411文字> 編集

「誰が投稿したのかが微妙に分からない」状況も面白いかと思って運営してきましたが、事実上のサポートフォーラムとしても活用していることを考えると、やはり「私の発言であるかどうか」だけは明確に分かる仕様でないと誤解を招きかねないので、私専用のIDを作りました。

この試験場では管理者権限が付与されたIDもテスト用に開放していますが、どなたかが私の投稿を編集なさると、てがろぐの仕様では『書き換えたIDの名義』に変わるため、その後は「私のID以外の発言」であるように表示されますからすぐ分かります。(※私のIDはログイン画面のリストやユーザIDの一覧には出てきません。)もっとも、アイコンやIDが表示されないスキンもあるわけですが。なお、過去の発言分については、2,000件超の投稿すべてを1つ1つ確認するのはしんどいので(^_^;)、データファイルをざっくり斜め見て「自分の発言だよな」と思える投稿でだけIDを書き換えました。もしかしたら間違いもあるかも知れませんけども。(^_^;)

by nishishi. 情報 <441文字> 編集

カテゴリ限定表示やハッシュタグ限定表示の場合、従来は1種類ずつしか表示できなかったわけですけども、OR検索ができるようになったので、以下のような表示も可能になりました。

●「雑記(memo)」・「つぶやき(diary)」・「つぼやき(tsubo)」の3カテゴリをまとめて見る
#要望#質問 の2つのハッシュタグを合わせて見る

OR検索は、検索語を半角縦棒「|」で区切れば良いので、以下のように検索語を指定すれば済みます。

●検索語「memo|diary|tsubo
■検索語「#要望|#質問

AND検索との違いは下記の通り。

●AND検索「memo diary tsubo」=3つのカテゴリ全部に同時に属している投稿を表示。(※)
●OR検索 「memo|diary|tsubo」=3つのカテゴリのどれかに属している投稿を表示。(※)

■AND検索「 #要望 #質問 」=両方のハッシュタグが同時に使われている投稿を表示。
■OR検索 「 #要望|#質問 」=どちらかのハッシュタグが使われている投稿を表示。

※カテゴリIDが検索対象になっているのでこのような検索ができるわけですが、「カテゴリIDと同じ文字列が本文内に使われている投稿」も同時にヒットします。
畳む

by tomoyo. 情報 <546文字> 編集

カテゴリをアイコンで表示したい場合 #🌱豆知識

所属カテゴリの名称を表示する代わりに、カテゴリを表すアイコンを表示したい場合は、例えば以下のような方法があります。

▼方法1:(今のところ一番お勧めな方法)
以前に No.1881 で紹介しましたので、そちらをご参照下さい。

🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法2:簡単な(分かりやすい)方法(ただし、1投稿に1カテゴリしか設定しない前提)
内側スキンに、以下のようなimg要素を書きます。
<img src="/imagepath/[[CATEGORYIDS:IFEMPTY:nocat]].png" alt="[[CATEGORYNAMES]]">
すると、実際には以下のような出力になります。

●カテゴリ info (情報)に属する場合: <img src="/imagepath/info.png" alt="情報">
●カテゴリ diary (日記)に属する場合: <img src="/imagepath/diary.png" alt="日記">
●どのカテゴリにも属さない場合: <img src="/imagepath/nocat.png" alt="(※)">

なので、 info.png とか diary.png とか nocat.png とかのファイル名で適当な場所(上記の場合は/imagepath/)に画像ファイルを用意しておけば、それが表示されます。
ただ、この場合は、1つの投稿に複数のカテゴリが設定されている場合にはうまくいきません。(例えば、infoカテゴリと diaryカテゴリの両方に属している場合用に「info diary.png」を用意するなど、あらゆるパターンを用意していれば話は別ですが。^^; ※[[CATEGORYIDS:IFEMPTY:xxx]]を使う場合、カテゴリIDの区切りは常に半角スペースになります。なので、半角スペースを含むファイル名の画像が必要になります。詳しくは、解説ページの「カテゴリ関連要素」項目をご参照下さい。

(※)の部分にどう表示されるかは、管理画面の[設定]→[ページの表示]→【カテゴリの表示】→「カテゴリ名として表示する内容」項目の設定次第です。デフォルト設定では、何も表示されません。

🍘🍘🍘🍫🍫🍫🍪🍪🍪
▼方法3:(何らかの事情で方法1が使えない場合。複数カテゴリでも(一応は)動作に問題はない)
内側スキンに、以下のようなspan要素を書いておきます。
<span class="caticon"><span class="[[CATEGORYIDS:IFEMPTY:empty]]">[[CATEGORYNAMES]]</span></span>
すると、実際には以下のような出力になります。

●カテゴリ info (情報)に属する場合: <span class="caticon"><span class="info">情報</span></span>
●カテゴリ diary (日記)に属する場合: <span class="caticon"><span class="diary">日記</span></span>
●カテゴリ info と diary に属する場合: <span class="caticon"><span class="info diary">情報,日記</span></span>
●どのカテゴリにも属さない場合: <span class="caticon"><span class="empty">(※)</span></span>

上記の場合は、1つの投稿に複数のカテゴリが設定されていてもおかしくはなりません。
その上で、例えば以下のようにCSSを書いておきます。
/* アイコンサイズ等の共通装飾 */
.caticon span {
   display: inline-block; /* インラインブロック化 */
   width: 32px;  /* アイコンの横幅 */
   height: 32px; /* アイコンの高さ */
   background-size: contain; /* 背景画像を描画面積に合わせる */
   text-indent: -9999px; /* テキストを非表示にする */
}
.caticon .info { background-image: url("info.png"); }  /* info用画像 */
.caticon .diary { background-image: url("diary.png"); } /* diary用画像 */
.caticon .empty { background-image: url("empty.png"); } /* なし用画像 */

要するに、背景画像としてアイコン画像を指定しています。

この場合、1投稿に複数のカテゴリが設定されている場合は、どれか1つ(たぶん後に記述されているアイコン)だけが表示されるので、所属カテゴリ全部のアイコンを並べられるわけではありません。しかし、少なくともおかしな出力にはならないので、表示は可能でしょう。
なので、アイコン表示とは別に [[CATEGORYLINKS]] も記述しておいて、カテゴリの名称がテキストで列挙される空間も併せて用意しておく方が良いでしょうね。

🍘🍘🍘🍫🍫🍫🍪🍪🍪
以上、カテゴリをアイコンで表示する方法3つでした。
もしかしたら、もっと良い方法が他にあるかもしれませんけども。

とはいえ、何か公式に「カテゴリをアイコンで表示する」仕組みを用意した方が良いかもしれませんね。一応、方法1で問題ないのではないかとは思うのですが、CSSを自力で書く必要があるのがちょっと大変かもしれませんし……。
[[CATEGORYICONLINKS]]みたいな感じで、アイコン出力前提のHTMLを挿入できると良いですかね。
出力は、<img src="info.png" alt="情報"><img src="diary.png" alt="日記">……みたいな感じで、カテゴリの数だけ列挙されるような。

何かご要望あればお気軽にお知らせ下さい。(╹◡╹)ノ
畳む

by nishishi. 情報 <2618文字> 編集

テスト投稿はご自由にどうぞ。ご質問やご要望もお気軽にどうぞー。ただの呟き等もご自由にどうぞ~。(返信は遅くなることがありますので気長にお待ち頂ければ幸いです。) ※ツイートやWebページ等の外部コンテンツを紹介する場合は、本人による投稿なのか、第三者による紹介なのかの明記をお願い致します。
🤔てがろぐヘルプ群セットアップ方法使い方・設定方法カスタマイズ方法FAQ・豆知識総合目次HOME
開発放言

by nishishi. 情報 <216文字> 編集

てがろぐVer 3.0.0のリリースに合わせて、てがろぐCGIを設置する解説使用する解説カスタマイズする解説の3種類の専門ページも開設しています。こちらもぜひご活用下さい。

202009302308351-nishishi.jpg 20200930230835-nishishi.jpg 202009302308352-nishishi.jpg

特に、スキンをカスタマイズしたり自作したりするための解説は、カスタマイズ方法ページで詳しく解説しています。
また、てがろぐHOMEページ自体もリニューアルしています。

by nishishi. 情報 <178文字> 編集

DASHBOARD

■全文検索:

複合検索窓に切り替える

■複合検索:

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

■新着画像リスト:

特定のカテゴリに属する投稿の抽出Ⓑ特定のカテゴリに属する投稿の抽出Ⓐ最初のbrタグを増やす正規表現カレンダー・ヒートマップカレンダー・ヒートマップ挿入される画像表示記法の選択

全338個 (総容量 37.12MB)

■日付一覧:

■日付検索:

■カレンダー:

2023年3月
1234
567891011
12131415161718
19202122232425
262728293031

■最近の投稿:

■フリースペース:

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

編集

▼現在の表示条件での投稿総数:

49件

▼最後に投稿または編集した日時:

2026年5月20日(水) 22:22:14〔15時間前〕

RSSフィード

SunMonTueWedThuFriSat
May 2 0 2 4 2 0 0
3 0 1 2 2 8 3
Jun 2 8 2 1 0 4 2
3 0 3 3 0 1 2
6 3 4 1 6 2 2
4 2 0 4 2 1 1
2 3 6 2 6 0 0
Jul 6 1 1 0 0 1 2
1 2 1 2 1 1 2
1 0 0 0 1 0 0
2 0 0 1 5 2 3
Aug 6 4 0 1 1 1 2
6 3 0 1 0 0 3
3 8 1 1 3 1 1
0 2 1 1 3 0 2
3 3 2 0 4 1 2
Sep 0 1 3 3 1 0 3
0 1 1 0 3 1 0
3 6 14 1 0 0 0
8 2 3 1 0 0 2
Oct 6 1 0 0 1 0 3
0 0 1 0 2 0 1
0 0 0 3 5 0 0
0 0 0 0 2 1 0
Nov 0 1 0 1 0 5 0
1 4 1 0 0 0 0
2 0 1 2 2 0 0
0 0 0 0 2 1 1
1 0 5 3 7 0 2
Dec 4 2 0 2 1 0 0
1 2 1 0 0 0 0
0 0 1 0 3 2 4
1 7 4 1 3 11 2
Jan 3 2 2 9 2 1 11
3 3 3 5 6 3 3
13 6 2 1 1 3 8
4 4 5 1 3 1 5
Feb 5 4 2 2 2 3 0
0 5 2 2 0 0 0
1 0 1 0 2 1 3
0 4 4 3 3 0 3
Mar 4 0 5 1 0 1 1
0 0 1 3 1 1 2
1 1 1 4 0 1 2
1 1 1 0 1 2 0
3 1 3 4 0 2 3
Apr 1 1 0 1 0 4 5
7 3 2 1 2 1 1
2 0 0 1 0 2 2
2 1 3 1 2 0 9
May 4 7 0 0 1 2 1
2 2 2 3 2 0 1
1 0 0 4 0

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