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

2018年6月30日今この時に伝えたい緊急号外記事,楽しみながら継続するための簡単カスタマイズWordPress,オレティメット,カスタマイズ,プラグイン,究極プラグイン

ブンブンハロー要注意。

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


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

さて、(話題変更)

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

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

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

の2つです。

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

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

見てみる

 


 

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

 


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

 

簡単に説明すると、

マウスホバーとは?

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

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

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

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

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

だいたいそんな感じ。

inoway

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

要はこの

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

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

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

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

ま、

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


ごちゃまぜにすんな

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


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

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

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

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

 


コレです

 

[su_alpi code="arrow4l-r-b"]


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

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


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

 


え?

 

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

案ずるなかれ。

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

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

はい、原画です。

メモ紙に手書きの。

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


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


茶番はもうええわ

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


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

この

マウスホバーで画像効果

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

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

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

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

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

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

 


 拡大表示



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

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

 縮小表示


 

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


 傾き表示



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

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


名前あったんだ・・・

 立体風表示



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

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


 回転表示



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

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


円形表示


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

拡大しながら丸く。

縮小しながら丸く。

傾きながら丸く。

立体っぽく丸く。

回転しながら丸く。

[su_ckf dare="-w2-l" sigusa="douzo" poi="kensho" iro="yellow" midasi="さあ、あなたはどの丸く?"][/su_ckf]

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

狼男アイコン

リンクっぽく変化


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

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

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

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

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

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

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

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

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


拡大とリンク。

縮小とリンクと丸く。

部屋とワイシャツと私。

 

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


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

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

も前回紹介した

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

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

ではやってみましょう♪


スライダーの場合


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


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


 カルーセルの場合


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

けっこういいですね。


回転カルーセル。

わー気持ちいい(笑)


 ギャラリーの場合


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

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

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

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

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

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

まとめ


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

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

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

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

お前しゃべれるんかい

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

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

見てみる


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

公式サイト トップページ
Short codes Ultimateショートコード一覧
拡張アドオン追加のスキン
拡張アドオンエクストラショートコード
拡張アドオンショートコードクリエイター
まとめてお得バンドルアドオン

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


関連記事
Shortcodes Ultimate の拡張オプションを手に入れる方法

見てみる

[su_tweet tweetw=" "]1013401276543987713[/su_tweet]