はてなブログ「Archiveページ」の画像もオリジナルのものに変える

はてなブログのトップページの表示形式を一覧形式にした場合にアイキャッチ画像が 500px四方にトリミングされる件で、その画像をオリジナル画像に変更して自由にサイズを決められるようにする Javascriptを以下のページで公開しています。

www.imuza.com

参考記事：はてなブログ「一覧形式」の画像をオリジナルのものに変える

で、この記事はいくつかのサイトでご紹介いただいていることもあり利用されている方もいらっしゃるようで、その際、アーカイブページの画像も変更できないかのお問い合わせをいただきました。

すでに個別にお答えしていますが、次のように変更すれば「Archiveページ」においてもアイキャッチ画像をオリジナルのものに変更できます。

※バグフィクスや改変に対応できなくなりますのでスクリプトは転載しないでください。

<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>

何を変更しているかといいますと、２行目、

    if(document.body.classList.contains('page-index')){
↓
    if(document.body.classList.contains('page-archive')){

としています。

はてなブログで該当ページがトップページなのか記事ページなのかなどを判断するには、bodyタグのクラス名をみることでわかります。ですので、そのクラス名で条件分岐させているということです。たとえばトップページであれば page-index 、アーカイブページであれば page-archive といったクラス名が bodyタグに付加されています。トップページを一覧表示にした場合には、page-index とともに page-archive も付加されますので、条件分岐を page-archive で振り分ければトップページもアーカイブページもアイキャッチ画像が変更されるということになります。

ただし、アーカイブページは記事数が30記事となりますので、画像の容量によっては読み込みが遅くなる場合があります。利用される方の判断でお使いください。