Blogger をマークダウンで書く都合上、画像挿入の仕様について少し理解してみることにした。
## キホン なんにも考えずに画像を挿入すると、こんな感じのコードになる。 ``` <div class="separator" style="clear: both;"> <a href="https://blogger.googleusercontent.com/img/b/URL.png" style="display: block; padding: 1em 0; text-align: center; "> <img alt="" border="0" width="320" data-original-height="137" data-original-width="458" src="https://blogger.googleusercontent.com/img/b/URL.png"/> </a> </div> ``` 画像を入れるハコの div が生成され、その中に画像本体の img タグとその画像リンクの a タグが生成される。 個人的にはこの a タグが生成されるのが、本当に必要ないお節介だと感じているのだが Blogger 界隈の評価はどうなんだろうか
### div separeator クラスが付与されており、Blogger 標準の css が当てられている。 自分でいろいろ弄る場合は、場合は標準 css を無効化しておくか、クラスを消し飛ばしておくほうが安定っぽそう。 `style="clear: both;"` はレガシーはコードの名残で、現代では意味がない。
### a 画像をクリックしたときに拡大表示できるようにしてくれる。 たしかにありがたい機能ではあるが、テーマ側から js とかでモーダルにしたほうがイケてるんじゃないかと思う。 万人が使いやすいツールを目指すうえでこういう仕様にしていることは理解できるが、万人側じゃないモノとしては画像貼るたびに毎回 a タグを消すのが面倒すぎる。 そして、a タグを消したいというときに問題となるのが、なんかここにインラインの css が書かれているということ。 ここは要対策。
### img 画像本体。 alt は空が自動挿入されるので、必要なら書くという感じ。 加えて、Blogger が width だ data だいろいろ仕込んでいるせいでややこしくなっている。次の項で戦ってみます。
## vs.画像挿入 設計やコードがレガシーなこともあり、なんだかややこしい。 最終的な目標点として、div (separetorクラス) が行っている行間とかの整形と、a タグが行っている画像の拡大表示機能はテーマに任せ、ブログ本文で制御したい画像サイズや配置を img タグのみでどうにかするということにした。
### imgを詳しく見てみる img タグについている data や src を詳しく眺めてみる。
alt はスタイルに関係なし、border="0" はレガシーなコードの名残り、ということでこの２つは無視するとこんな感じ。 ``` <img width="320" data-original-height="1080" data-original-width="1920" src="https://blogger.googleusercontent.com/img/b/短めのランダム文字列/ありえないほど長いランダム文字列/s320/画像ファイル名.png" /> ``` これでいくらか理解できそうな見た目になったが、ここからが怪奇的な仕様をしている。
まず、`data-original-height/width` は意味がないが意味がある (？) 。 見た目上の意味は無いので消してしまっても全く問題ないが、その名の通り画像本来のサイズが書いてあるので「無意味だしとテキトーに消しちゃえ」とするとあとで困る可能性がゼロではない。(後述)
続いて src だが、ここが全てと言ってもいい。 `https://blogger.googleusercontent.com/img/b/短めのランダム文字列/ありえないほど長いランダム文字列/s320/画像ファイル名.png` 勘のいいガキ、および老若男女ならお気づきかっもしれないが、URLの中に s320 という怪しげな文字列がある。 そう、2320年発売の Galaxy S シリーズではなく、これが画像の大きさ指定になっている。
画像サイズ「小」設定のため例では s320 だが、「中」なら s400 、フルサイズなら s1600 になる。 s は「長辺」で、その後の数字は px。 つまり s320 は「長辺がs320px以下」という意味になる。 s0 で原寸大が取得できる。
また、s 以外のパラメータもある。 ・w200 → 幅を200px以下に ・h200 → 高さを200px以下に ・w300-h200 → 両方指定（アスペクト比維持） ・w300-h200-c → 300×200にクロップ（中央基準）
思ったよりなんかいろいろできるので便利そう。 で、これを弄るときに原寸大がわかるとちょっと便利なので、先ほど原寸データをテキトーに消すと困る可能性が無くはないと言ったのはこのため。
### 実用 テーマから img タグに中央揃えを当てておく。 ``` .post-body img { display: block; width: fit-content; margin: 0 auto; } ``` 大きさを適宜 s/w/h で設定し、左右寄せしたいときはインラインスタイルとかで応用。