リンクの範囲を広げてクリック(タップ)しやすく

hatenaロゴ

このブログの関連記事と注目記事をカスタマイズして、アイキャッチ画像(リンクテキスト)のリンクの範囲を広げてクリック(タップ)しやすくしてみましたが、汎用的な感じにできなかったので、コードは表示しません...。

例えば、次のような画像とテキストが横並びになっているボックスがあるとします。

HTML
<div class="box">
<div class="box-img"><a href="https://simadzu.hatenablog.com/entry/css-link"><img src="/css-link.png" alt="アイキャッチ画像" /></a></div>
<div class="box-url"><a href="https://simadzu.hatenablog.com/about">サンプル サンプル サンプル サンプル サンプル サンプル</a></div>
<div class="box-txt">サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル</div>
</div>
CSS
.box {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    background: #fff;
}

.box-img {
    float: left;
}

.box-img img {
    padding: 0 10px 0 0;
}

.box-url {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    padding: 2px 0 6px;
}

.box-txt {
    font-size: 13px;
    line-height: 1.4;
}
Hatenaロゴ
サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル

アイキャッチ画像のリンクの範囲をブロック全体に広げるために次のようにしました。

参考になるブログ・Webサイト
Code School - aタグのリンク範囲をボックスいっぱいに広げる方法
webcode-lab京都 - リンクのクリック範囲を親要素(DIV)全体に広げる/リンクの中に別リンクを置く【HTML・CSS】

CSS
.box {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    background: #fff;
}

.box-img {
    float: left;
}

.box-img img {
    padding: 0 10px 0 0;
}

.box-img a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box-url {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    padding: 2px 0 6px;
}

.box-txt {
    font-size: 13px;
    line-height: 1.4;
}
Hatenaロゴ
サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル

テキストリンクとテキストが画像に重なって横並びになりません...。
position:absoluteを設定するとfloatが効かないようです。
(positionがabsoluteだと、displayはblockに、floatはnoneに、強制的に設定されます)

参考になるブログ・Webサイト
IT工房 - floatとpositionを使用したレイアウト
ホームページ更新倶楽部 - CSS:難しい?意外と便利なpositionを使いこなそう

そこで、floatは削除して、テキストリンクとテキストの左側に画像の幅(100px)+余白(10px)のpaddingを設定しました。

CSS
.box {
    position: relative;
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    background: #fff;
}

.box-img {
    float: left;
}

.box-img img {
    padding: 0 10px 0 0;
}

.box-img a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box-url {
    position: relative; /* テキストリンクは別に表示する */
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    padding: 2px 0 6px;
    padding-left: 110px;
}

.box-txt {
    font-size: 13px;
    line-height: 1.4;
    padding-left: 110px;
}
Hatenaロゴ
サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル サンプル

もっとちゃんとしたやり方があるのかもしれませんが、いきあたりばったりでCSSを書き換えてなんとか完成しました。

スマートフォンだとテキストリンクはタップしにくいので、少しは使いやすくなったかな?