ボックス全体をクリッカブルにする

ボックス（divタグなど）の中に、画像・見出し・テキストなどを入れ、そのボックス全体にリンクを貼りたい場合の解決策のひとつです。現在のHTMLは、divタグをaタグで囲むことが出来るのですが、ワードプレスの入力画面では、自動整形機能の為に、無駄なaタグが無限に挿入されてうまくいきません。そのような場面での解決策になります。

ボックスの中にaタグで囲んだテキスト挿入します。このaタグにリンクするURLを設定し、上下いっぱいにして、絶対位置で左上に設定し、テキストは「text-indent: 100%;」で見えないようにしています。

ボックスの中に更にaタグで別URLにリンクする場合は、aタグにクラスをつけるなどの工夫が必要です。

.hoverGrid 　a{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }