【カスタマイズ】アイキャッチを見やすくする

アイキャッチ画像は本来四角形に切り取られたものを長方形っぽくみせているだけなので、中央部分が拡大されたように表示される。かつ文字を入れたりしていると左右が切れてしまう。
というアイキャッチのサイズ感が合わない問題の解決策です。
カスタマイズ前のスクショは残っていないので、完成形だけトップページで確認してください。

カスタマイズ方法

下記のブログからまるっとコピペで使わせていただきました。
www.imuza.com

CSSの編集

ダッシュボードのデザイン→カスタマイズ（スパナマーク）→デザインCSSへ下記をコピペ

/* アイキャッチの全体表示用 */
.page-archive .entry-thumb {
    width: 100%;
    height: 436px;
}

フッター編集

デザイン→カスタマイズ（スパナマーク）→フッターに下記をコピペ

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

まとめ

10分もかからずに終わった。
マジで自分でカスタマイズ記事書いてくれてる人って神です。

これだけでトップページのアイキャッチが適正に表示されるはず（多少は切れる）。
ちなみにカテゴリーのページまでは適用されないようなので、その辺りの解決方法もご存知の方は教えてください。

この1年仕事忙しすぎて全く手を付けていなかったブログ。また最初から覚えないと。。。