スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイドバーのリンクをdisplay:blockにしてみた

サイドバーのリンクは今まで他のリンクと同じように文字の色が変わるだけだったのですが、今回背後の色も変わるように変更してみました。クリックできる範囲も大きくなっています。

【追記】
現在はこの記事を書いたときからさらにテンプレートが変更されていて、マウスを乗せても背景は変わりません。

例えば最新記事一覧がこのようなタグになっているとします。<div class="side">に関してはテンプレートによってクラスの値が違うと思います。また、最新記事以外のもの入っていると思います。

<div class="side">

~~~~~~~~

  <ul>
    <!--recent-->
    <li>
      <a href="<%recent_link>" title="<%recent_title>">
        <%recent_title>(<%recent_month>/<%recent_day>)
      </a>
    </li>
    <!--/recent-->
  </ul>

~~~~~~~~

</div>

で、CSSは下のようにしています。ポイントはdisplay:block;です。

.side ul {
  padding: 0px;
  margin : 0px;
}
.side li {
  width: 300px;
  margin:0;
  padding:0;
  list-style: none;
  line-height: 130%;
  border-bottom : 1px dotted #A9A9A9;
}
.side li a {
  display: block;
  padding:4px 6px 3px 10px;
}
.side li a:hover{
  background-color:#E6E6FA;
}

paddingはliタグで調整せずaタグで調整します。あと赤字のようにクラスを指定してから各属性を変更しないと本文中のリンクなども変えてしまうので注意しましょう。

実際設置してみるとこんな感じになります。

クリックしやすくなるのでいいですね。個人的に、リストを使ったリンクにはすべてdisplay: block;を使っています。

こちらも参考になると思いますのでぜひどうぞ!
リストに1pxのラインを追加するだけで、印象がぐっとよくなる。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。