キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

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

      2014/10/10

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

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

こんにちは、ラテにゃ。

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

Ads by Google

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

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 にゃんこです。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

  おすすめ記事

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法

絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

STINGER5 のカテゴリ名と件数をカスタマイズする方法

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …

キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

STINGER5 でファビコンを導入するときの注意点
STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …