後回しにしていたサムネイルの調整を色々と考えてみた

自分のサイトのブログカードを使ってみて思った。これはダメだ…と。

OGPで取得される画像がトリミングされた形で提供されるようになっていました。オリジナルの画像が提供されると思っていたのに…。

しかし実際の画像URLにはw1200-h630-p-k-no-nuが付加されていました。これは画像の縦横比を1.91 : 1にしておいた方が多くのデバイスで正しく表示されるためのようです。

BLOGGERの親切機能なのだと思うのですが有難迷惑なような気もする…。僕的にはオリジナルを提供してくれた方が面倒がなくて良かったのですが。まぁいまは知識がないからそう思っているだけで後々ありがたく思うのかもしれません。

とりあえずオリジナルの画像を表示できないか四苦八苦することに。まずはmetaタグで指定すれば良いのかな？とテンプレートに書き込んでみますが変化なし。たぶんちゃんとアドレスを指定できればいけるような気もしますが。次に検索を続けて下記のサイトを見つけました。

そして<b:include data='blog' name='all-head-content'/>を消して書き換えなきゃいけないのかな？と考える。長考をしたうえで少し違う気もするし知識が足りずに変更するのも危ない感じがしたので回避。

次に見つけたのがこんなページ。

もしかしてJSONの中身を書き換えなきゃいけないのか？と思う。このあたりでオリジナルの画像を表示することは諦める方向にシフトしていきました。

そうなると1.91 : 1の画像を用意するしかない。実際それが一番確実ではあります。ただ過去の記事の画像を変更するのが面倒に感じてなんとか回避したかった…。

僕は画像を投稿するときにおおよそ1 : 1になるように調節していました。なぜならブログの記事一覧とか人気記事のサムネイルがその方が綺麗に表示されたから。

当たり前ですよね。だって僕が使っているテンプレートではサムネイルの領域が正方形なのだから。ブログを始めた当初は1 : 1にしたら綺麗に表示されたしこれでいいか…と深く考えずに決めていました。

ただブログを書いているうちに段々と気づくことがありました。画像は2 : 1の方が調節しやすいし便利じゃないか？と。しかし面倒なことが嫌いな僕は気づかないふりをしていました。しかし…もうそんなことは言っていられない！ということでディスプレイと睨めっこすることに。

画像を1200 : 630で作成するのならばサムネイルの表示領域も2 : 1にするべきか…それともこのまま正方形でいくべきか。非常に悩みました。とりあえず一枚1200 : 630の画像と入れ替えてどんな感じになるのか確かめてみました。

一番上と一番下は正方形の領域に対してobject-fit: fillを指定して画像の縦横比をくずして引き延ばして表示したものです。coverでのトリミングはできればさけたいので。しかし許容範囲なようでなんとかしたいような…そんな感じです。

真ん中のものは領域も2 : 1とサイズを合わせているために違和感のない表示になっています。ただ少し気になるのがタイトルが窮屈になること。どうせタイトルが窮屈になるならとサムネイルを許容できる限界まで大きくしたのが一番下の画像ですが、たぶん選択しないと思います。

上の三つの候補からなら真ん中かな？と思っています。やっぱり引き延ばされた表示よりもちゃんと綺麗に表示したいですから。

ただ正方形の領域でも綺麗に表示する手段がないわけではありません。

上記の画像のように調整してから挿入すれば領域が正方形でも綺麗に表示できなくはありません。

左の画像は1200 : 630の画像を真ん中になるように上下に余白をつけて調整したものです。この場合は画像全体でみれば1 : 1になっていますので正方形でも綺麗に表示されます。ただ上下の余白が気になりますが…。ちなみにツイッターなどでの表示では2 : 1に調整され上下の余白はなくなります。

右の画像は正方形の画像の左右に余白をつけて1200 : 630の画像に調整したものです。こちらの場合は画像のリサイズで1 : 1にトリミングをすれば綺麗に正方形の領域に表示できます。ツイッターやらブログカードやら全てに対応できるのはこの形だけだと思います。これが僕にとっては二番目に有力な候補です。

ここまで考えてみて一番良いかな？と思っているのは表示領域を2 : 1に変えて対応することです。正方形にトリミングされた場合に画像が少し変になるのは気にしないことにします。僕のブログのOGP情報を利用するのは僕自身くらいですしね。

ただ、いますぐに全部の画像を変える気力はありません。疲れました。

というか全然記事が書けてないですし。ひとまずは応急処置として投稿記事や人気記事のサムネイルのリサイズ時にトリミングしないように該当部分を下記のコードに書き換えておきました。あとはobject-fit: fillに設定しておけばそんなに変な表示にはならないはず。いくつか画像が置き換わったら表示を変えようと思います。

<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 144)' loading='lazy'/>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 144) : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image' loading='lazy'/>

上記の三行目にあるコードは人気の投稿記事のサムネイル表示にloading='lazy'を書き忘れていたので追記したもの。詳しくは下記のサイトで。

しかし本当にややこしい。あれが1 : 1で…あれが2 : 1で…と頭の中がごちゃごちゃになりました。

ブログカードの方も一度設定したらいじらないで済むようにしたかったのですが、個別に設定した方がいいような気がしてきました。サムネイルが横長のときと縦長のときでCSSを別に用意して切り替えるのもありなのかな？う～ん悩む。悩むけど記事が書けないので思考はストップだ！