【はてなブログ】アイキャッチ画像見切れる！CSSコピペで解決！

こんにちは！

なんでも行き当たりばったり、石橋は叩いて笑え！

座右の銘は【何とかなるさ】のガッツです！

今回新しいブログテーマを『マテリアルぽっぷ』にしました！

とても見やすくてとっても満足！

▽『マテリアルぽっぷ』のメリット

www.okdkdk.com

▽『マテリアルぽっぷ』にしたらアクセス数が3倍になった！？

www.okdkdk.com

そして何よりカード型デザインが嬉しいし、アイキャッチ画像がメインなのが◎(はなまる)

ですが、はてなブログはトップページの表示を一覧形式にしたとき、

アイキャッチ画像が500px四方にトリミングされるのです！！

余計なことしないでくれよ～

見切れたアイキャッチ画像はかーなーりーダサい・・

一覧形式にするとアイキャッチ画像が見切れる

f:id:okeydokey-okitsu:20190423201348p:plain

ですが、後ほど紹介するJavascriptをコピペすれば、

アイキャッチ画像が見切れずにオリジナルのまま載せれます！

それでは早速アイキャッチ画像が見切れず、

オリジナルサイズのまま維持する方法をご紹介していきます！

アイキャッチ画像が見切れないようにするには！？

<script>
(function(){
    if(document.body.classList.contains('page-archive')){
        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>