周囲の余白や文字も含めてリンクをデザイン(9ページ目)

/* リストの標準装飾を消す指定など */
ul.boxlinks {
   margin: 0px;
   padding: 0px;
}
ul.boxlinks li {
   list-style: none;
   padding: 0px;
   margin-bottom: 3px;
}

/* リンク全体の装飾 */
ul.boxlinks li a {
   display: block;
   padding: 0.5em;
   border: 1px solid #ccccff;
   text-align: center;
   text-decoration: none;
   line-height: 1.5;
   width: 400px; /* 横幅を指定する場合のみ記述 */
}
/* リンク内の各部分の装飾 */
ul.boxlinks li a span.siteguide {
   font-size: 70%;
}
ul.boxlinks li a span.sitename {
   text-decoration: underline;
}
ul.boxlinks li a span.siteurl {
   font-size: 75%;
   font-family: Verdana,Arial,sans-serif;
}

/* 全体(マウスが載ったとき)の色 */
ul.boxlinks li a:hover {
   background-color: #ccffff;
   border-color: #0000ff;
}
/* ガイド文部分の表示色 */
ul.boxlinks li a:link    span.siteguide { color: black; }
ul.boxlinks li a:visited span.siteguide { color: black; }
ul.boxlinks li a:hover   span.siteguide { color: blue; }
/* サイト名部分の表示色 */
ul.boxlinks li a:link    span.sitename { color: blue; }
ul.boxlinks li a:visited span.sitename { color: #800080; }
ul.boxlinks li a:hover   span.sitename { color: blue; }
/* URL部分の表示色 */
ul.boxlinks li a:link    span.siteurl { color: green; }
ul.boxlinks li a:visited span.siteurl { color: green; }
ul.boxlinks li a:hover   span.siteurl { color: #cc00ff; }