記事へのリンクをCSSでBLOCK要素にしてあげるユーザーに優しいサイト作り

2013/02/22

Written by: EISUKE

Category: IT

NewImage

サイトのデザインを考えるのも重要ですが、あなたのサイトにちょっとした気遣いも大切です。

今回、僕が試したのが記事へのリンクをBLOCK要素で囲んであげるという事。これをすることで、少しばかりリンクを押しやすくなりました。

BLOCK要素で押せる範囲を拡大

通常、リンクが押せる部分は、以下のようにリンクが指定された文字列です。

NewImage

この部分をCSSにてBLOCK要素に指定してあげる事で、リンクの押せる範囲が拡大して、リンクを押しやすくなるようにしました。

NewImage

僕の場合はhtmlで、記事タイトル部分をindex-titleというクラスで囲んでいますので、こういった書き方になります。。参考までにね。

.index-title a {
    color: #555;
    text-shadow: 0 0 rgba(0,0,0,0.2);
    font-weight: bold;
    font-size: 20px;
    display: block; //この部分がブロック要素！
}
<!--html部分-->
<div class="index-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>

display:block;という一行を書き加えるだけですね。簡単です。