MoonNote

はてなブログテーマ / CSS / jQuery

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

f:id:waitingmoon:20160118024747p:plain

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

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-thumbnailwidth: 120pxheight: 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-thumbnailoverflow: hidden(外側に溢れた部分を非表示にする)を指定することで解決します。すでにアーカイブページのサムネイルに近いですが、ここで一手間。

f:id:waitingmoon:20160118004328j:plain

これまでの指定だと、画像の表示が画像の左端から始まり見せたい部分(画像の中央)が外れてしまいます。そこで position: relativeleft: 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%);
}

まとめ

デメリット

  • JS で実装する場合と比べて一々 class を指定するという手間がかかる

メリット

  • JS で実装する場合と比べて SEO の影響が少ない
  • 抜粋する本文の文字数を自由に決められる
  • どんなサイズの画像も一律して同じサイズのサムネイルに変更できる
  • メディアクエリで分岐すれば、スマホでは小さいサムネイルを、PCでは大きいサムネイルを表示できる

…一々サムネイル表示用の class を指定するのは面倒ですが、JS で転送する場合と比べて SEO への影響が少ないというメリットは大きいです。抜粋する文字数も「続きを読む」を挿入するまでと自由に決められますね。

このカスタマイズ+トップページの記事表示件数を増やせば閲覧数が増えるかもしれません。使って頂けると幸いです。