ブログデザイン備忘録 ~一覧表示画像サイズの変更

1. 一覧アイキャッチ画像表示サイズについて

　今回ははてな一覧表示(カテゴリなど)されるアイキャッチ画像の表示サイズについて紹介する。アイキャッチ画像は編集オプションから記事中に張り付けられている画像から選択することができるが、一覧表示されている画像範囲と一致しないことが多い。

2. アイキャッチ画像の表示範囲

　アイキャッチ画像を記事内の貼り付けと同じように一覧に表示さするには画像は正方領域にする必要がある。特に横長、縦長サイズの画像をアイキャッチ画像として選択すると一部しか表示されず、画像が途中で切れてしまうことがある。そこで、アイキャッチ画像に使用する画像をあらかじめ正方領域で作成し、さらに記事中で不要であれば一度張り付けてアイキャッチ画像として選択してから削除するという方法がある。はてなブログ「一覧形式」の画像をオリジナルのものに変える - IMUZA.com　　結果的には当面はこの方法を採用しようと思う。

3. アイキャッチ画像表示サイズの変更

　デザインCSSやHTML(Javascript)の記述により一覧表示されるアイキャッチ画像の表示サイズを指定するという方法もある。（以下https://blog-support.jp/hatenablog-eye-catching-image/のコードを引用)

デザインCSSにアイキャッチ画像の表示サイズを指定する。今回は530px,180pxの横長画像を張り付ける。

.page-archive .entry-thumb {
    width: 530px;
    height: 180px;
}

フッターに次のHTML(Javascript)コードを追記する。

<script>
(function(){
    if(document.body.classList.contains('page-index')){
        var elements = document.getElementsByClassName('entry-thumb');
        var re = /https%3A%2F%2F.+\.jpg/;
        Array.prototype.forEach.call(elements, function(element) {
            var imageUri = re.exec(element.getAttribute('style'));
            element.style.backgroundImage = 'url(' + decodeURIComponent(imageUri[0]) + ')';
        });
    }
}());
</script>

（このコードでは画像はjpgのみ有効）

画像サイズの変更前は一覧表示は下のようになり、はみ出している。

画像サイズの変更後は一覧表示は画像全体を正しく表示している。ただし、アイキャッチ画像が大半を占めていて、記事の概要文の表示とのバランスが悪いという問題がでてくる。

横長の画像をそのまま表示しようとすると概要文とのバランスが悪くなることや、width,heightで良いサイズを見つけてもデザインCSSで記述するため今までアップロードしたすべてのアイキャッチ画像に適用されるため、すべての画像に関して問題なく表示できているかチェックする必要がある。デフォルトの正方領域の表示範囲のままで、アイキャッチ画像の方を調整した方が手間が少ない。