STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法

STINGER5 も納得の形までもう少し、キャリコ（ @calicocatxyz ）です。

透明感のある洗練されたデザインになるよう心掛けているのですが、記事の内容も透明感があって洗練された内容にしていきたいです。さて、本日はユーザビリティを向上させるという内容です。それじゃラテ、よろしくね♪

こんにちは、ラテにゃ。

今回は記事一覧に対して画像やテキストリンクだけじゃなく、リンクのクリック範囲を広げてどこでもクリック可能にするというカスタマイズをするにゃ。目標とする完成図はこれにゃ！

リンクのクリック範囲を広げる

1. dl 要素をリンク化する

これは新着記事一覧の場合。itiran.php を見ると dt タグで画像のリンク、dd タグでテキストリンクとなってるにゃ。dt と dd は dl 要素に包括されてるから、これをひとつの塊として扱うには dl 要素をリンク化すればオッケーにゃ。

この部分を

このように差し替えるにゃ。

2. jQuery を追加する

このコードをさっき差し替えた dl 要素の下に追記するにゃ。

3. CSS でデザインする

キャリコの場合はオンマウスで色が変わるように水色に指定して、マウスポインタは手のマークになるようにしたにゃ。これで色が変わった部分のどこをクリックしても、リンク先に飛べるようになったにゃ。

さらに余白の調整をしたら完璧にゃ！

サイドバーの新着記事にも応用する

1. dl 要素をリンク化する

サイドバーの場合。kanren.php のコードを itiran.php 同様に変更するにゃ。

この部分を

このように差し替えるにゃ。

2. jQuery を追加する

単純に topnews を kanren に変更するだけにゃ。

このコードを差し替えた dl 要素の下に追記するにゃ。

3. CSS でデザインする

キャリコの場合はサイドバーの新着記事の背景は薄いグレーに指定して、トップページと同様にマウスポインタは手のマークになるようにしたにゃ。

新着記事と同様に余白の調整をしたら完璧にゃ！

ブログでの表示

まとめ

背景色を変えることでリンクはここですよと訪問者にアピールすることが出来るにゃ。リンクの範囲も広がってユーザビリティも向上するってわけにゃ。

今日はここまで、じゃあにゃ～

ライター紹介

ラテ　Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。