コピペで簡単♪マウスをのせると変わる画像の超簡単な作り方

目安時間:約 5分

パソコンでいろんなサイトやブログを見ていると、マウスを動かしたときに「サッ」と画像が変わるバナーを見かけたりすることってありますよね。

こんなやつ。(マウスを当ててみてください^^)


「何!これ!!やりたいっっ!!!!(゚▽゚*)!!」

そう思って早速ググってみたんですが、CSSで作るやり方とかHTMLを使って…とか、私の超苦手なアルファベットが出てきてしまって

「もっと簡単に作る方法はないのかー(T_T)!?」

ととっても困ってしまいました。

いろいろ調べてみた結果「そうそう、私が探してたのはコレだよ、コレ!」と超簡単なマウスが乗ると動く画像の作り方を発見することができたので、ココに記しておきます(自分への備忘録( ̄ー ̄)フフ)

※ちなみにマウスがのらなくても勝手に動く画像の作り方もありますよん♪

コピペで超簡単!マウスがのると動く画像を作る方法

ではでは早速コピペでできる動く画像の作り方をご紹介しますね。

以下のコードをコピペして、
↓↓↓

<a href="■リンク先のURL■" target="_blank">
<img src='■マウスを乗せる前の画像URL■' onMouseOver=this.src='■マウスをのせているときの画像URL■' onMouseOut=this.src='■マウスをのせたあとの画像URL■'></a>

WordPressのテキストモードに貼り付けるだけ^^

 

 

図解。

ちなみにコピペはショートカットキーを使うと簡単♪

「ctrl+A」で全部の文字を選択、「ctrl+C」で文字をコピー、「ctrl+V」で貼り付けです。

 

めちゃくちゃ簡単でーす♪

ここでちょっと注意です。
使いたい画像は一旦ワードプレスのメディアの中にアップロードしてから使いましょー。

外部のサイトにある画像のURLだけ抜き出してでも作れることは作れるのですが、外部の画像を読み込んで自分のサイトで表示させる、という方法を使うとサーバーに負荷がかかりやすくなってしまうそうです(T_T)

 

サーバー負荷がかかるとサイトの表示速度が遅くなったり、外部の画像が削除されてしまったときに自分のサイトの画像が消えてしまうので注意しましょうね。

 

画像URLを確認する方法

ちなみに貼り付けたい画像のURLはこういうふうにして確認します。

まずワードプレスの左サイドバーの「メディア」→「ライブラリ」をクリックし、URLを知りたい画像をクリック。

添付ファイルの詳細画面の左にある「URL」をコピペする。

こっちも簡単です^^

マウスがのらなくても勝手に動く画像の作り方

今度はこういう勝手に動く画像の作り方です^^

こちらはフリーソフト(無料ソフト)のGIFアニメ機能を使います。

「ソフト」と聞くと「なんか難しいんじゃ…」と思われる(私のような)方もいらっしゃるかもしれないのですが、これももうめちゃくちゃ簡単です^^

やり方は図解で詳しく紹介しているので、よろしければどうぞー♪

ちなみに画像加工のフリーソフトは色々あるんですが、私が使っているフリーソフトはPhotoscape(フォトスケープ)というフリーソフトです。

動くギフ画像を作ったり、モザイクや文字入れ、枠つけ、スタンプ、トリミングなどの単体の画像の加工はもちろん、一括で複数の画像を加工することもできるのでとっても便利ですよ。

マウスホバーすると動く画像の作り方まとめ

今回はマウスホバーすると画像が変わるやり方について図解でお伝えしましたー。
※マウスホバーとは、画像やリンクにマウスをのせる(重ねる)ことです。

こういう画像がサイト内にあるとちょっと他と差をつけられますよね^^
楽しいブログライフを♪


ブログランキングに参加しています♪

「へぇー!」っと思っていただけたらクリックしていただけるととっても嬉しいです♪



にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ

コメントは6件です

  1. ゆきぴ より:

    こんばんは。
    ブログランキングからきました。
    コピペでできる動く画像の作り方解りやすくて
    参考になります。
    情報ありがとうございます。

    • yumi より:

      ゆきぴさん♪
      コメントありがとうございます!

      嬉しいです^^
      かわいいし、目立つのでブログがレベルアップしますよね。

  2. NABY より:

    こんばんは。ランキングから来ました。
    こういうのって、癒されますね。
    ついついクリックしたくなります。
    ポチっとしていきますね。

    • yumi より:

      NABYさん

      コメントありがとうございます^^

      そうなんですよー
      可愛いですよね(自分で言うのもなんですがw)

  3. yukko より:

    こんばんは、ブログランキングから来ました。
    動くキャラ可愛いですね。
    やってみようと思います。
    応援ポチッと押しました。

    • yumi より:

      yukkoさん

      コメントありがとうございます!
      可愛くできるとこちらもテンション上がります(笑)

      応援返し行きますねー!

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
ランキング何位かな?

マウスを近づけるとイイコトあるかも??
↓↓↓

にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ

カテゴリー
アーカイブ
メタ情報