トップページの「一覧形式」の画像をオリジナルのものに変える

サイトのデザインって、あれこれ手を加えてこれで良し！と思ったものでも、飽きてくるのか、しばらくすると変更したくなってきます。

このサイトはもう少し持ちそうなんですが（笑）、映画のレビューを書いている「そんなには褒めないよ。映画評」は、はてなブログを始めた頃に作った「Simple Responsive with Menubar」というテーマをベースにした随分前のものですのでさすがに飽きてきました。

で、全体のデザインはまだ構想中なんですが、ちょっとしたテクニックを紹介していこうと思います。

• トップページの「一覧形式」
• 画像が 500px 四方にトリミングされている
• オリジナル画像に変更する Javascript

01トップページの「一覧形式」

はてなブログProのトップページ表示は、全文形式と一覧形式を選べるようになっています。

これですね。どういう風に表示されるかといいますと、下の画像のようになり「一覧表示」と同じです。

テーマは公式の Evergreen です。

02画像が 500px 四方にトリミングされている

問題は画像なんですが、オリジナル画像ではなく、縦横 500px にトリミングされたサムネイルが使われます。デフォルトでは width: 120px; height: 120px; が指定され小さくなっています。

一覧表示ではいいにしてもトップページがトリミングされたサムネイルでは不都合だという場合にオリジナルを表示する方法をやってみました。

html と css は次のようになっています。

<div class="entry-thumb" style="background-image: url('https://cdn.image.st-hatena.com/image/square/8943960c664553d9f1fd0ab1bcef8f75d0aa8891/backend=imagemagick;height=500;quality=80;version=1;width=500/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Fausnichts%2F20180303%2F20180303161557.jpg');">
    </div>

.page-archive .entry-thumb {
    width: 120px;
    height: 120px;
    background-size: cover;
    float: left;
    margin-right: 10px;
}

これを見ますと、オリジナル画像を imagemagick に渡してサムネイルを作っているようです。幸いにして、エンコーディングされてはいますが、オリジナル画像のURIがありますので、それを取り出せばオリジナルを表示できそうです。

03オリジナル画像に変更する Javascript

（2018.6.21）jpg, png, gif 対応版が下記記事にあります。

（bug fix）はてなブログ「一覧形式」の画像をオリジナルのものに変える

（2019.2.25）Archiveページ対応版が下記記事にあります。

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

このコードは画像ファイルが jpg 以外の場合にエラーとなります。上のバグフィックス版をご覧ください。

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

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

この Javascript を カスタマイズ > フッタ に入れればトップページのサムネイル画像がオリジナルのものに変わります。ただし、画像の容量によっては重くなる場合がありますので注意してください。また、画像は background に貼り付けてありますので、下の例のように css でサイズを指定する必要があります。

.page-archive .entry-thumb {
    width: 100%;
    height: 436px;
}

こんな感じになります。後はサイズや配置を css で変更するだけです。