Embedded Files
script.aculo.usのようなJavaScriptのライブラリを利用して、画像を鏡面映り込み風に表示させるReflection.jsの、Wordpress プラグイン・WP Wetfloorをインストールしてみました。
参考：[WP:Plugin] 画像に反射効果を加えるReflection.js by AOINAさん
導入環境：WordPress 2.0.2
2007/1/25 修正 : 『画像の設定』 2で相対パスで画像の場所を指定するよう記載していましたが、フルパスで指定するように修正しました。
まず WP Wetfloor 適用結果から
まず 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)で見ると、リフレクトはするものの全く透けない仕上がりです＞＜↓↓↓
Page updated
Report abuse