Warning: Constant WP_POST_REVISIONS already defined in /home/inoway/jiyuunasekai.net/public_html/wp-config.php on line 98

Warning: Constant AUTOSAVE_INTERVAL already defined in /home/inoway/jiyuunasekai.net/public_html/wp-config.php on line 99
スマホのタップ、PCのマウスオンで画像が変化するショートコード | GO ing inoway

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

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

ブンブンハロー要注意。

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

専業主夫なのか？
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/02/6c6c08e8967fcc840f5cd8cd5fa4f57e.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]
[su_icon icon="" background="rgba(0, 0, 0, 0)" color="#ffffff" size="50" shape_size="6" radius="100" margin="10px 0px 10px 1%"][/su_icon]
主夫じゃないですよ(笑)
それより冒頭のヒカ◯ンのパクリはなんなんだよ
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/04/f1a97720b70fcc60133f5fb1f312d067.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]
さて、(話題変更)

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

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

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

の２つです。

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

[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/members/cf/gazouh"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2018/06/c6affb2a7b3394faef60e24dc0d9861c.jpg" icon_size="95"]関連記事
予想以上に便利！画像変化系のオレティメットコードが使え過ぎる

見てみる

[/su_icon_text][/su_panel]

 

 

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

 

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

 

簡単に説明すると、

マウスホバーとは？

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

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

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

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

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

だいたいそんな感じ。

inoway

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

要はこの

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

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

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

じゃあ、ロールオーバー画像とかの名前のほうがよくないか？
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/04/f1a97720b70fcc60133f5fb1f312d067.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]
イメージホバーアクションのがかっこよくない？
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/02/b5a2bf593c5087d7050ea3be63a3415f.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]
・・・・・
ま、

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

ごちゃまぜにすんな
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/02/6c6c08e8967fcc840f5cd8cd5fa4f57e.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]

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

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

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

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

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

 

コレです

 

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

へー、誰に描いてもらったんですか？
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/03/e61ce4c2b7f7de0d542942671eaa9f98.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]

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

なんで嘘ついた？
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/04/47bb86fbc9cb1826759b24d647a9a3c7.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]
絵、キモ・・・
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/04/0b9fe6d315fc07ed9197ddf43956300d.png" background="#ffffff" color="#000" size="70" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]

 

え？

 

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

案ずるなかれ。

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

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

はい、原画です。

メモ紙に手書きの。

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

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

茶番はもうええわ
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/04/86aa62596e527a1cce300dc235c01bcc.png" background="#fff8ab" color="#000" size="100" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]

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

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

この

マウスホバーで画像効果

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

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

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

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

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

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

 

 拡大表示

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

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

 縮小表示

 

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

 傾き表示

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

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

名前あったんだ・・・
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/03/e61ce4c2b7f7de0d542942671eaa9f98.png" background="#eef4f4" color="#000" size="80" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]

 立体風表示

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

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

 回転表示

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

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

円形表示

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

拡大しながら丸く。

縮小しながら丸く。

傾きながら丸く。

立体っぽく丸く。

回転しながら丸く。

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

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

狼男アイコン

リンクっぽく変化

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

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

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

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

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

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

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

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

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

拡大とリンク。

縮小とリンクと丸く。

部屋とワイシャツと私。

 

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

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

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

も前回紹介した

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

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

ではやってみましょう♪

スライダーの場合

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

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

 カルーセルの場合

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

けっこういいですね。

回転カルーセル。

わー気持ちいい(笑)

 ギャラリーの場合

手順やタイムライン表現で使えるオレティメットコード手順やタイムライン表現で使えるオレティメットコード
吹き出しで会話を表現するショートコード創りました吹き出しで会話を表現するショートコード創りました
AIが創ったイラストを使えばキャラクターは無限に生み出せるAIが創ったイラストを使えばキャラクターは無限に生み出せる
あけまして誕生日おめでとうございますあけまして誕生日おめでとうございます
アイコンに感情パターンを追加しましたアイコンに感情パターンを追加しました
ShortcodesUltimateがクリスマスセールやってるぞ！！ShortcodesUltimateがクリスマスセールやってるぞ！！
カードゲームをすると頭が良くなるのを実感する(後編)カードゲームをすると頭が良くなるのを実感する(後編)
カードゲームすると頭が良くなるのを実感する(前編)カードゲームすると頭が良くなるのを実感する(前編)
後編集で記事の見た目を装飾すれば更新時間節約になる後編集で記事の見た目を装飾すれば更新時間節約になる
ちょっとまて！新元号『令和』はエイプリルフールネタかもしれないちょっとまて！新元号『令和』はエイプリルフールネタかもしれない

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

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

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

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

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

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

まとめ

[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2018/06/ff5c4d33fffd52f57cb665076d094f51.jpg" background="rgba(0, 0, 0, 0)" color="#ffffff" size="100" shape_size="6" radius="100" margin="10px 0px 10px 1%"][/su_icon]
オレティメットコード【マウスホバーで画像効果】、いかがだったでしょうか？

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

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

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

お前しゃべれるんかい
[su_icon icon="https://jiyuunasekai.net/wp-content/uploads/2017/02/6c6c08e8967fcc840f5cd8cd5fa4f57e.png" background="#d9dbcf" color="#000" size="100" shape_size="6" radius="100" margin="10px 1% 10px 0px"][/su_icon]
メンバーサイトへはコチラから登録出来ます
お名前
メールアドレス

任意のログイン用パスワード
[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/members/cf/msomk"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2018/05/027968ea4db82799f7091c54a26cf53c.jpg" icon_size="95"]関連記事
メンバーサイトにオレティメット倶楽部を追加しました

見てみる

[/su_icon_text][/su_panel]

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

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

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


[su_panel background="#fdfcef" border="1px solid #aa9a9a" shadow="3px 7px 5px #565362" radius="2" url="https://jiyuunasekai.net/members/cf/addonget"][su_icon_text icon="https://jiyuunasekai.net/wp-content/uploads/2019/03/shopping.webp" icon_size="95"]関連記事
Shortcodes Ultimate の拡張オプションを手に入れる方法

見てみる

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

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

Posted by inoway