ブログのヘッダにマウスを乗せると、画像が早変わり!コードを記載します(stinger3)



マウスを乗せたときに画像を変える

画像にマウスを乗せると、乗せている間だけ画像が変わる様に設定いたしました。

上記画像もその様に設定しております。

なお、javaで動作するため、スマホ等では動作しませんこと、ご了承ください。

基本構文は、以下の様になります。

<a href=”~”> 
:~に、『画像をクリックしたときのリンク先URL』を入れる。

<img src=”~”
:~に、『通常表示しておく画像のURL』を入れる。

onmouseover=”this.src=’~'”
:~に、『マウスを乗せたとき表示する画像のURL』を入れる。

onmouseout=”this.src=’~'” />
:~に、『マウスを外したときに表示する画像のURL』を入れる。

です。

ここに、画像の代替テキストやら、画像サイズやらを必要に応じて追加していく感じです。

上記画像のコードは以下の様になっております。

上記画像コード(例)

ズボラをして、代替テキストも、画像サイズも設定しておりません^^

※なお、WordPressの編集画面では、編集中に『テキスト』⇒『ビジュアル』に移動すると、javaが崩れますので注意が必要です。

 

ブログヘッダ画像のカスタマイズについて

当ブログのヘッダ画像も、先ほどの手順に基づき、マウスオーバーで画像変更する様にしました。

通常表示

2014-09-04_14h46_10

マウスオーバー時

2014-09-04_14h46_19

構文のコードは、先ほどの画像と同じですが、ヘッダーなのでカスタマイズ先が異なります。

当ブログで使用しておりますStinger3では、header.php内でのカスタマイズが必要になります。

header.phpの編集へ(Stinger3)

下記画像の様に、『外観』⇒『テーマの編集』⇒『ヘッダー』へ入ります。

2014-09-05_14h25_06 2014-09-05_14h25_30

 

この中で、<?php bloginfo(‘name’); ?>という箇所を探します。

位置的には、だいたい下の方、およそ<!–/アコーディオン–><?php //カスタムヘッダー画像// ?>の中間くらいにあります。

 

変更前のご注意

位置が見つかれば、この<?php bloginfo(‘name’); ?>を変更していきますが、注意が必要です。

phpファイルですので、間違えると、最悪「画面真っ白」になります。

私も何度かやらかしてしまい、画面真っ白、顔面真っ青状態になりました。

必ず編集前にバックアップを取っておきましょう。

 

編集内容

さて、バックアップが整いましたら、編集に入っていきますが、

<?php bloginfo(‘name’); ?>

<img alt=”~”
:~に、『画像の代替テキスト』を入れる。

src=”~”
:~に、『画像のURL』を入れる。

onmouseover=”this.src=’~'”
:~に、『マウスオーバー時に表示するURL』を入れる。

onmouseout=”this.src=’~'” />
:~に、『マウスを外した時に表示するURL』を入れる。

と変えていきます。

画像をクリックすると、トップページに戻る設定はなされているので、ここで改めて設定する必要はありません。

ちなみに、当ブログでのコードはこの様になりました。

 

編集箇所の確認

編集箇所を分かりやすくするために、前後のコードを含めて記載いたします。

編集前

 

編集後

 

編集前と編集後での相違点は、6行目のみです。

 

まとめ

如何でしたでしょうか?

マウスオーバー時の画像変更は、他にも様々な方法が御座います。

CSSを使わなくても良い点で、私の様な初心者でも使いやすいコードでしたので、ご紹介させていただきました。

その他、カスタマイズの方法で何か発見等御座いましたら、今後このブログでも記事にして参ります。

説明は上手く出来ませんが、少しでもノウハウをシェア出来れば幸いです。

最後までお読みいただき、有難う御座いました1193175hsh3bythmw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です