textboxは16pxに変更。
inputは検索窓が妙に大きくなってう～ん、になったのと、入力したらすぐ検索ボタン押すだろうということで一旦指定無しに。
Androidのズームが可能になった。

→完了。実際の出力は以下。
引用欄テスト

CSS内容は以下。
%にするのがミソだったんすね〜。あと結局maxついているのとついていないのの差があんまり分からない。max-widthが最大描写範囲（デバイスごとに小さくなったりする）ならmax-widthを48%、heidhtをautoとかじゃ駄目なんか？　100%にする理由なくないか？
何でこれにしたんだっけ。（2025/8/22）
→width:48%で画像サイズの48％を出力範囲の固定値とする。maxで出力範囲の最大値を100％にすることで画像サイズが小さかったり大きかったりしても同じサイズの正方形になるから以下のソースにしてたっぽい。
（max-width:48%のみだと、大きい画像と小さい画像が混合している場合、デバイスの画面が大きいと、小さい画像は原寸大で表示されて幅調整がきかないけど、大きい方は原寸大ではなく通常通り幅調整がきき、出力サイズがバラバラになる。要はサイズバラバラの画像を複数枚投稿した時に綺麗に正方形が並んでくれない。普段からそこら辺適当な自分には致命的。maxは原寸大で出せるときは原寸大、最大値を超えたとき初めて幅調整をするのでこんな挙動になるっぽい）
理屈は分かったけど固定値48％で最大値100％って直感に反するので直す。やるとしたら固定値100％の最大値48％ってことで、うりうり画面サイズ変えて検証してみたら問題なさげ。
あとheightについてはautoにしても問題なかった。
Javascriptポチポチするときに、修正版に修正する。(2025/8/22)
img {
   object-fit: cover;
   aspect-ratio: 1 / 1;
   height:48%;
   width:48%;
   max-height: 100%;
   max-width: 100%;
}

/* 修正版 */
img {
   object-fit: cover;
   aspect-ratio: 1 / 1;
   height:auto;
   width:100%;
   max-width: 48%;
}

装飾は以下。
details[open]がラベルを押下後の装飾指定になる。
/*アコーディオンメニューの装飾*/
summary{
   font-weight: bold;
}
details{
   border-radius:0.5rem;
   padding: 0.15em 0.5em;
   border:5px solid # 5977b3;
}
details[open]{
   height:auto;
   background:# 5977b3;
   border-radius:0.5rem;
   padding-bottom:4px;
}
.foldedarea{
   background:# 17253D;
   border-radius:0.5rem;
   padding: 0.5em 0.8em;
}

HTML、CSS、Javascriptで作成。
参考サイトはページ上端に戻るボタンや、下端に進むボタンの簡単な作り方 - Sakura scope。
ソースは以下。
HTML＆Javascript（onclickの後の＝は全角表示している）
<div class="scrollBtns">
  <!-- 上端移動 -->
  <a href="#" onclick＝"scrollbtn(0); return false;">
    <span class="arrow">▲</span>
  </a>

  <!-- 下端移動 -->
  <a href="#" onclick＝"scrollbtn(9999999); return false;">
    <span class="arrow">▼</span>
  </a>
</div>

<ｓcript>
 // ページ上端下端移動
 function scrollbtn( scpos ) {
   window.scrollTo({ top: scpos, left: 0, behavior: 'smooth' });
 }
</script>

CSS（PCとスマホで別々に設定、スマホ版を記載）
/*ページ上端下端移動*/
.scrollBtns{
   position: fixed;　　/* 出力位置固定 */
   bottom: 1rem;     
   right: 1.5rem;
   max-weight:3em
}

.scrollBtns a{
   display: inline-block;
   margin: 3px 0;
   padding: 0.4em 1em;
   border-radius: 0.5em;
   opacity: 0.6;　　/* 不透明度 */
   text-decoration: none;
   text-align: center;
   letter-spacing:0  /* 中央揃え用 */
}

.arrow{
   display:block;
   font-size:1.1em;
}

エスケープ処理で何とかなる。また全角の場合も単なる文字になる。よくよく考えてみれば<span>test</span>が何もしなくても表示されるから、てがろぐ自体にエスケープ処理が入っている気がするので403エラーの原因は括弧とかじゃない気がするっすね。タグとして認識されたらタグ部分が表示されないから。
多分根本的な原因はWAFルールの設定辺りかな～という認識。ざっくり調べたらscriptタグやmetaタグ、JAvascriptのon系列は、WAFルール（自分の場合はXSS辺りかも）で検知→403エラーになる……らしい。なのでサーバーパネルで設定しているセキュリティの設定周りが原因だと思われる。
そこらへん自作ルールが作れるほどの知識がないので適宜全角文字を使うのが早そう。元々自分用メモだしね～。
エスケープ処理はツール使って変換可能な模様。使用ツールは以下。
サルワカ道具箱 HTMLエスケープ・ツール