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


みなさんこんにちわ。

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


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

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

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

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


しかしですよ!

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

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

逆切れ・・・

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

もちろん、そんな時間はほとんどありません。

それはそーと、この場合に限らず見てはいけない状況や見てはいけない物って逆に見たくなりませんか?

そーゆーのって確か心理学用語でいうところのカリギュラ効果ってやつです。

人は隠された情報や禁止された行為を見たりやったりしたくなるんですよね。

関連記事
inoway流の心理学マーケティングは読者の好奇心に訴求するか?

と、言うわけで!!
今回は
  • 『思わずカーソルを重ねてしまう』
  • 『気になってクリックしてしまう』
  • 『ついついタップしてしまう』

そんなナイスな効果を発揮するオレティメットショートコード

ホバーでクッキリ画像

をご紹介します。

オレティメットショートコードとは?

inoway がWordPressのプラグイン、ショートコードクリエイターで創ったオリジナルのショートコードのこと
本人が便利に作業するために創っただけあって役に立つ面白い物が揃ってますよ💓

オレティメット関連記事

 ホバーでクッキリ画像


ここまでの茶番で全くわからなかった方のためにホバーでクッキリ画像がどんなものかザックリと説明します。

こちらのショートコード、囲み型です。


囲み型ショートコードとはその名のとおり

コードで囲んだ要素に効果を発揮する

ショートコードです。

[ショート]コンテンツ[/コード]

上の [ ] かっこ [ ] かっこ で囲まれた間のコンテンツ(要素)に様々な効果を与えることができるショートコード。

で、今回紹介する

ホバーでクッキリ画像がコンテンツに与える要素は・・・

コチラです!!


わざと見えにくくして
マウスホバーした時に
クッキリ見えるようにする
※PCのかたはマウスカーソルを重ねて下さい。
スマホ等のタッチデバイスのかたはタップして下さい。

お使いのブラウザ環境等により
対応していない場合があります…

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


種明 たねあ かしは単純です。

CSS のフィルター効果とホバー属性を使用しているだけです。

CSS filter フィルター
要素にボカシ、色反転、セピアなど様々なエフェクトを付与出来る属性。
別名『フォトショップいらず』
超便利だが未対応のブラウザあり。


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

ホバーとフィルターは前回、前々回で紹介したオレティメットショートコード、


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

でガンガン使いましたので詳しくはそちらも参考に

関連記事
スマホのタップ、PCのマウスオンで画像が変化するショートコード
関連記事
予想以上に便利!画像変化系のオレティメットコードが使え過ぎる

流れとしては

フィルターを適用
ホバーでフィルター解除

という非常にシンプルなものです。

俺様、シンプルなの好きだぜ

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


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


これいらないだろ・・・」

と思うものを はぶ いています。

そもそもこのショートコード自体、多用乱発するものでもないし。

使用フィルター効果
    • ぼかし  blur(2px)
    • 超ぼかし blur(10px)
    • 黒ぼかし blur(5px) brightness(40%)
    • 透過   opacity(50%)
    • 超透過  opacity(25%)
    • グレー  contrast(20%)
    • セピア  Sepia(100%)
    • ネガ調  Invert(100%)
左は私独自の名称です

ならば使って余に見せよ

実際に使ってみます


それでは実際にこの

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

を使っていきたいと思います。

しかも今回は特別に・・・

ななななんと!!(南斗水鳥拳)


私が前のブログでアップしていた

落書きレベルのカラー漫画に使います!!

これは必見ですよ〜
なんせ、いわゆる黒歴史に俗する案件ですからね〜

ほら、他人の黒歴史は蜜の味ってゆーでしょ?
見たいでしょ?
見ちゃいますか?

うんうん、そーですよね〜

ならば魅せちゃいます!!
目ン玉かっぽじってとくと観よ!!

これが俺の全盛期の画力、100%中の100%だっ!!

スマホ等のタッチデバイスのかたは画像をタップして下さい
お使いのブラウザ環境等により正しく動作しない可能性があります
漫画の内容、前後の文脈は無視しています

 ぼかし



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

 超ぼかし



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

 黒ぼかし



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

 透過 超透過


透過

超透過


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

 グレー セピア


グレー

セピア


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

ネガ調



やっと・・・終わった・・・

なんだろう。
当時(6年前?)は全く気にせずアップしていた画像にここまでプレッシャーを感じるとは。

あんまり上手じゃないからでは?

・・・・

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


さて

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


仕組みの項でも触れましたが基本的に

Shortcodes Ultimate ショートコード アルティメット からホバーでクッキリ画像のショートコードを選び、間に適用したい画像を挿入するだけです。

そのさい、フィルター効果を選ぶのですがドロップダウンで簡単に選べるように出来てます。
 

 

こんな感じですね

 


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

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

 


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

 

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

 


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

 

ロケット

 


超簡単です。

 


 

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

 


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


全然隠せてないゾ

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

 

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

 


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

そうですね。

 

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

これって、名前は

【ホバーでクッキリ画像

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

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

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

たとえば・・・


クイズです!!

inoway家の愛犬の名前は?

答え アイス

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

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


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


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


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

関連記事
メンバーサイトにオレティメット倶楽部を追加しました
メンバーサイトへはコチラから登録出来ます
お名前
メールアドレス
任意のパスワード
もちろん無料です

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

 お知らせ

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


公式サイト トップページ

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


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

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

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

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


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

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


メンタルすげーな

ランキング参加中です☆

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

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

4 Responses to “読者の興味をそそるホバーでクッキリ画像(+黒歴史も公開中)”

  1. ランキングからきました。いろんなぼかし、楽しかった。
    まだ、初心者なので使えそうにないですが、こんなことができるのかと
    勉強になりました。

  2. こんにちは。

    ランキングサイトよりきましたマチャです。
    ホバーってこういう使い方もたくさんあるのですね!

    参考になりました!!

  3. こんにちは。
    ブログランキングからきました。
    ホバーの使い方沢山あるのですね。
    イラスト解説で分かりやすかったです。

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

    はじめての訪問です。

    奥が深いですね。

    あたまが、ついていけませんでした。

    また、訪れます。

    ポチ、しました。

コメントを残す

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

gaityu336.png

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