はてなブログのトップページに表示されるアイキャッチ画像にリンクを設定したい

こんにちは、つばさ（@tsubasa123）です。

今日はささいなカスタマイズですが、結構気になっていた部分を修正しました。同じ条件に当てはまる方、もしよろしければ参考にしてみてください。

トップページの運用パターン
アイキャッチの画像、クリックしたくなりません？
リンクつけてあげれば解消できるよね
さいごに

トップページの運用パターン

はてなブログにおいてトップページの管理というか、運用方法って何パターンかあると思います。

記事を途中で区切って（続きを読む）複数件表示
記事を途中で区切らずに全文表示（1件だけ）
記事を途中で区切らずに全文表示（複数件表示）
一覧ページ（/archiveページ）へリダイレクト

こんな感じでしょうか。もっと細かいバリエーションがあるかもですが、大体の人はこの中のどれかの方式でトップページを管理していると思います。私のブログは1つ目の続きを読むを使ったパターンに該当します。

で、特に1つ目のパターンに多いんじゃないかと思うのは、記事の冒頭にアイキャッチ的な画像を配置する書き方。私のブログがそうなのですが、アイキャッチ画像→挨拶やら記事の簡単な説明→続きを読む、といった流れになっています。

このフローで記事を管理していると、はてなブログの仕様で（WordPressも同じだったと思いますが）トップページには続きを読むを配置するまでのコンテンツ、つまり「アイキャッチ画像＋挨拶やら簡単な説明」がタイトルなんかと一緒に表示されることになり、そのセットが設定画面で指定した件数の分だけ繰り返して表示されるようになっています。

ここまでは、まぁそうだよね、って感じです。で、今回のカスタマイズの対象は私と同じように「記事の冒頭にアイキャッチ画像を配置し、続きを読む機能を使っている」方となります。俺だ、私だ、という方、このままもう少しお付き合いくださいね。そうでない方もよろしければどうぞ。

アイキャッチの画像、クリックしたくなりません？

私だけ？あれ、クリックしたくなりません？特にはてなブログの場合、画像をクリックすると拡大して表示できるような機能がついているため、画像の上にマウスポインタを合わせると指のマークにかわるわけですよ。はいはい、ってクリックすれば記事の詳細に移動する、と思いきや、その画像が拡大されて表示されるんですよね。

んー、心の狭い私にはこれがどうして納得できない。使いにくいよ、このトップページ。

リンクつけてあげれば解消できるよね

いつものごとく、JavaScriptで解決します。

<script>
if ($('body').hasClass('page-index')) {
$('.entry-content').each(function() {
if (!$(this).find('.entry-see-more').length) return;
var $a = $('<a>').attr({href: $(this).find('.entry-see-more').attr('href')});
$(this).find('img').each(function() {
$(this).wrap($a);
});
});
}
</script>

上記のコードを、デザインのカスタマイズから「フッター」に追加すれば、アイキャッチ画像に自動でリンクが設定されて、クリックすると記事の詳細に移動するようになります。満足満足。

記事の冒頭に登録したアイキャッチ画像だけでなく、トップページに表示される画像すべてにリンクを設定してしまうオレオレ仕様になっていますので、アイキャッチと説明以外にカエレバリンクとか置きたい場合は修正が必要になります、お気を付けください。使いたいけどやり方わからん、みたいな人がいましたら質問してください。