人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: 麻衣=リュウママ
●カテゴリ:はてなの使い方 ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy
ベストアンサー

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

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

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

リンクタグを入れる

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

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

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

スタイルシートを追加

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

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>
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>

と書くほうがよいのかもしれません(スタイルシートがたくさんになりすぎてしまいますからね)。

上手く動かなかったり分からないことがあれば補足しますのでコメント入れてください。


麻衣=リュウママさんのコメント
回答ありがとうございます^^ ↑の回答のとうりにタグを編集してみたのですが…カーソルを合わせても画像が変わりません…。 スタイルシートに a#過去の記事{ display:block; width:208px; height:132px; border:none; background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111204/20111204150849.png?1322979191ClickMe.jpg’); } a#clickme:hover{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111204/20111204151122.png?1322979221ClickMe_hover.jpg’); } と書きました。 ちなみにはてなフォトライフで画像をアップロードしました。 2011/12/04 15:30:32

Lhankor_Mhyさんのコメント
あ、すみません。idは半角英数(一文字目は英字)だけでお願いします。

Lhankor_Mhyさんのコメント
もうひとつ。 >|| a#clickme:hover{ ||< の部分も名前を合わせてください。

麻衣=リュウママさんのコメント
できました!! どうもありがとうございましたm(_ _)m

麻衣=リュウママさんのコメント
今頃すみません><; 前はきちんとサイドバーに追加できたのですが…↓ http://f.hatena.ne.jp/hb64226326174d111/20111224085158 スクリーンショットなのですが…↑ ↑の写真みたいに一番下の記事に出ます。 もちろん、カーソルを合わせると…画像が少し変わるようにはできるのですが……。 なぜでしょうか…。

Lhankor_Mhyさんのコメント
実際のページを拝見しないと原因を特定するのは難しいのですが、ひょっとするとこれかもしれません。 ページのフッタ >|| </div> <div class="sidebar"> <hatena name="clock"> ... ←ここに入れる </div> ←ここに入れてはいけない ||<

麻衣=リュウママさんのコメント
ちなみに…フッタには↓ >|| <a href="http://d.hatena.ne.jp/hb64226326174d111/archive" id="k過去の記事" alt=""></a> ||< スタイルシートには↓ >|| a#k過去の記事{ display:block; width:208px; height:132px; border:none; background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111204/20111204150849.png'); } a#k過去の記事:hover{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/h/hb64226326174d111/20111204/20111204151122.png'); } ||< と書いていました。 こちらも間違っていたらコメントください^^

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

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