トップページの記事画像を CSS だけでアーカイブページ風のサムネイルに変更するカスタマイズ

f:id:waitingmoon:20160118024747p:plain

はてなブログにはいわゆる概要表示（アイキャッチ画像と文章の一部を抜粋してリストで表示する）機能がありません。自分もそうですが、トップページの記事一覧をアーカイブページのようにすっきりと表示させたい！という方は結構多いのではないでしょうか。

JSで無理やりアーカイブページに転送するカスタマイズもあるみたいですが、一手間加えれば転送なし + CSS だけで実装できるので、今回はその方法を紹介したいと思います。

JS で実装するカスタマイズ
CSS で実装するカスタマイズ
解説
まとめ

JS で実装するカスタマイズ

dokuwohaku.hateblo.jp

JS で実装するカスタマイズの方法は上記の記事に掲載されています。オーナーの方もおっしゃっていますが、転送が原因で Google からの評価が下がる可能性があります。

CSS で実装するカスタマイズ

準備

まずは下準備です。記事の最初の画像の親要素にサムネイル表示用の class を指定してください。ここでは例として .post-thumbnail とします。

見たままモードの場合

見たままモードの場合は編集画面上のタブを「HTML編集」に切り替え、画像の親要素に class を記述してください。

<p class="post-thumbnail"><img src="画像のURL"></p>

はてな記法/Markdownモードの場合

はてな記法と Markdown の場合は、編集欄に直接 class を指定したタグを記述してください。

<p class="post-thumbnail">[f:id:*****:*****p:plain]</p>

CSS

.page-index .post-thumbnail {
    display: block;
    float: left;
    margin: 0 1.5em 1.5em 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

.page-index .post-thumbnail img {
    max-width: none;
    height: 100%;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

上記のコードをデザインCSS欄にコピペすると、先程 class を設定した要素の中の画像がサムネイル化されます。

完成イメージ

記事ページ

f:id:waitingmoon:20160118002243j:plain

トップページ

f:id:waitingmoon:20160118005341j:plain

当たり前ですが、違う画像は使っていません。

解説

f:id:waitingmoon:20160118002243j:plain

このカスタマイズを文字で説明するのはかなり面倒なので画像で説明します。サムネイル化したい画像のサイズは 960x540（16:9）です。

f:id:waitingmoon:20160118002427j:plain

まず最初は、画像の親要素である .page-index .post-thumbnail に width: 120px と height: 120px を指定します。はてなブログの記事部分の画像には標準で max-width: 100%（画像の最大幅を親要素の幅に合わせる）が指定されているので、120px の親要素の中に表示されている画像（16:9）はアスペクト比を保ったまま縮小され下に空白が発生してしまいます。

f:id:waitingmoon:20160118002813j:plain

そこで下の空白を消すために .page-index .post-thumbnail img の高さを height: 100%（親要素の高さに合わせる）に変更します。また、max-width: 100% のままだと高さと幅がどちらも 100%、すなわち縦横比が 1:1 になって画像が歪んでしまうので、これを none(auto) に変更します。

…今度は画像の幅が 120px を超えてしまいました。

f:id:waitingmoon:20160118003904j:plain

この問題は、.page-index .post-thumbnail に overflow: hidden（外側に溢れた部分を非表示にする）を指定することで解決します。すでにアーカイブページのサムネイルに近いですが、ここで一手間。

f:id:waitingmoon:20160118004328j:plain

これまでの指定だと、画像の表示が画像の左端から始まり見せたい部分（画像の中央）が外れてしまいます。そこで position: relative と left: 50% で画像の左端を親要素の中央に動かして…

f:id:waitingmoon:20160118004919j:plain

transform: translateX(-50%) で、画像の幅の半分だけ位置を左に戻します。親要素の中央と画像の中央が一致しました。サイドバーモジュールで出力したサムネイル（右下）と全く同じです！

f:id:waitingmoon:20160118005341j:plain

float: left と適切な margin を指定して完成です。

f:id:waitingmoon:20160118002243j:plain

body に .page-index がつかない記事ページではサムネイル化されず、普通に表示されます。

上に戻るのも面倒だと思うので改めてコードを。

.page-index .post-thumbnail {
    display: block;
    float: left;
    margin: 0 1.5em 1.5em 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

.page-index .post-thumbnail img {
    max-width: none;
    height: 100%;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}