キャリコおすすめ
本日の人気記事
- 忍者 AdMax が Google AdSense よりも稼げる理由
- SimCity BuildIt(シムシティ ビルドイット)の美しい街の景観30選
- 【 ドレッドヘアのお手入れ方法 】よく聞かれる7つの質問にお答えします
- ソフトバンクの157で即オペレーターにつなぐ方法
- LAN ケーブルを変えるだけで通信速度が速くなるのは本当なのか?
- 駄菓子屋バーでも食べられて通販もできる懐かしい駄菓子20選#dagashiblog
- iPhone のテザリングでデスクトップパソコンをインターネットに接続する方法
- 宛名や住所の個人情報漏えいに注意!郵便物の正しい捨て方とは?
- エスニックファッションの激安通販サイトまとめ
- 缶詰ができて48年後に缶切りが発明されるという衝撃の事実w
STINGER5 の記事一覧に対してリンクのクリック範囲を広げる方法
2014/10/10
STINGER5 も納得の形までもう少し、キャリコ( @calicocatxyz )です。
透明感のある洗練されたデザインになるよう心掛けているのですが、記事の内容も透明感があって洗練された内容にしていきたいです。さて、本日はユーザビリティを向上させるという内容です。それじゃラテ、よろしくね♪

こんにちは、ラテにゃ。
今回は記事一覧に対して画像やテキストリンクだけじゃなく、リンクのクリック範囲を広げてどこでもクリック可能にするというカスタマイズをするにゃ。目標とする完成図はこれにゃ!
Ads by Google
リンクのクリック範囲を広げる
1. dl 要素をリンク化する
これは新着記事一覧の場合。itiran.php を見ると dt タグで画像のリンク、dd タグでテキストリンクとなってるにゃ。dt と dd は dl 要素に包括されてるから、これをひとつの塊として扱うには dl 要素をリンク化すればオッケーにゃ。
1 |
<dl class="clearfix"> |
この部分を
1 |
<dl class="clearfix" data-href="<?php the_permalink();?>"> |
このように差し替えるにゃ。
2. jQuery を追加する
1 2 3 4 5 6 7 8 9 |
<script> (function($){ $(function(){ $('#topnews dl.clearfix').click(function(){ window.location = $(this).data('href'); }); }); })(jQuery); </script> |
このコードをさっき差し替えた dl 要素の下に追記するにゃ。
3. CSS でデザインする
1 2 3 4 |
#topnews dl.clearfix:hover { background-color : #f0f8ff ; cursor : pointer ; } |
キャリコの場合はオンマウスで色が変わるように水色に指定して、マウスポインタは手のマークになるようにしたにゃ。これで色が変わった部分のどこをクリックしても、リンク先に飛べるようになったにゃ。
1 2 3 4 |
#topnews dl.clearfix { padding : 10px ; margin-bottom : 0 ; } |
さらに余白の調整をしたら完璧にゃ!
サイドバーの新着記事にも応用する
1. dl 要素をリンク化する
サイドバーの場合。kanren.php のコードを itiran.php 同様に変更するにゃ。
1 |
<dl class="clearfix"> |
この部分を
1 |
<dl class="clearfix" data-href="<?php the_permalink();?>"> |
このように差し替えるにゃ。
2. jQuery を追加する
単純に topnews を kanren に変更するだけにゃ。
1 2 3 4 5 6 7 8 9 |
<script> (function($){ $(function(){ $('#kanren dl.clearfix').click(function(){ window.location = $(this).data('href'); }); }); })(jQuery); </script> |
このコードを差し替えた dl 要素の下に追記するにゃ。
3. CSS でデザインする
1 2 3 4 |
#kanren dl.clearfix:hover { background-color : #f8f8f8 ; cursor : pointer ; } |
キャリコの場合はサイドバーの新着記事の背景は薄いグレーに指定して、トップページと同様にマウスポインタは手のマークになるようにしたにゃ。
1 2 3 4 |
#kanren dl.clearfix { padding : 10px ; margin-bottom : 0 ; } |
新着記事と同様に余白の調整をしたら完璧にゃ!
ブログでの表示
まとめ
背景色を変えることでリンクはここですよと訪問者にアピールすることが出来るにゃ。リンクの範囲も広がってユーザビリティも向上するってわけにゃ。
今日はここまで、じゃあにゃ~
この記事が気に入ったら
いいね!しよう
キャリコの最新情報をお届けします
Twitter でキャリコをフォローしよう!
おすすめ記事
【キ】 アドセンス用336px
【キ】 アドセンス用336px
関連記事
-
-
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …
-
-
STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する
○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …
-
-
STINGER5 のカテゴリ名と件数をカスタマイズする方法
ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …
-
-
STINGER5 でファビコンを導入するときの注意点
いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …
-
-
STINGER5 の誰にも気づかれない自己満足カスタマイズ
Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …
-
-
header.php を子テーマに作ってファビコンをオリジナル画像に設定する
絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …
-
-
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法
イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …
-
-
キャリコの誰にも気づかれない3つの自己満足カスタマイズ
STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …
-
-
STINGER5 で CSS をカスタマイズ可能にする子テーマの作成
病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …
-
-
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ
いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …