はてなブログでは設定をしていると、各記事の下部に関連記事が表示されます。
この表示でも十分いいのですが、今回は関連記事に表示されている画像を1:1から16:9に変更しようと思います。

「記事下に「関連記事」を表示します - はてなブログ開発ブログ」より引用

カスタマイズ方法

まずは以下のコードを「デザイン→フッタ」に貼り付けます。

<!-- 関連記事画像16:9にする -->
<script>
    var related_element = document.getElementsByClassName('related-entries-image');
    if(related_element != null){
        for(var i = 0; i <= related_element.length - 1; i++){
            var elementSrc = related_element[i].src;
            var newSrc = elementSrc.replace(/%3A/g,':');
            var newSrc = newSrc.replace(/%2F/g,'/');
            var newSrc = newSrc.replace(/https:\/\/cdn.image.st-hatena.com(.*)https:\/\//,'https://');
            related_element[i].src = newSrc;
        }
    }
</script>

次に以下のコードを「デザイン→デザインCSS」に貼り付けます。

/*関連記事画像16:9にする*/
.related-entries-image{
    width: 150px !important;
    aspect-ratio: 16 / 9;
}

画像の横のサイズはお好きに設定してください。縦のサイズを指定してもいいかもしれません。ご自由に。
これで終わりです。反映されているかどうか確認してみてください。
ここからはコードのちょっとした仕組みを紹介したいと思います。

簡単な解説

まず関連記事で表示されている画像のURLを見てみると以下のような形式になっています。

https://cdn.image.st-hatena.com/image/square/{なにかのコード}/backend=imagemagick;height=100;version=1;width=100/{https://画像のリンク.jpg}

このURLの一番最後の部分で指定してある画像を正方形に加工したもののURLがこれで、それを表示していると思われます。
つまり一番最後の部分だけを抜き出して関連記事内の画像URLを置換してあげれば解決でしょう。
しかし最後の部分のURLはエンコードされているのでデコードをする必要があるので注意です。

「指定してあるURLを取得→最後の画像URLを抜き出し→デコード(正規表現)→URLの置き換え」
この処理を関連記事で表示されている分だけ行えばいいのです。これで大きいサイズの画像が表示されるようになります。
そしてCSSできちんと表示されるように少しいじってあげれば完成です。

【はてなカスタマイズ】関連記事の画像サイズを16:9にする方法

カスタマイズ方法

簡単な解説