[2007/01/09] WP Wetfloor：画像を鏡面映り込み風表示させるプラグイン

script.aculo.usのようなJavaScriptのライブラリを利用して、画像を鏡面映り込み風に表示させるReflection.jsの、Wordpress プラグイン・WP Wetfloorをインストールしてみました。

• 配布元：Siuyee Presents...:WP Wetfloor 1.6a

• 参考：[WP:Plugin] 画像に反射効果を加えるReflection.js by AOINAさん

• 導入環境：WordPress 2.0.2

2007/1/25 修正 : 『画像の設定』 2で相対パスで画像の場所を指定するよう記載していましたが、フルパスで指定するように修正しました。

まず WP Wetfloor 適用結果から

上右図[適用後]は、Wordpressサイト上での見栄えをキャプチャした加工画像で、このサイト上ではスクリプトで鏡面化しているのではありません。あしからず＞＜

インストール

ダウンロードファイル(zip)を解凍した内容物、wp-wetfloor.php・includesフォルダ・imagesフォルダをwp-content\plugins にアップロードし、プラグイン管理画面で有効化をクリック。

画像の設定

1) インストールが完了すると、投稿画面・テキストエディタのツールバーに下のようなアイコンが表示されます。

2) アイコンをクリックすると画像のパス(URI)を求められるので入力します。自サイト内の画像であれば、ブログトップページのURI以降のパスを指定し、画像の場所をhttp://~から始まるフルパスで入力し、OKをクリックします。

3) 映り込みの高さを％で求められるので数値のみを入力し、OKをクリックします。空欄でデフォルト値。

4) 透明度を％で求められるので数値のみを入力し、OKをクリックします。空欄でデフォルト値。

5) HTMLのソースに直に書くと次のようになります。 (rheight=高さ / ropacity=透明度 各すぐ後に％数値

<img class="reflect rheight60 ropacity60" src="http://your_blog_domain/images/xxx.gif" />

2016/5/10 追記 : この記事を書いた当時のWPバージョンは2.0.2でございました。時代は移ろい今日現在の最新バージョンは4.5.2。レンダリングの仕様なのか、サーバ側のアップデートに古いままのWP/プラグインが付いていけなくなったのか原因は追究していませんが、Chrome亜種のセキュア強化ブラウザComodo Dragon(48.12.18.249)で見ると、リフレクトはするものの全く透けない仕上がりです＞＜↓↓↓