スマホのタップ、PCのマウスオンで画像が変化するショートコード

ブンブンハロー要注意。

どうも、リアルで自分より家事をやってる旦那さんに会った事ない  inoway いのうぇい です。


専業主夫なのか?
主夫じゃないですよ(笑)
それより冒頭のヒカ◯ンのパクリはなんなんだよ

さて、(話題変更)

前回、超簡単に画像を変化させて表示するオレティメットショートコードを紹介しました。

その時に一緒にアップしていた残り2つのショートコードを覚えているでしょうか?

マウスホバーで画像効果
ホバーでクッキリ画像

の2つです。

今回はそのうちのひとつ、マウスホバーで画像効果のほうを紹介いたします。

関連記事
予想以上に便利!画像変化系のオレティメットコードが使え過ぎる

 


 

 オレティメットコード『マウスホバーで画像効果とは?』

 


マウスホバー・・・って知ってます?

 

簡単に説明すると、

マウスホバーとは?

別名、『オンマウス』または『マウスオーバー』。

『ホバー』と略されることもある。

マウスのポインター(カーソル)をテキストや画像、リンク等の上に重ねる行為のこと。

このとき、対象がアクション、変化することを『ロールオーバー』、『ホバーアクション』などと言う。

一般的にホバー時のみ変化するものが多く、マウスカーソルを外すと画像はもとにもどる。

だいたいそんな感じ。

inoway

うん、そんな感じですね。

要はこの

【マウスホバーで画像効果】

のオレティメットコードは画像にロールオーバー効果を付けるショートコードです。

つまりこのショートコードはカーソルを乗せたら変化する画像が超簡単に創れる魔法のコード。

じゃあ、ロールオーバー画像とかの名前のほうがよくないか?
イメージホバーアクションのがかっこよくない?
・・・・・

ま、

それはさておき、さっそくオレティメットショートコード【イメージホバー画像効果でロールオーバーアクション】を使っていきま~す。


ごちゃまぜにすんな

マッチョのアイコン ホバーアクションの種類


と、その前にこのコードを使用して画像に適用されるホバーアクション(画像効果)の種類をザッと紹介します。

アクションの種類
  • 拡大表示
  • 縮小表示
  • 傾き表示
  • 円形表示
  • 立体風表示
  • リンクっぽい表示
良いものがあれば今後も追加していきます

それでは実際にサンプル画像を使用してホバーアクションを確かめてみます。

で、そのサンプル画像なんですが今回無理言って某有名イラストレーターのかたに特別に描いてもらいました!!

 


コレです

 


へー、誰に描いてもらったんですか?

あ、実はだいぶ前に自分で描いたやつです。


なんで嘘ついた?
絵、キモ・・・

 


え?

 

こんなカラフルで美しい作品をサンプルに使用したら容量オーバーしちまうんじゃないかって?

案ずるなかれ。

ちゃんと対策は取ってあります。

画像 メディア チェ〜ンジ!!

はい、原画です。

メモ紙に手書きの。

しかも超圧縮して12KBにまでシェイプしました。


と、いうわけで今回はこちらのアート作品のプレミア原画を使ってコードの効果を検証していきたいと思います。


茶番はもうええわ

クエスチョン?マーク ホバー確認の注意事項


検証の前に注意事項をひとつ。

この

マウスホバーで画像効果

のオレティメットコードですが、中身は単純なCSSコードの反映です。

属性として hover ホバー という読んで字のごとくの効果を使用しています。

で、この hover さんなんですが実はスマホやタブレットなどのタッチデバイスでは機能しなかったりするんですね。

まあ、そもそもスマホではマウスホバーとか馴染みありませんしね・・・

ですが、タッチ(タップ)には反応するみたいです。

なのでスマホ、タブレットの方は画像をタップして効果を確認して下さい。また元に戻したい場合は他の関係無いところをタップしてみて下さい。
お使いのブラウザー環境によりホバーアクションが反映されない場合もあります

 


 拡大表示



触るとちょっとだけ大きくなります。

エロい意味ではありません

 縮小表示


 

さわると急激に萎え・・・小さくなります。


 傾き表示



触ると右に少しだけ傾きます。

まるで つるぎ ねこ太郎が喜んでるようですね。


名前あったんだ・・・

 立体風表示



触ると立体的な感じになります。

厳密には奥に傾いてるだけなんですが、まあ、それっぽいという事で(笑)


 回転表示



くるくる回って気持ちいいやつです。

