--- a/examples/common/default/default.css	Fri May 24 06:40:03 2024 +0900
+++ b/examples/common/default/default.css	Thu May 30 23:03:07 2024 +0900
@@ -180,6 +180,61 @@
 p.filter {	/* is located after .blog_replies */
     margin: 0; padding: 0 1ex;
 }
+td.repl details summary:after {
+    display: inline-block; border: solid 1px #999; border-radius: 0.3ex;
+    margin-left: 1em; padding: 0 2ex;
+    background: ivory;
+    content: "Open/クリックして詳細";}
+td.repl details[open] summary:after {
+    content: "Close/閉じる";
+}
+td.repl details {
+    padding-left: 1em; border: #4444 solid thin; background: #aee4;
+    border-radius: 0.5ex;
+}
+td.repl div.info, td.repl div.warn, td.repl div.alert {
+    position: relative;  border: 1px solid; border-radius: 0.8ex;
+    border-left-width: 1ex; padding: 1ex 3em; margin: 0 0.5ex;
+}
+td.repl div.info:before, td.repl div.info:after,
+td.repl div.warn:before, td.repl div.warn:after,
+td.repl div.alert:before, td.repl div.alert:after {
+    position: absolute; content: "";
+}
+td.repl div.info:before, td.repl div.warn:before, td.repl div.alert:before {
+    left: 0.5em; top: 0.5em; width: 1.5em; height: 1.5em;
+    border-radius: 50%;
+}
+td.repl div.info:after, td.repl div.warn:after, td.repl div.alert:after {
+    left: 0.84em; top: 0.84em; width: 0.5em; height: 0.3em;
+}
+td.repl div.info {
+    color: #141; border-color: green; background: #cfc8; 
+}
+td.repl div.info:before {background: green;}
+td.repl div.info:after {
+    background: transparent; border: white solid; border-width: 0 0 5px 5px;
+    transform: rotate(-45deg);
+}
+td.repl div.warn {
+    color: #441; border-color: orange; background: #ffd8;
+}
+td.repl div.warn:before {background: orange;}
+td.repl div.warn:after {
+    border: 3px solid white; border-radius: 50%; width: 0.5em; height: 0.5em;
+    top: 0.8em;
+}
+td.repl div.alert {
+    color: red; border-color: red; background: #fdd8;
+}
+td.repl div.alert:before {
+    border: red 0.75em solid; border-radius: 0; top: 0.4em;
+    border-color: white red white red; width: 0; height: 0;
+    content: "";
+}
+td.repl div.alert:after {
+    display: none;
+}
 
 .blog_replies td.repatt {min-width: 12em;}
 .blog_replies td.hideauthor, .hide {display: none;}

--- a/s4-blog.sh	Fri May 24 06:40:03 2024 +0900
+++ b/s4-blog.sh	Thu May 30 23:03:07 2024 +0900
@@ -605,6 +605,8 @@
 行頭に iframe=URL でURL先を開く iframe
 行頭「* 」で箇条書、次の行頭空白で継続、行頭詰めると箇条書終わり
 行頭「1. 」で番号付、2行目以降も「1. 」で勝手に番号増える、行頭詰めで終わり
+行頭 <<< 「説明行」 の行から次の行頭 <<< まで折りたたみ説明
+行頭 !!!info から次の !!! の行まで情報ボックス !!!warn と !!!alert も使える
 [[#記事番号]] でs4内の記事番号に飛ぶリンク
 [[#検索キーワード]] でs4内の記事検索(記号はいくつか使えない)
 [[URL]] でURLへのリンク、        [[URL|文字列]]でアンカー文字列指定

--- a/s4-funcs.sh	Fri May 24 06:40:03 2024 +0900
+++ b/s4-funcs.sh	Thu May 30 23:03:07 2024 +0900
@@ -804,7 +804,47 @@
 	  s/^\n/<li>/; s,$,</li></ol>,;	# 箇条書を書き切って終わり
 	  H; x
 	}
-	x'
+	x' | summary_detail
+}
+summary_detail() {
+  # <<< One-line Summary
+  # ..collapsed blocks...
+  # <<<
+  foldprefix="<<<"
+  f=`echo "$foldprefix"|htmlescape`
+  sed -E \
+      -e "/^$f *(.+)/ {
+		s,,<details><summary>\\1</summary>,
+		\$ p
+		N
+		s/\\n//
+	}
+	/(^|\\/([uo]l|table)>)$f\$/ {
+		s//\\1<\\/details>/
+		\$ p
+		N
+		s/\\n//
+	}" | divbox
+}
+divbox() {
+  # !!!
+  #   ...section...
+  # !!!
+  #   -> <div class="info">...section...</div>
+  # Other class: !!!info  !!!warn   !!!alert
+  sed -E \
+      -e '/^!!!i(nfo)?$/ {
+		s,,<div class="info">,; $ p; N; s/\n//
+	}
+	/^!!!w(arn)?$/ {
+		s,,<div class="warn">,; $ p; N; s/\n//
+	}
+	/^!!!a(lert)?$/ {
+		s,,<div class="alert">,; $ p; N; s/\n//
+	}
+	/(^|\/([uo]l|table)>)!!!$/ {
+		s//\1<\/div>/; $ p; N; s/\n//
+	}'
 }
 acclog() (
   # $1=table, $2=rowid