https://simadzu.hatenablog.com/entry/overlink

はてなロゴ

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

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

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

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

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

jQuery
<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>

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