7/9 周囲の余白や文字も含めてリンクをデザイン [ホームページ作成] All About

STEP.6 ソースのまとめ

今回のサンプルを実現するすべてのソースをまとめて掲載しておきます。コピー＆ペーストして使ってみる際にご活用下さい。

既存のページに書き加えても他のデザインを崩さないよう、「boxlinks」クラスを加えたp要素（<p class="boxlinks">～</p>）内にリンクを記述しています。スタイルシートも、このp要素内に含まれるリンク（a要素）のみを対象に装飾するよう記述しています。

■HTML：

<p class="boxlinks">

   <a href="★リンク先URL★">

      <span class="siteguide">◆ガイド文◆</span><br>

      <span class="sitename">●サイト名●</span><br>

      <span class="siteurl">★リンク先URL★</span><br>

   </a>

</p>

■スタイルシート：

/* リンク全体の装飾 */

p.boxlinks a {

   display: block;

   padding: 0.5em;

   border: 1px solid #ccccff;

   text-align: center;

   text-decoration: none;

   line-height: 1.5;

   width: 400px; /* 横幅を指定する場合のみ記述 */

}

/* ガイド文の装飾 */

p.boxlinks a span.siteguide {

   font-size: 70%;

}

/* サイト名の装飾 */

p.boxlinks a span.sitename {

   text-decoration: underline;

}

/* URLの装飾 */

p.boxlinks a span.siteurl {

   font-size: 75%;

   font-family: Verdana,Arial,sans-serif;

}

/* 全体(マウスが載ったとき)の色 */

p.boxlinks a:hover {

   background-color: #ccffff;

   border-color: #0000ff;

}

/* ガイド文部分の表示色 */

p.boxlinks a:link    span.siteguide {		color: black;	}

p.boxlinks a:visited span.siteguide {	color: black;	}

p.boxlinks a:hover   span.siteguide {		color: blue;	}

/* サイト名部分の表示色 */

p.boxlinks a:link    span.sitename {		color: blue;	}

p.boxlinks a:visited span.sitename {	color: #800080;	}

p.boxlinks a:hover   span.sitename {		color: blue;	}

/* URL部分の表示色 */

p.boxlinks a:link    span.siteurl {		color: green;	}

p.boxlinks a:visited span.siteurl {		color: green;	}

p.boxlinks a:hover   span.siteurl {		color: #cc00ff;	}