2013
4
16
画像に影をつけるワードプレスプラグインShadowsの使い方

ブログ記事の中に画像があると見栄えが良くなっていい感じになるものですが、どうせならもっと見栄え良くデザインを強化したいですよね?

そこで今回は、ワードプレスのブログの記事中の画像に影をつけるプラグインShadowsの使い方を紹介していきます。

Shadowsを使うとどんな感じになる?


それでは、まずはこのプラグインを導入した場合、どのように画像は表示されるのかを見てみましょう。Shadowsで表示できるのは全部で4パターンあります。














画像の下の部分や横の部分に影がつくようになり、より画像部分がが際立って見えるようになりましたね。今回はカラフルな感じの画像なので良いのですが、外枠が白色の画像をそのまま使うとかなりにくかったりするので、そういう画像においては非常に重宝するプラグインです。


続いて何も手を加えていない状態の画像がこちらです。







もちろんこれが悪いわけではないのですが、先程の影がついている場合に比べて少し見栄えが劣る感じがしますよね。Shadowsでは、このように画像をより美しく見せるための影をつけることが可能になります。



Shadowsの使い方


それではプラグインの使い方を説明していきます。まずはプラグインをダウンロードして有効化しましょう。有効化の方法が分からなければこちらのをご覧ください。

Shadowsは特に難しい設定などは必要ないので、あとは画像を記事内に挿入する際にタグを入れることによってプラグインが機能します。


先程、全部で4パターンの影の姿があるとお話しましたが、

・shadow_curl
・shadow_flat
・shadow_osx
・shadow_osx_small


この四つのいずれかをクラス指定することで、プラグインが動作するわけです。少し具体的な例を見てましょうか。


<img src="画像URL"width="400">


画像を挿入する際の html と言えばこんな感じだと思いますが、ここにclassタグを入れる必要があります。例えば、shadow_curlを適用したい場合であれば、


<img src="画像URL"width="400" class="shadow_curl">


このような感じで入力することで、プラグインが動作して画像に影がつくようになります。パターンを変更したい場合は、class=”●●”この黒丸の部分を四つのいずれかに変更すれば OK です。

AddQuicktagと組み合わせれば、毎回タグを挿入することもそこまで苦にはならないので、このプラグインはぜひ導入しておきたいプラグインですね。


ちなみにAddQuicktagの設定はこちらをご覧ください。

世界を自由に飛び回りながら生きてみませんか?

コメントを残す

CAPTCHA


サブコンテンツ
特商法

このページの先頭へ