キャリコ

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

  関連記事

キャリコのこれはさすがに気づかれる自己満足カスタマイズ
キャリコのこれはさすがに気づかれる自己満足カスタマイズ

もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …

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

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

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

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

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

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

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

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

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …

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

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

ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ

最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …