はてなダイアリーについての質問です。

http://d.hatena.ne.jp/Sukai/このブログのサイドバー(右)ありますよね。
例えば…右サイドバー1番上の「制作 スカイ」と書いたボタン(バナー)にカーソルを合わせると…画像が少し変わるようになっています。そこをクリックするとページが飛びますよね。
なので…ボタン(バナー)にカーソルを合わせると…画像が変わるようにして、そこをクリックするとページが飛ぶようにする方法を教えてください!!

わかりずらいとこがあればコメントください!

では回答よろしくお願いいたしますm(_ _)m

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/12/04 10:30:56
  • 終了:2011/12/05 11:01:50

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/12/04 11:32:25

ちょっと難しめですので、順番を追って頑張ってみてください。

画像を「通常用」「マウスオーバー用」二つ作成する

 この時、縦横のサイズは同じにしておいてください。
 仮に、
ClickMe.jpg
ClickMe_hover.jpg
 という、横180×縦60のファイルを作ったとします。
 

リンクタグを入れる

 リンク先のURLをlink.htmlだとして、

<a href="link.html" id="clickme" alt="説明"></a>

 のようなコードを、リンクを設置したいところに以下に注意しながら書いてください。

  • idには適当な名前を、altにはリンクの説明を入れる。
  • id="..."で設定する名前は、他のものとかぶらないようにする。はてなで設定しているものとかぶってもいけないので、長めの名前にするといいかも。
  • altは省略してもいい。

 

スタイルシートを追加

 もし、サイドバーのような常に表示されているところにリンクを追加するなら、

a#clickme{
  display:block;
  width:180px;
  height:60px;
  border:none;
  background-image: url('【画像の置き場所】ClickMe.jpg');
}
a#clickme:hover{
  background-image: url('【画像の置き場所】ClickMe_hover.jpg');
}

 を、「管理」「デザイン」の「スタイルシート」に以下に注意しながら追加してください。

  • a#...はリンクタグのidとおなじ名前に。
  • widthとheightはそれぞれリンク画像の横と縦のサイズ(ピクセル数)をpxで書く。
  • background-image:url('...')のURLには、どうやらフォトライフ記法が使えないようなので、URLを書くこと。

 
 もし、記事のようなそのページを見たときだけ表示されるところにリンクを追加する場合、上記のとおりでもいいのですが、頻繁に作成する場合はリンクタグの直前に、

<style>
a#clickme{
  display:block;
  width:180px;
  height:60px;
  border:none;
  background-image: url('【画像の置き場所】ClickMe.jpg');
}
a#clickme:hover{
  background-image: url('【画像の置き場所】ClickMe_hover.jpg');
}
</style>

 と書くほうがよいのかもしれません(スタイルシートがたくさんになりすぎてしまいますからね)。
 
 上手く動かなかったり分からないことがあれば補足しますのでコメント入れてください。

他7件のコメントを見る
id:Lhankor_Mhy
  • sidebarの横幅が180pxなので、それ以上のwidthの画像は避けたほうがよさそうです。
  • idの命名には日本語を使わない方がいいです。日本語でも表示されるかもしれませんが、規則では認められていませんので英数が無難です。
2011/12/24 10:13:48
id:hb64226326174d111

返信遅くなってすみません><;
↑の返信のとうりやってみましたが…やはり↓
http://f.hatena.ne.jp/hb64226326174d111/20111224085158のスクリーンショットのとうりダメでした…。

2011/12/30 11:38:33
  • id:hb64226326174d111
    フッタには…<a href="http://d.hatena.ne.jp/hb64226326174d111/archive" id="去の記事" alt=""></a>
    と書きました。

    間違っているとこがあれば教えてください^^

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません