スグにできる。リンクをボタン風にして、マウスを乗っけたらちょっと押してる風にする

Image

毎日朝会をしているのですが、今朝の朝会の時に昨日作った 新blogへのリンクがわかりにくい、という意見が出ました。

「ブログを移行したということが分かってる人しか押さない」という、なるほど~ということでちょっと変更してみました。

リンク画像をボタン風にして貼ってみる

わかりにくい、といわれた画像はこんな感じでした。

Image

これをこんな感じのボタン風画像に変更してみました。

Image

貼ってみます。

Image

今はやりの(?)フラットデザインのため、なんか押したらリンクするよという雰囲気がないかな~と思いました。そこでオンマウスになったときにちょっと色が薄くなる(押してるような気がする)感じにしてみたいと思います。

オンマウスで表示されるボタンを作る。

今のボタンをコピーして bloglink_over.png という名前にします。Fireworksでひらき、画像の上に同じ大きさの四角を白塗りで描きます。四角のプロパティを開いて透明度を46ぐらいにします。

Image

するとなんかやや薄いボタンができました。

Image

テーマに書くだけでオンマウスの画像を変更する方法

そして、ボタンの切り替えについてはいつものようにググりました。で、すぐにこのページを発見。

CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方

読むと、javascriptだけで記述できるのでテーマのtheme.htmlを変更するだけ!お手軽そうです。
このように変更しました。

onmouseover=とonmouseout=のところを追加しました。

onmouseover=”this.src=’ の後にオンマウスで表示されるボタンの名前(bloglink_over.png)を記述します。
onmouseout=”this.src=’ の後に、img src=で指定しているボタンの名前(bloglink.png)を記述します。

これだけで、切り替えの指定が出来ました。こんな感じです。

ちょっとした変更ならjavascriptで直接書くのは手軽ですぐにできますね!

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る