ついつい多用してしまう悪魔の効果(大げさ)


円形表示


ここまでのホバー効果と組み合わせて使用する変化です

拡大しながら丸く。

縮小しながら丸く。

傾きながら丸く。

立体っぽく丸く。

回転しながら丸く。

さあ、あなたはどの丸く?

いや、どのタイプみたいに言うな

狼男アイコン

リンクっぽく変化


さらにもう一手間として組み合わせ出来る変化。

ホバー時にリンクっぽい演出をかもしだします。

ほら、よくありますよね?

画像の上にカーソル置いたら

「これはリンクですよー」

「クリックで違うページに飛ぶよー」

って感じで変化するやつ。

例えば少しだけ画像が透けるとか、影が出来るとか。

こちらはそのようなエフェクトを画像にあたえる項目です。


拡大とリンク。

縮小とリンクと丸く。

部屋とワイシャツと私。

 

 他のギャラリー系ショートコードと組み合わせる


はい、コチラのオレティメットコード

【マウスホバーで画像効果】

も前回紹介した

【画像効果】のショートコードと同じく、究極拡張プラグイン Shortcodes Ultimate ショートコード アルティメット に実装されているギャラリー系のショートコードにも適用できるんです。

スライダーとかカルーセルにですね。

ではやってみましょう♪


スライダーの場合


拡大するリンクっぽいスライダー。


縮小するレスポンシブかつクリックorタップによりlightboxで確認できる高速スライダー(早口)


 カルーセルの場合


立体的な動きをするリンクっぽいカルーセル。

けっこういいですね。


回転カルーセル。

わー気持ちいい(笑)


 ギャラリーの場合


これはさらにハイブリッド。

ギャラリーに前回紹介した画像効果のオレティメットコードと今回のマウスホバーを重ねがけ。

もともと傾いた状態からスタートすることによって手前から奥へグッと動く演出ができました。

この重ねる、合わせる、の組み合わせで他にもいろいろ出来そうですね〜。

やっぱショートコードの入れ子、面白い♪

Shortcodes Ultimate ショートコード アルティメット はショートコードの中にショートコードを入れることにより複雑な演出が可能です。慣れてきたら独自の組み合わせ順を探してみよう。

まとめ


オレティメットコード【マウスホバーで画像効果】、いかがだったでしょうか?

やりたいけど難しそうで敷居が高かったロールオーバー表現をホバー効果を選んで画像を間にいれるだけで簡単に実装できる。

これってメチャメチャ便利ですよ。

興味があれば是非ともメンバーサイトからダウンロードして使ってみてください。

お前しゃべれるんかい

メンバーサイトへはコチラから登録出来ます
お名前
メールアドレス

任意のログイン用パスワード
関連記事
メンバーサイトにオレティメット倶楽部を追加しました

 お知らせ

Short codes Ultimate の様々な機能と3つの拡張アドオンは公式サイトで詳しく確認出来ます。


公式サイト トップページ

Short codes Ultimateのショートコード一覧


拡張アドオン追加のスキン

拡張アドオンエクストラショートコード

拡張アドオンショートコードクリエイター

まとめてお得バンドルアドオン


リンク先はプラグイン制作元の海外のサイトになります。英語が苦手なかたは私と同じようにGoogle等の日本語翻訳機能をお使い下さい。
 

ランキング参加中です☆

あなたの応援が励みになりまくってます♪

この記事が少しでも為になった、面白かった、と思ったらクリックお願いします。

2 Responses to “スマホのタップ、PCのマウスオンで画像が変化するショートコード”

  1. Manohiroと申します。
    ブログランキングから訪問させて頂きました。

    こんなの、初めて知りました。

    そのうちに、挑戦します。

    ポチ、しました。

  2. はじめまして、こんにちは。
    オレティメットショートコード
    【イメージホバー画像効果でロールオーバーアクション】
    たのしいですね!面白かったです^^
    使ってみたいと思いつつ頭の中が、縮小高速スライダーしています。
    わたしの場合、
    まずは、落ち着いて作業しなさいということかもしれません;

コメントを残す

どうしても続けられないなら・・・

gaityu336.png

※話題の完全外注化ことフルオートメーションアドセンスパッケージ、略してFAAP(長いw)の製作者さんのメルマガへのバナーです。
外注化、放置、アドセンス、このへんのワードに反応するかたは登録してみるべきだと思います。
あと私のように面倒くさがりなかたも(笑)
自分で記事を書かないって戦略も有りですよ。