Memoranote

興味のあること、感じたこと、気になったこと、体験したこと、手に取ってみたことを記したブログ

【はてなブログ】「一覧形式」にオリジナル画像を正しいサイズでトップ+カテゴリー扉に

誤っている設定の画像

はてなブログでは、アイキャッチに使われる画像を記事を作成する度に設定できますが、それが表示される箇所によってサイズがまちまちであり、ちょっと気持ち悪いですよね。

特に各記事へと遷移するための重要な導線元である「トップページ」や「カテゴリー扉ページ」にはしっかりとしたサイズで表示しておきたいものです。

そちらに対して、サイズを標準化するためのカスタマイズ方法が他のブロガ―さんの記事で紹介されていたりしますが、プラスアルファでちょっと修正したいなと思ったので、今回はそのお話。

従来の設定

元々、「トップページ」や「カテゴリー扉ページ」のアイキャッチ画像は勝手に正方形にトリミングして表示されるという仕様があるため、トリミング位置によってはどうもしっくりこない。

www.imuza.com

私はこちらのやり方で「トップページ」や「カテゴリー扉ページ」を正しいサイズで表示させていましたが、ちょっと気になる事が。

トップページ

こちらは私のブログのトップですが、紹介されている手法でcssとjavascriptを実装すると、正方形から本来のサイズへと変わってくれます。

しかし、

カテゴリー扉ページ

カテゴリーの扉に行くと、あれ??画像のサイズがトップと揃っていない。
表示サイズは同じなのですが、びっくりするくらい画像が拡大されて表示されてしまっています。

今回やること

トップに合わせて、カテゴリー扉のアイキャッチも見た目を揃える!!

これだけです。

修正箇所

今回の修正対象は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>

修正版

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

どこが変わったか分かりますでしょうか。
修正箇所は3行目「page-index」「page-archive」に修正しただけです。

このjavascriptはbodyタグに埋まっているclassをフックにして、対象の画像の探し出し、表示サイズ変更をしているのですが、「page-index」はトップページ専用となっており、カテゴリー扉ページが修正対象から漏れてしまうんです。

それをトップページ、カテゴリー扉ページどちらも含んでいる「page-archive」に変更する事で、修正対象が拡大されて、トップページ、カテゴリー扉ページが共に修正されるという形になります。

まとめ

私はデザインを考える時に、同じ意味を持った要素がページによって見た目が揺れる事は極力避けるべきと思っています。それは使う側の事を配慮しなければいけないという理由からです。

シンプルに内容の分かりやすさだけを求めるのではなく、視覚的な統一もしっかり行っていく事で、見やすいデザインを心掛けたいですね。