inoway流の心理学マーケティングは読者の好奇心に訴求するか？
見てみる
読者の興味をそそるホバーでクッキリ画像(＋黒歴史も公開中)
みなさんこんにちわ。
ついついYouTubeを見ちゃう病の
時間がいくらあっても足りん！！💢
うーん、確かにダラダラと集中力もなく横目で
情報発信、記事更新もしかりです・・・
(前回更新からだいぶ空いたなあ😓)
しかしですよ！
パソコンいじってる私のすぐ横で子供達が夢中になってキャッキャ見てるんですもの！
気にするなってほうが無理ですよ!
私はもともと作業が遅いうえに集中力がなく、静かな環境でひとりぼっちの時にしか記事が書けないのです(自慢)
もちろん、そんな時間はほとんどありません。
それはそーと、この場合に限らず見てはいけない状況や見てはいけない物って逆に見たくなりませんか？
そーゆーのって確か心理学用語でいうところのカリギュラ効果ってやつです。
人は隠された情報や禁止された行為を見たりやったりしたくなるんですよね。
と、言うわけで！！
今回は
- 『思わずカーソルを重ねてしまう』
- 『気になってクリックしてしまう』
- 『ついついタップしてしまう』
そんなナイスな効果を発揮するオレティメットショートコード
ホバーでクッキリ画像
をご紹介します。
[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]
わざと見えにくくして
マウスホバーした時に
クッキリ見えるようにする
マウスホバーした時に
クッキリ見えるようにする
スマホ等のタッチデバイスのかたはタップして下さい。
お使いのブラウザ環境等により
対応していない場合があります…
対応していない場合があります…
その仕組み
CSS のフィルター効果とホバー属性を使用しているだけです。
CSS filter
要素にボカシ、色反転、セピアなど様々なエフェクトを付与出来る属性。
別名『フォトショップいらず』
超便利だが未対応のブラウザあり。
CSShover
要素にマウスカーソルを乗せた時にエフェクトを実行させることが出来る属性。
オンマウス、ホバーエフェクトとも言われる。
スマホ等のタッチデバイスは未対応
(タップには反応するみたい)
要素にボカシ、色反転、セピアなど様々なエフェクトを付与出来る属性。
別名『フォトショップいらず』
超便利だが未対応のブラウザあり。
CSS
要素にマウスカーソルを乗せた時にエフェクトを実行させることが出来る属性。
オンマウス、ホバーエフェクトとも言われる。
スマホ等のタッチデバイスは未対応
(タップには反応するみたい)
ホバーとフィルターは前回、前々回で紹介したオレティメットショートコード、
画像効果と
マウスホバーで画像効果
でガンガン使いましたので詳しくはそちらも参考に
流れとしては
フィルターを適用
[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%)
左は私独自の名称です
実際に使ってみます
それでは実際にこの
【ホバーでクッキリ画像】
を使っていきたいと思います。
しかも今回は特別に・・・
ななななんと！！(南斗水鳥拳)
私が前のブログでアップしていた
落書きレベルのカラー漫画に使います！！
これは必見ですよ〜
なんせ、いわゆる黒歴史に俗する案件ですからね〜
ほら、他人の黒歴史は蜜の味ってゆーでしょ？
見たいでしょ？
見ちゃいますか？
うんうん、そーですよね〜
ならば魅せちゃいます！！
目ン玉かっぽじってとくと観よ！！
スマホ等のタッチデバイスのかたは画像をタップして下さい
お使いのブラウザ環境等により正しく動作しない可能性があります
漫画の内容、前後の文脈は無視しています
ぼかし
オーソドックスなボカシです。
ほとんど見えますね。
超ぼかし
キツめのボカシです。
恥ずかしくなんてないんだからねっ！
黒ぼかし
一番見えにくいやつです。
見ないで。
透過 超透過
ちょっとキツくなってきたな…
グレー セピア
げ、げ・ん・か・い・・・😵
ネガ調
やっと・・・終わった・・・
なんだろう。
当時(６年前？)は全く気にせずアップしていた画像にここまでプレッシャーを感じるとは。
・・・・
このコードの使い方
さて
気を取り直して、このショートコードの使用方法を説明します。
仕組みの項でも触れましたが基本的に
そのさい、フィルター効果を選ぶのですがドロップダウンで簡単に選べるように出来てます。
効果を選んで生成されたショートコード
(例)超ぼかし
[su_imgclear filter="cblurl"][/su_imgclear]
画像を挿入
(例)超ぼかし
[/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等の日本語翻訳機能をお使い下さい。
また漫画描こうかな・・・
