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

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;
}

サンプルサンプルサンプルサンプルサンプルサンプル

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

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

参考になるブログ・Webサイト
Code School - aタグのリンク範囲をボックスいっぱいに広げる方法
 Qiita - aタグを使って要素全体をリンクにする二つの方法

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;
}

サンプルサンプルサンプルサンプルサンプルサンプル

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

テキストリンクとテキストが画像に重なって横並びになりません...。
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;
}

サンプルサンプルサンプルサンプルサンプルサンプル

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

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

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

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