20240911

まずはヘッダ。CSS 内に "200%" とか絶対数値書いてるのが原因。
次に画像。これは相対なんだけど "50%" というのはちいこい画面ではあまりにも不適。

ヘッダに関しては、そもそもちいこい画面で読むときにヘッダ部分というのは「手動で飛ばさなければならない空間」なので可能な限り小さいほうが良いのですよね。等倍で充分。PC 画面なら視線を飛ばすだけで良いので、ボディ部と独立してまとまっている視認性のほうが優先なんだけど。

画像の縮小については困りました。…ところ、「画像をウィンドウ幅に合わせて表示したいが最小・最大サイズを指定したい」という機能を実現する CSS がありました。スゲー。
画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS

img {
       width: 100%;   /* ※A */
   max-width: 850px;  /* ※B */
   min-width: 600px;  /* ※C */
}

widthプロパティ(※A:横幅)に値「100%」を指定した上で、max-widthプロパティ(※B:最大の横幅)と、min-widthプロパティ(※C:最小の横幅)を同時に指定しておきます。

上記のように指定しておけば、画像は描画領域の幅に合わせて自動的に拡大・縮小されるものの、最小サイズより縮小されることはなく、最大サイズより拡大されることもありません。

そもそもちいこい画面では縮小して貼る必要もさほどないわけなんですけど、さすがに PC/SP のどちらでアクセスしているかによって表示方法を変えるのは、静的 HTML では無理なのではないか。…と悩んでいたところ、メディアクエリという指定方法で実現できるっぽい。クエリの選択を表示領域(ブラウザ)の大きさにできる。スゲー。
【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法

■表示候補の画像をすべてimg要素で列挙するHTMLソース：
HTMLソースは以下の通りです。ここでは表示候補の画像が2つあるため、img要素も2つ記述します。それぞれの表示・非表示をCSSで切り替えるため、各img要素には別々のclass名を付けておきます。

<p class="resizeimage">
   <img src="mini.jpg" class="miniimage" alt="友枝記念公園">
   <img src="big.jpg" class="bigimage" alt="友枝記念公園">
</p>

■画面の横幅に応じて、画像の表示・非表示を切り替えるCSSソース：
表示領域の横幅が「600px未満の場合」と「600px以上の場合」とで画像を切り替えるには、CSSのメディアクエリを使って以下のように記述します。

img.miniimage { display: none; }   /* ※1 */

/* ▼表示領域が600px以上の場合 */
@media (min-width: 600px) {
   img.miniimage { display: none; }  /* miniを非表示 */
   img.bigimage  { display: block; } /* bigを表示 */
}
/* ▼表示領域が600px未満の場合 */
@media (max-width: 599px) {
   img.miniimage { display: block; } /* miniを表示 */
   img.bigimage  { display: none; }  /* bigを非表示 */
}

.resizeimage img { width: 100%; }   /* ※2 */

※1：メディアクエリの記述方法を解釈できないブラウザで、大小両方の画像が同時に表示されてしまうのを防ぐために、最初に mini.jpg側を非表示にする記述を加えています。

※2：画像サイズが表示領域（ブラウザのウインドウ幅や画面幅）に合わせて変化するように、画像の横幅を100％にしています。

こういうのをレスポンシブ web デザインというらしい。応答型なのに静的に記述できるのはとてもありがたいですね。
レスポンシブWebデザインの簡単な作り方

ふたたび3号ちゃんの写真でやってみましょう。

これは CSS で記述することなので、過去の記事について直すところはない……と言いたいところですが、実は画像を 50% 縮小表示しているのは個別に書いてあるので、これ除去しないといけない。除去だから一発ですが。また更新日時が壊れるなあ……
→どうやら CSS で記述したサイズ指定は HTML の記述に優先されるらしい。でもテンプレートからは外しておこう。

ヘッダ部分は独立した CSS ファイルを置いてあるので、それを分岐するだけ。
画像に対する指定なんですが、これ要素にクラス名を定義して、そこに適用しないといけないんだな……つまり
<p class=hoge><img src="huga"></p>
の hoge に対して適用される。さてこれを org-mode で記述するには……

……
…………
分からん……

でも画像を貼っておくと、published したときに勝手に
<div id=ランダムID class="figure">
で囲んでくれるぽかった。ラッキー！ というわけで "figure" に対して分岐。うまくいきました。