賢威6.2やシリウスでマウスオーバー時に画像を切り替える方法
今回はマウスのポインタを画像に当てた際に、
画像を動かし注目させる方法を紹介します。
この方法をうまく利用すれば注目度を上げて
サイト回遊率や閲覧率を高めることができます。
マウスオーバー時に画像を変える方法
方法は非常に簡単です。
1 |
<img src="通常時の画像URL" alt="" onmouseover="this.src='切り替え画像URL';" onmouseout="this.src='通常時の画像URL'" /> |
2つの画像のURLを取得して
上記コードの『通常時の画像URL』と
『切り替え画像URL』に記入するだけで、
マウスオーバーした際に画像が
変わるようになっています。
また、
賢威の場合はテキストモードで作製しますが、
ビジュアルモードに移るとコードが崩れる場合があります。
よって
入力が終わったらテキストモードの状態で保存し、
ビジュアルモードでの操作は
行わないことをおすすめします。
この方法はうまく利用すれば訪問者に
インパクトを与えサイトを印象付けることができます。
是非有効に利用して訪問者の注目度や、
クリック率を上げていきましょう。
また、
賢威6.2とシリウスの全パーツカスタマイズ一覧まとめページを作成しましたので、
他の箇所をカスタマイズされたい場合は一度見てみて下さいね。
⇒賢威6.2【全カスタマイズを一覧まとめ】ワードプレステンプレート
⇒シリウス【全カスタマイズを一覧まとめ】HTMLテンプレート
Warning: Declaration of Social_Walker_Comment::start_lvl(&$output, $depth, $args) should be compatible with Walker_Comment::start_lvl(&$output, $depth = 0, $args = Array) in /home/su620620/netbe.jp/public_html/wp-content/plugins/social/lib/social/walker/comment.php on line 0
Warning: Declaration of Social_Walker_Comment::end_lvl(&$output, $depth, $args) should be compatible with Walker_Comment::end_lvl(&$output, $depth = 0, $args = Array) in /home/su620620/netbe.jp/public_html/wp-content/plugins/social/lib/social/walker/comment.php on line 0
こんにちは、ブログランキングから来ました
イシザカと申します。
今回の記事「マウスオーバー時に画像を変える方法」
こんな事ができるんだ!っと新しい発見でした!
私はWPのテンプレートは「THE WORLD」を使ってますが今度可能かどうか試してみたいと思います。
応援ポチさせて頂きました。
またブログ読ませて頂きに来ますので
宜しくお願いします。
イシザカさん
コメントありがとうございます。
参考にして頂けたようで良かったです。
ワードプレスのカスタマイズに関しては、
様々なバリエーションで紹介していますので、
参考にして頂ければと思います。
お返しクリックさせて頂きました。