はてなブログでボックス全体にリンクを広げる

hatenaロゴ

はてなブログのサイドバーの最新記事や関連記事、記事下の関連記事など、サムネイル画像の横にタイトル、その下にテキストがあるボックスで、それぞれ別々にリンクするのではなく、ボックス全体にリンクを広げてどこでもクリックできるようにしたい。

以前もチャレンジしましたが、納得いくものではなく、定番のやり方では自作のサイドバーの注目記事が崩れたり...。それでもなんとかあきらめずにいい方法を見つけました。

参考になるブログ・Webサイト

親要素のDIVボックス全体にリンク範囲を広げる方法（改良版）

親要素全体をリンクのクリック範囲とするのはタイルデザインなどのウェブサイトでは多用する技術です。しかしタイルデザイン全体のどこをクリックしてもリンクにつながるようにするには一工夫が必要で、ネットを見てもいくつかの方法があるようです。

基本的には、レ点腫瘍学ノートさんのコードをそっくりそのまま使わせてもらいます。

jQueryのコードは、デザイン→カスタマイズ→記事→記事上下のカスタマイズの記事下に入力します。

JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
    $('.urllist-title-link').append('<span class="overlink"></span>');
});
</script>

－追記－
jQueryを使わずにJavaScriptで実行させることにしました。

JavaScript
<script>
    link = document.getElementById('entry-footer-secondary-modules').getElementsByClassName('urllist-title-link');
    for(i = 0; i < link.length; i++) {
        link[i].insertAdjacentHTML('beforeend', '<span class="overlink"></span>');
    }
</script>

上記のJavaScriptのコードを実行すると、例えば、次のように、タイトルのaタグの後ろ（</a>の手前）に「<span class="overlink"></span>」が挿入されます。

HTML
<a href="https://simadzu.hatenablog.com/entry/gallery" class="urllist-title-link">Androidの画像閲覧アプリ「Gallery QuickPic」<span class="overlink"></span></a>

CSSのコードも、デザイン→カスタマイズ→記事→記事上下のカスタマイズの記事下に入力します。
※ デザインCSS（デザイン→カスタマイズ→デザインCSS）に入力する場合は、<style>と</style>の記述は不要です。

CSS
<style>
.urllist-item {
    position: relative;
}
.overlink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

この記事の下の関連記事やサイドバーの注目記事にカーソルを近づけると、リンクの範囲がボックス全体に広がっていることがわかるかと思います。
※ 通常、サイドバーの注目記事はJavaScriptで表示されるので、この方法は使えません。

このカスタマイズを記事にするつもりはなかったのですが、ブログをいぢっていないとすぐに忘れてしまうので、あとで見てもわかるように書き留めておくことにしました。