*リンクボタン*

画像をリンクボタンにする

今日、最初のほうにこんなのをお見せしましたね↓

こんなページへGO!!


カンの鋭い方はもうお気付きだと思います。
そう、こういうふうに使うんです↓

こんなページへGO!!


だんだん出来てきたねぇ、ホームページ！(^-^)
今からこのHTMLを作ります！

新しいHTMLを作るので、
テキストエディタをまっさらな状態にしてください。
そしたら、HTMLの基本骨格を書いといてください。
壁紙・背景色の設定してくださいね。

それではメインの作業にうつります。
まずは、リンクボタンになる画像を貼り付けます。
各自、さっき素材屋さんでもらってきたもの（ペアのうちの片方）を使いましょう(^-^)

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>

  <BODY bgcolor="#B0C4DE" background="image/wall.gif">

      <CENTER>
      <IMG SRC="image/top.gif"><BR><BR>
      <IMG SRC="image/profile.gif"><BR><BR>
      <IMG SRC="image/diary.gif"><BR><BR>
      <IMG SRC="image/bbs.gif"><BR><BR>
      <IMG SRC="image/link.gif"><BR><BR>
      <IMG SRC="image/mail.gif">
      </CENTER>

  </BODY>
</HTML>

<BR>を２連続にしたのは、隙間を作りたかったからです。

いったん、ファイル名「menu.html」で保存して、ブラウザで確認しましょう！

これから、各画像を「リンクボタン」にします。
やり方は簡単です！
各画像を<A HREF="リンク先">～</A>で囲めばいいのです！

<A HREF="profile.html">自己紹介</A>と書けば
「自己紹介」がリンク文字になりました。
<A HREF="profile.html"><IMG SRC="image/profile.gif"></A>と書けば
「image/profile.gif」がリンク画像になるってわけです(^-^)/

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY bgcolor="#B0C4DE" background="image/wall.gif">
      <CENTER>
      <A HREF="top.html"><IMG SRC="image/top.gif"></A><BR><BR>
      <A HREF="profile.html"><IMG SRC="image/profile.gif"></A><BR><BR>
      <A HREF="diary.html"><IMG SRC="image/diary.gif"></A><BR><BR>
      <A HREF="bbs.html"><IMG SRC="image/bbs.gif"></A><BR><BR>
      <A HREF="link.html"><IMG SRC="image/link.gif"></A><BR><BR>
      <A HREF="mailto:samle@sample.xx"><IMG SRC="image/mail.gif"></A>
      </CENTER>
  </BODY>
</HTML>

では、ブラウザで確認してみましょう！

・・・え？
画像の周りに、青いワク線が出ちゃった！？

それは、
<IMG SRC="">の属性として「border=0」と書くと解消しますよ！

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY bgcolor="#B0C4DE" background="image/wall.gif">
      <CENTER>
      <A HREF="top.html"><IMG SRC="image/top.gif" border=0></A><BR><BR>
      <A HREF="profile.html"><IMG SRC="image/profile.gif" border=0></A><BR><BR>
      <A HREF="diary.html"><IMG SRC="image/diary.gif" border=0></A><BR><BR>
      <A HREF="bbs.html"><IMG SRC="image/bbs.gif" border=0></A><BR><BR>
      <A HREF="link.html"><IMG SRC="image/link.gif" border=0></A><BR><BR>
      <A HREF="mailto:samle@sample.xx"><IMG SRC="image/mail.gif" border=0></A>
      </CENTER>
  </BODY>
</HTML>

ネッ？(^o^)



Copyright (C) 7tag project dv