読者の興味をそそるホバーでクッキリ画像(＋黒歴史も公開中)

2018年7月28日

みなさんこんにちわ。

ついついYouTubeを見ちゃう病の inoway いのうぇい です。

時間がいくらあっても足りん！！💢
　
いやいや、ちゃんと作業しろよ

うーん、確かにダラダラと集中力もなく横目で YouTube ユーチューブ 見てりゃ、アフィリエイトの作業も 滞 とどこお りがちですよね。

情報発信、記事更新もしかりです・・・

(前回更新からだいぶ空いたなあ😓)

しかしですよ！

パソコンいじってる私のすぐ横で子供達が夢中になってキャッキャ見てるんですもの！

気にするなってほうが無理ですよ!

逆切れ・・・

私はもともと作業が遅いうえに集中力がなく、静かな環境でひとりぼっちの時にしか記事が書けないのです(自慢)

もちろん、そんな時間はほとんどありません。
それはそーと、この場合に限らず見てはいけない状況や見てはいけない物って逆に見たくなりませんか？
そーゆーのって確か心理学用語でいうところのカリギュラ効果ってやつです。
人は隠された情報や禁止された行為を見たりやったりしたくなるんですよね。
関連記事
inoway流の心理学マーケティングは読者の好奇心に訴求するか？

　見てみる　

と、言うわけで！！
今回は
  • 『思わずカーソルを重ねてしまう』
  • 『気になってクリックしてしまう』
  • 『ついついタップしてしまう』
そんなナイスな効果を発揮するオレティメットショートコード
ホバーでクッキリ画像
をご紹介します。
[su_ckf dare="-w1-l" sigusa="douzo" poi="gimon" iro="yellow" midasi="オレティメットショートコードとは？"]inoway がWordPressのプラグイン、ショートコードクリエイターで創ったオリジナルのショートコードのこと
本人が便利に作業するために創っただけあって役に立つ面白い物が揃ってますよ💓[/su_ckf]
オレティメット関連記事

 ホバーでクッキリ画像

ここまでの茶番で全くわからなかった方のためにホバーでクッキリ画像がどんなものかザックリと説明します。
こちらのショートコード、囲み型です。

囲み型ショートコードとはその名のとおり
コードで囲んだ要素に効果を発揮する
ショートコードです。
[ショート]コンテンツ[/コード]
[su_alpi code="arrow4l-b-t"][/su_alpi]
上の [ ] かっこ と [ ] かっこ で囲まれた間のコンテンツ(要素)に様々な効果を与えることができるショートコード。
で、今回紹介する
ホバーでクッキリ画像がコンテンツに与える要素は・・・
コチラです！！
[su_alpi code="arrow4l-b-b"][/su_alpi]
わざと見えにくくして
マウスホバーした時に
クッキリ見えるようにする
※PCのかたはマウスカーソルを重ねて下さい。
スマホ等のタッチデバイスのかたはタップして下さい。
お使いのブラウザ環境等により
対応していない場合があります…

クエスチョン？マーク その仕組み

種明 たねあ かしは単純です。
CSS のフィルター効果とホバー属性を使用しているだけです。
CSS filter フィルター
要素にボカシ、色反転、セピアなど様々なエフェクトを付与出来る属性。
別名『フォトショップいらず』
超便利だが未対応のブラウザあり。

CSS hover ホバー
要素にマウスカーソルを乗せた時にエフェクトを実行させることが出来る属性。
オンマウス、ホバーエフェクトとも言われる。
スマホ等のタッチデバイスは未対応
(タップには反応するみたい)
ホバーとフィルターは前回、前々回で紹介したオレティメットショートコード、

画像効果と
マウスホバーで画像効果
でガンガン使いましたので詳しくはそちらも参考に
関連記事
スマホのタップ、PCのマウスオンで画像が変化するショートコード

　見てみる　

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

　見てみる　

流れとしては
フィルターを適用
[su_alpi code="arrow4l-g-b"][/su_alpi]
ホバーでフィルター解除
という非常にシンプルなものです。
俺様、シンプルなの好きだぜ

目のアイコン 適用するフィルター

CSS で使えるフィルター効果はけっこうあるんですけど私的に

「これいらないだろ・・・」
と思うものを 省 はぶ いています。
そもそもこのショートコード自体、多用乱発するものでもないし。
使用フィルター効果
    • ぼかし　　blur(2px)
    • 超ぼかし　blur(10px)
    • 黒ぼかし　blur(5px) brightness(40%)
    • 透過　　　opacity(50%)
    • 超透過　　opacity(25%)
    • グレー　　contrast(20%)
    • セピア　　Sepia(100%)
    • ネガ調　　Invert(100%)
