画像に影をつけてくれるプラグイン『shadow』解説

記事に画像を使うとき少しでも綺麗に見せたいですよね。

というわけでまずは下の2枚の画像を見比べてください。

shadow_none shadow_osx

いかがでしょうか?下のほうが綺麗じゃありませんか?

こんな影を自動でつけてくれるのが今回紹介するプラグインが『shadow』です。

このプラグインはつけれる画像を4つの中から選ぶことができます。

shadow_curl

shadow_flat

shadow_flat

shadow_curl

shadow_osx

shadow_osx

shadow_osx_small

shadow_osx_small

僕は、shadow_osxを使っていましたがなんでもいいと思いますよ。使い方は、画像を差し込む際にそのソースコードにクラスを追加してあげればOKです。

例えばshadow_osx_smallを使いたい場合は、

通常は<img src=”画像URL”width=”500px”>というところを

<img src=”画像URL”width=”500px” class=”shadow_osx_small”>

という感じにすればOKです。

 

応用編

コアファイルをいじると、自動で毎回クラスを追加してくれて自動で影を追加してくれるように設定できます。

「wp-includes/media.php」を開き、以下の箇所を変更します。
media.php 231行目ぐらいの

[css]$html = ‘<img src="’ . esc_attr($img_src) . ‘" alt="’ . esc_attr($alt) . ‘" title="’ . esc_attr($title).’" ‘.$hwstring.’class="’.$class.’" />’;[/css]



[css]$html = ‘<img src="’ . esc_attr($img_src) . ‘" alt="’ . esc_attr($alt) . ‘" title="’ . esc_attr($title).’" ‘.$hwstring.’class="’.$class.’ 『好きなクラス名』" />’;[/css]

に変更してください。好きなクラス名には追加したい影のクラス名を入れてください。

無料でウェブマーケティングを勉強しませんか?

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。

    ABOUTこの記事をかいた人

    タロウ

    1990年3月9日神戸生まれ。 webが好きです、でもラーメンはもっと好きです。SEOには自信があります。最近太ってきたせいで着る服がありませんが、太ってきたのであったかいです。 Twitter・Facebookから友達申請よろ!