写真の拡大表示について

はてなブログの「編集(見たまま)」で投稿した写真をブログを表示して,その写真にカーソルを合わせると「拡大」マークが現れる。そこでクリックすると,写真が拡大すると思ったら,ほぼ同じサイズで表示されるだけだった。なお,スマホ画面では,このような拡大表示はされず,常に画面の横いっぱいに表示されるようなので,以下はPC表示についてまとめる。

まず,「編集(見たまま)」で写真を投稿すると,次のようになる。

このHTMLは,次のようになっていた。

<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gzutetsu/20231104/20231104123916.jpg" width="600" height="400" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>

この写真は,はてなフォトライフでは横1200pixelで保存していて,その写真のURLは,

https://cdn-ak.f.st-hatena.com/images/fotolife/g/gzutetsu/20231104/20231104123916_original.jpg

となっている。

そこで,上のURLの「????.jpg」を「????_original.jpg」に修正してみた。

<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/g/gzutetsu/20231104/20231104123916_original.jpg" width="600" height="400" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>

この写真をクリックすると,拡大して表示される。このような投稿が簡単な選択で可能になっているとよいのだが,よくわからなかった。なので,手動で修正するか,HTMLファイルを生成するスクリプトをつくるか。そのいずれかでやってみようと思う。

次に,「編集(はてな記法)」で写真を投稿した場合はどうなるのか。「編集(はてな記法)」で写真を投稿すると,次のような記述になる。

[f:id:gzutetsu:20231104123916j:plain]

ただし,引用で記述しても写真が表示されてしまうので,ここでは最初のf:を全角文字にした。

これに「_original」を追加してもうまくいかない。「編集(見たまま)」での投稿を,「編集(はてな記法)」で編集できればよいのだが,「編集(見たまま)」で編集した投稿は,「編集(見たまま)」でしか編集ができないみたいだ。「編集(はてな記法)」での解決方法はわからなかった。

なお,「編集(見たまま)」での記述で,「:plain」を「:original」にしてもだめだった。「:image」にすると,クリックしたときに拡大表示ではなく,はてなフォトライフの写真をそのまま表示するようだ。これは「はてな記法の一覧」にも書かれたあった。

[f:id:gzutetsu:20231104123916j:image]