キャリコおすすめ
本日の人気記事
- 【 ドレッドヘアのお手入れ方法 】よく聞かれる7つの質問にお答えします
- 忍者 AdMax が Google AdSense よりも稼げる理由
- ソフトバンクの157で即オペレーターにつなぐ方法
- SimCity BuildIt(シムシティ ビルドイット)の美しい街の景観30選
- わずか1分28秒でハッキング可能!Wi-Fi 自動接続してるスマホは格好のカモ
- LAN ケーブルを変えるだけで通信速度が速くなるのは本当なのか?
- iPhone のテザリングでデスクトップパソコンをインターネットに接続する方法
- 昼飯代や風俗代まで経費で落とせるの?!会社員も知って得する節税術
- 次の13日の金曜日はいつ?2016年から20年先までの一覧
- ベッキーと川谷絵音の不倫騒動で LINE を流出させた方法
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
関連記事
-
-
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …
-
-
STINGER5 の新着記事をトップページだけ非表示にする方法
イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …
-
-
STINGER5 の記事下にダブルレクタングルをキレイに表示させる方法
絶賛求職中のキャリコ( @calicocatxyz )です。 就職難なんて言葉ど …
-
-
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …
-
-
STINGER5 のブログ説明文の重要性について
誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @calicocatx …
-
-
STINGER5 でアドセンスを記事内に導入するときの注意点
アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …
-
-
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …
-
-
キャリコのこれはさすがに気づかれる自己満足カスタマイズ
もうないかなって思ったけど意外とすぐの更新、キャリコ( @calicocatxy …
-
-
STINGER5 で CSS をカスタマイズ可能にする子テーマの作成
病院で出される食事が日本食で驚いてるキャリコ( @calicocatxyz )で …
-
-
STINGER5 でファビコンを導入するときの注意点
いよいよ帰国が5日後に迫ってきたキャリコ( @calicocatxyz )です。 …