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

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

 

トオル
何言ってるかわからんよ!

 

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

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

THE THOR リンクの範囲

 

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

テスト

THE THOR にはリンクを表示するカードがいくつかあります。その カード全体 がクリックできるよう変更しました。   トオル 何言ってるかわからんよ!   リンクを表示するカードとは[…]

THE THOR カード リンクリンク範囲を全体に

 

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

 

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

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

操作手順
外観 → カスタマイズ → 追加CSS

 

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

 

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

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

 

出来上がりサンプル

ウィジェット

HUAWEI P20 の保護フィルムを交換しました。

外部リンク

インフォトップは、アフィリエイトサービスを備えたネット通販サイトです。アフィリエイトはもちろん商品販売・購入も簡単無料登…

 

注意点

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

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

 

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

このカスタマイズはテスト運用中です。不具合が出て解消されない場合は当サイトでの適用を中止いたします。

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

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

 

あとがき

 

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

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

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

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

 

トオル
ユーザービリティの向上に少しは役立つかなぁ
>ダミーのタイトルをいれて高さを保つ

ダミーのタイトルをいれて高さを保つ