てがろぐ - Fumy Otegaru Memo Logger -

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

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

or 管理画面へ

No.5170, No.5123, No.50973件]

details要素+summary要素で実現される「折り畳む」機能を搭載した Ver 4.6.1β(未配布)の動作テスト。
折り畳み
折り畳み表示のテスト
こんな感じで見えます。

ラベルはその都度指定します
もちろん、1投稿内にいくつでも書けます。
入れ子にもできます
ただし、details要素はspan要素等のインライン要素の内側に書くとHTMLの文法的に正しくなくなるため、そのように文字装飾を書いてしまうと直前のCSSが意図通りに適用されなくなる問題がある点に注意が必要です。

JavaScriptなしで動作する点も良いですね。装飾はCSS次第で好きなようにできます。
ここの動作試験場では、標準スキンにしか(まだ)CSSを用意していません。が、details要素+summary要素はHTMLだけで動作しますから、CSSがなくても(単に装飾がないだけで)動作はします。

by nishishi. <401文字> 編集

テスト

CARD = TEST...
CARD-S = TEST...
CARD-L = TEST...
畳む


CARD = (Loading...)...
CARD-S = (Loading...)...
CARD-L = (Loading...)...
畳む

by nishishi. <143文字> 編集

ちなみにですが、使い方の説明にある [リンクラベル:CARD]URL の「リンクラベル」というのは、『「リンクラベル」の6文字を書く』という意味ではなくて、『そこに(OGPの情報が読み込まれる前の段階で見せたい)テキストを書いてね』という意味ですので。何らかの要因でOGPが読めなかったり、JavaScriptが正しく実行されなかったりした場合には、リンクラベルとして書いたテキストがカードのタイトルとして採用された状態で表示されます(ので、たとえOGPが読めなくてもリンクとしては正しく機能します、という仕様です)。
なので、リンク先の内容を表す簡潔な内容をリンクラベルとして書いておく方が望ましいと思います。

なお、全文検索の際には、投稿本文内に書いたリンクラベルだけが検索対象になります。(OGP情報は後からJavaScriptで合成しているだけなので検索対象になりません。)

by nishishi. <392文字> 編集

DASHBOARD

■複合検索:

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

■新着画像リスト:

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

全317個 (総容量 36.08MB)

■日付一覧:

■日付検索:

■カレンダー:

2025年5月
123
45678910
11121314151617
18192021222324
25262728293031

■最近の投稿:

■フリースペース:

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

編集

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

3件

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

2025年6月15日(日) 21:35:13〔2時間前〕

RSSフィード

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