THE THOR ザ・トール カード全体 をクリックできるように変更

THE THOR にはリンクを表示するカードがいくつかあります。その カード全体 がクリックできるよう変更しました。
※2020/6/22改良しました。

 

 

リンクを表示するカードとは、記事一覧や記事内などで使用するブログカード（ショートコード）、新着記事一覧（ウィジェット）などのこと。

それらのカードはクリックできる場所が画像部分、タイトルの文字部分のみとなっています。少し押しづらいときもありますよね。
それを空白部分も反応させて、カード全体をクリックできるように変更します。

 

出来上がりは以下の通りです。いままでは反応しなかった空白部分がクリックできるようになります。押してみてください。※このページに帰ってきます。

 

THE THOR
カード全体 をクリックできるように変更

 

※カスタマイズは自己責任でお願いします。

追加CSSに以下のコードをコピペしてください。

 

/*カード全体でボタン*/
.archiveScode__item{
	position:relative;
}
.archive__item a:after,.widgetArchive__item a:after,.archiveScode__item a:after,.sitecard a:after,.blogcard a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
	    z-index:333;
}
.eyecatch{
	z-index:444;
}
.the__category a {
	position:relative;
    z-index: 999;
}
.eyecatch__cat{
    z-index: 999;
}

 

上記コードで全体がクリック出来るようになるカードは以下の通りです。※他にも必要なカードがあればお知らせください。

• 記事一覧/カテゴリ一覧/タグ一覧
• ウィジェットでの記事一覧
• ショートコードでの記事一覧
• ショートコードでの内部リンク/外部リンク

 

出来上がりサンプル

ウィジェット
[archivelist cat=0 num=1]

外部リンク

 

注意点

この記事のカスタマイズは当サイト「からあげ棒、ありったけ」で最適化されています。

他サイトで適用した場合、不具合が起きる可能性があります。問題点や他にも反応させたいカードがある等はコメントまたはメールでお知らせいただければ幸いです。

 

また、広範囲にわたり変更が起きるので思いもよらない挙動をする箇所が出てくる可能性があります。カスタマイズ適用の際は必ずご自身のサイトを一通り確認することをオススメします。

※カスタマイズは自己責任でお願いします。

参考サイトQiita リンクのクリック範囲を広げたい

 

あとがき

 

クリック可能範囲はスマホ表示の場合はあまり気になりません。

しかしPC表示の場合は気になります。クリックしたつもりがテキストから少し外れているなんてことは頻繁にあります。

このカスタマイズでクリックがしやすくなるのは確かですが、誤クリックが多くなる可能性も否定できません。

何度も繰り返しますがカスタマイズは自己責任でお願いします。