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

1
2 マウスを乗せたときに画像を変える
3 ブログヘッダ画像のカスタマイズについて
4 編集箇所の確認
5 まとめ

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

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

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

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

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

<a href=”～”>　
：～に、『画像をクリックしたときのリンク先ＵＲＬ』を入れる。

<img src=”～”
：～に、『通常表示しておく画像のＵＲＬ』を入れる。

onmouseover=”this.src=’～'”
：～に、『マウスを乗せたとき表示する画像のＵＲＬ』を入れる。

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

です。

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

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

上記画像コード（例）

<a href="https://manabiyablog.com/wp-content/uploads/2014/09/5a98aecc50abc24016a8b4ce6d20ceae.jpg">
<img src="https://manabiyablog.com/wp-content/uploads/2014/09/5a98aecc50abc24016a8b4ce6d20ceae.jpg" onmouseover="this.src='https://manabiyablog.com/wp-content/uploads/2014/09/f3cdb0125c549e82bcb432047b3c7153.jpg'" onmouseout="this.src='https://manabiyablog.com/wp-content/uploads/2014/09/5a98aecc50abc24016a8b4ce6d20ceae.jpg'" />
</a>

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

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

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

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

通常表示

マウスオーバー時

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

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

header.phpの編集へ(Stinger3)

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

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

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

変更前のご注意

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

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

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

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

編集内容

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

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

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

src=”～”
：～に、『画像のＵＲＬ』を入れる。

onmouseover=”this.src=’～'”
：～に、『マウスオーバー時に表示するＵＲＬ』を入れる。

onmouseout=”this.src=’～'” />
：～に、『マウスを外した時に表示するＵＲＬ』を入れる。

と変えていきます。

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

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

  <img alt="まなびやブログ" src="https://manabiyablog.com/wp-content/uploads/2014/08/3a3ebe17350da7a11663597f2b30087f3.gif" width="986" height="150" onmouseover="this.src='https://manabiyablog.com/wp-content/uploads/2014/09/b50dd87eedd41b98f21fbe600c79800b.gif'" onmouseout="this.src='https://manabiyablog.com/wp-content/uploads/2014/08/3a3ebe17350da7a11663597f2b30087f3.gif'" />

編集箇所の確認

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

編集前

 <div id="container">
<div id="header">
  <div id="header-in">
    <div id="h-l">
      <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <?php bloginfo('name'); ?>
        </a></p>
      <?php if (is_home()) { ?>

編集後

<div id="container">
<div id="header">
  <div id="header-in">
    <div id="h-l">
      <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <img alt="まなびやブログ" src="https://manabiyablog.com/wp-content/uploads/2014/08/3a3ebe17350da7a11663597f2b30087f3.gif" width="986" height="150" onmouseover="this.src='https://manabiyablog.com/wp-content/uploads/2014/09/b50dd87eedd41b98f21fbe600c79800b.gif'" onmouseout="this.src='https://manabiyablog.com/wp-content/uploads/2014/08/3a3ebe17350da7a11663597f2b30087f3.gif'" />
        </a></p>
      <?php if (is_home()) { ?>

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