キャリコおすすめ

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

2014/09/23 2014/10/10

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

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

こんにちは、ラテにゃ。

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

Ads by Google

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

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

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

<dl class="clearfix">

1	<dl class="clearfix">

この部分を

<dl class="clearfix" data-href="<?php the_permalink();?>">

1	<dl class="clearfix" data-href="<?php the_permalink();?>">

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

2. jQuery を追加する

<script>
(function($){
  $(function(){
    $('#topnews dl.clearfix').click(function(){
        window.location = $(this).data('href');
    });
  });
})(jQuery);
</script>

(function($){

$(function(){

$('#topnews dl.clearfix').click(function(){

window.location = $(this).data('href');

});

})(jQuery);

</script>

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

3. CSS でデザインする

#topnews dl.clearfix:hover {
	background-color : #f0f8ff ;
	cursor : pointer ;
}

#topnews dl.clearfix:hover {

background-color : #f0f8ff ;

cursor : pointer ;

}

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

#topnews dl.clearfix {
	padding : 10px ;
	margin-bottom : 0 ;
}

#topnews dl.clearfix {

padding : 10px ;

margin-bottom : 0 ;

}

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

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

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

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

<dl class="clearfix">

1	<dl class="clearfix">

この部分を

<dl class="clearfix" data-href="<?php the_permalink();?>">

1	<dl class="clearfix" data-href="<?php the_permalink();?>">

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

2. jQuery を追加する

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

<script>
(function($){
  $(function(){
    $('#kanren dl.clearfix').click(function(){
        window.location = $(this).data('href');
    });
  });
})(jQuery);
</script>

(function($){

$(function(){

$('#kanren dl.clearfix').click(function(){

window.location = $(this).data('href');

});

})(jQuery);

</script>

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

3. CSS でデザインする

#kanren dl.clearfix:hover {
	background-color : #f8f8f8 ;
	cursor : pointer ;
}

#kanren dl.clearfix:hover {

background-color : #f8f8f8 ;

cursor : pointer ;

}

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

#kanren dl.clearfix {
	padding : 10px ;
	margin-bottom : 0 ;
}

#kanren dl.clearfix {

padding : 10px ;

margin-bottom : 0 ;

}

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

ブログでの表示

まとめ

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

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

ライター紹介

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

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

- STINGER5 カスタマイズ

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

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

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

Follow @calicocatxyz

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

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

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

2. jQuery を追加する

3. CSS でデザインする

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

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

2. jQuery を追加する

3. CSS でデザインする

ブログでの表示

まとめ

おすすめ記事

関連記事

STINGER5 の新着記事をトップページだけ非表示にする方法

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

STINGER5 のブログ説明文の重要性について

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

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

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

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

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

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

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

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

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

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

2. jQuery を追加する

3. CSS でデザインする

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

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

2. jQuery を追加する

3. CSS でデザインする

ブログでの表示

まとめ

この記事を気に入ってもらえたらシェアしていただけると嬉しいです(*ΦωΦ*)

おすすめ記事

当ブログは不定期更新なのでこちらのボタンから購読するのが便利です(*ΦωΦ*)

【キ】 アドセンス用336px

【キ】 アドセンス用336px

関連記事

この記事を気に入ってもらえたらシェアしていただけると嬉しいです(ΦωΦ)

当ブログは不定期更新なのでこちらのボタンから購読するのが便利です(ΦωΦ)

【キ】　アドセンス用336px

【キ】　アドセンス用336px