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

この記事のURLとタイトルをコピーする

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)を記述します。

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

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

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

シェアする

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

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告
トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。