予想以上に便利!画像変化系のオレティメットコードが使え過ぎる
2018年6月22日今この時に伝えたい緊急号外記事,楽しみながら継続するための簡単カスタマイズWordPress,オレティメット,プラグイン,究極プラグイン
inoway です。
ここだけの話し、前に運営していたブログでは直筆のカラー漫画なんかもアップしていた inoway です。
関連記事読者の興味をそそるホバーでクッキリ画像(+黒歴史も公開中) 見てみる
さて、
ここ最近、立て続けにアップしているオレティメットショートコード※ですが今回もまた新たな刺客を引っさげてやってまいりました。
自分でいうのもなんですがはっきり言って
自信作 です。
実際使ってみて超便利だったので間違いなく需要はあると思います。
[su_ckf dare="-w2-l" sigusa="douzo" poi="gimon" iro="red" midasi="オレティメットコードとは?"]WordPressを多彩なショートコードでメガチャージする究極プラグイン、ショートコード アルティメットの拡張アドオンのひとつ、ショートコードクリエイターで創ったオリジナルなショートコードのこと。inowayが自分用に作っただけあって便利なものが揃ってますよ♪[/su_ckf]
関連記事Shortcode Creatorで創ったショートコードをシェアします 見てみる
公式サイトショートコードクリエイター
冒頭でも書きましたが超便利。
そして意味もなく思わず使いたくなるようなシロモノ(笑)
効果を選んで画像を挟むだけで驚きの効果を実装できるショートコードです。
しかもそんな感じのを3種類 も用意しました。
こいつらです。
マウスホバーで画像効果
マウスカーソルを乗せた画像を変化させる
ホバーでクッキリ画像
マウスカーソルを乗せるとハッキリ見える画像
う~ん、全て自信作♪
まず紹介するのは今回このために急遽作成したオレティメットショートコード、その名も『画像効果』です。
こちらは差し込んだ画像を超お手軽に変身表示させてしまう魔法のコードです。
はい。具体的には形を変えて表示したり、透過、点滅、ぼかし等のエフェクトを追加します。
現在のエフェクトの種類- 丸くする
- 前にかたむける
- 奥にかたむける
- 右にかたむける
- 左にかたむける
- 透過する
- 点滅する
- ぼかし
- セピア
- ネガ調
今後も増やす予定です
それでは実際にサンプル画像に適用してみます。で、そのサンプル画像なんですが、今回特別に無理を言って何とあの国宝【鳥獣戯画】をお借りしてきました。
これです。[su_alpi code="arrow4l-r-b"]
すいません、出来るだけ軽い(データ量が少ない)ほうがサンプルに適してたんで白黒のコチラの画像をチョイスしました(笑)
(※ちなみに正月に実家で描いた最近の作品です)
それではちょっと前置きが長くなりましたが、オレティメットショートコード画像効果、使ってみましょう♪
ここまでの効果をいろいろ組み合わせて表示することも出来ます。
呪文の重ねがけみたいな感じで。
丸くして、奥にかたむけつつセピア!みたいな。
左にかたむけて点滅するネガ調です。使いどころは・・・あなた次第です(笑)
このテクニックは高度です。
いや、やること自体は単純なんですけどけっこう知られていないテクニックです。多分。
私自身、好奇心から発見したんですが実は Shortcodes Ultimate にもともとあるギャラリー系のショートコードは他の画像変化系のCSSが適用できるんです。
つまりカルーセルとかスライダーとかに今回紹介した画像効果のショートコードを組み合わせることが出来るんですね。
関連記事超凄いぞ!究極のWordPressプラグイン! 見てみる
こんな感じですね。
スライダーを右にかたむけてセピア
点滅する立体っぽいカルーセル
かたむけたギャラリーをぼかし効果で見えにくく
こちら、
囲み型のショートコードと言うものになります。
簡単に説明すると
コードの間に挟んだ画像に自動で適用されます
効果を選んで画像を追加、それだけでOKです。超簡単。
Shortcodes Ultimate から画像効果を選ぶ

既存コード+自作コードでえらい数になってますが気にしないで下さい
画像に適用したい効果を選ぶ

出たコードの中に画像を差し込む
[su_imgups maruk="emaruk" katam="ekatamb" sukeru=" " filter="eSepia"]

[/su_imgups]
これでロケットが奥に傾きつつ丸いセピアで表示されます
使い方動画
[youtube-adds id="https://youtu.be/u8T8SCZoqNE" style="gi-king1″ margin="2%" popup="https://jiyuunasekai.net/wp-content/uploads/2018/06/c6affb2a7b3394faef60e24dc0d9861c.jpg" annotation="1″ url="https://jiyuunasekai.net/members/cf/gazouh" title="予想以上に便利!画像変化系のオレティメットコードが使え過ぎる" desc="この動画の記事はこちら" img="https://jiyuunasekai.net/wp-content/uploads/2018/06/c6affb2a7b3394faef60e24dc0d9861c.jpg" adtype="5″ action="4″ colorbg="#eeee22″ colortext="#dd3333″ time="30″]
画像効果
いかがだったでしょうか?上記のようなエフェクトを簡単に画像に付与できる魔法、オレティメットショートコード『画像効果』。
基本、効果を選んで画像に適用させるだけで発動する優れものです。
ほんと、適用させたい画像効果を選んで任意の画像をショートコードに挟むだけですからね。
マジでこのシステムのプラグインを開発した Shortcodes Ultimate の作者さん神ですわ。
だって、たいしたwebスキルもない私でもググって得た情報だけでこんなお役立ちのショートコードが創れるんですから。
あ、もちろんこのオレティメットショートコード【画像効果】もメンバーサイトにてシェアしています。
他の2つ(マウスホバーで画像効果とホバーでクッキリ画像)も同時にアップしてるので興味があるかたは是非ダウンロードして使ってみて下さい。関連記事メンバーサイトにオレティメット倶楽部を追加しました 見てみる
ディスカッション
コメント一覧
まだ、コメントがありません