左は私独自の名称です
ならば使って余に見せよ

実際に使ってみます

それでは実際にこの
【ホバーでクッキリ画像】
を使っていきたいと思います。
しかも今回は特別に・・・
ななななんと！！(南斗水鳥拳)

私が前のブログでアップしていた
落書きレベルのカラー漫画に使います！！
これは必見ですよ〜
なんせ、いわゆる黒歴史に俗する案件ですからね〜
ほら、他人の黒歴史は蜜の味ってゆーでしょ？
見たいでしょ？
見ちゃいますか？
うんうん、そーですよね〜
ならば魅せちゃいます！！
目ン玉かっぽじってとくと観よ！！
これが俺の全盛期の画力、100%中の100%だっ！！
　
スマホ等のタッチデバイスのかたは画像をタップして下さい
お使いのブラウザ環境等により正しく動作しない可能性があります
漫画の内容、前後の文脈は無視しています

 ぼかし

オーソドックスなボカシです。
ほとんど見えますね。

 超ぼかし

キツめのボカシです。
恥ずかしくなんてないんだからねっ！

 黒ぼかし

一番見えにくいやつです。
見ないで。

 透過　超透過

透過

超透過

ちょっとキツくなってきたな…

 グレー　セピア

グレー

セピア

げ、げ・ん・か・い・・・😵

ネガ調

やっと・・・終わった・・・
なんだろう。
当時(６年前？)は全く気にせずアップしていた画像にここまでプレッシャーを感じるとは。
あんまり上手じゃないからでは？
・・・・

学生帽 このコードの使い方

さて
気を取り直して、このショートコードの使用方法を説明します。

仕組みの項でも触れましたが基本的に
Shortcodes Ultimate ショートコード アルティメット からホバーでクッキリ画像のショートコードを選び、間に適用したい画像を挿入するだけです。
そのさい、フィルター効果を選ぶのですがドロップダウンで簡単に選べるように出来てます。
 

 

こんな感じですね

 

効果を選んで生成されたショートコード
(例)超ぼかし

[su_imgclear filter="cblurl"][/su_imgclear]

 

画像を挿入
(例)超ぼかし

 

[su_imgclear filter="cblurl"]ロケット[/su_imgclear]

 

実際の表示
(例)超ぼかし

 

ロケット

 

超簡単です。

使い方解説動画
[youtube-adds id="https://youtu.be/2wkkhltdICc" style="gi-king1″ margin="2%" popup="https://jiyuunasekai.net/wp-content/uploads/2018/07/05806cb093c70fc4a509665dcce5393a.jpg" annotation="1″ url="https://jiyuunasekai.net/members/cf/hoverk" title="読者の興味をそそるホバーでクッキリ画像(＋黒歴史も公開中)" desc="この動画の記事はこちら" img="https://jiyuunasekai.net/wp-content/uploads/2018/07/05806cb093c70fc4a509665dcce5393a.jpg" adtype="5″ action="4″ colorbg="#eeee22″ colortext="#dd3333″ time="30″]

マッチョのアイコン このショートコードの使いどころ

 

まあ、相性がいいのはエ◯系とかグ◯系とかですかね・・・

全然隠せてないゾ

性欲の探求心は凄いですからね。
それに怖いもの見たさからくる好奇心。

 

このへんに訴求できるコンテンツに使えるのではないかと。

 

普通にナゾナゾとかでも面白そうですよね

そうですね。

 

普通のブログでも読者の興味を引く仕掛けがつくれると思います。

これって、名前は

【ホバーでクッキリ画像】

ってショートコードですけどフィルター効果は画像以外にも適用できますからね。

テキストとかにも普通にボカシとかかけれますから。

なので実際にクイズ的なものにはもってこいでしょう。

たとえば・・・

クイズです！！

inoway家の愛犬の名前は？

答え　アイス

いや、隠すのは答えのほうな

 コードは無料でシェアしています

今回紹介したショートコードも含め、他にも沢山のお役立ちコードをシェアしています。

簡単に使えて面白い効果を発揮するオリジナルのショートコード。

興味がある人は遠慮なくメンバーサイトからダウンロードして下さい。

関連記事
メンバーサイトにオレティメット倶楽部を追加しました

　見てみる　

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

任意のログイン用パスワード

※オレティメットショートコードのご使用にはWordPressのプラグイン、ショートコードクリエイターが必要です。


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

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

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

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

　見てみる　


また漫画描こうかな・・・

メンタルすげーな

楽しみながら継続するための簡単カスタマイズWordPress, お役立ちツール, オレティメット, ショートコード, プラグイン, 究極プラグイン

Posted by inoway