WordPressで画像を貼ると、何もしない状態ではこんな感じ↓ですね。
この画像にふわっとした影を付けるとこんな感じ↓になります。
ちょっとしたことですが、立体感が出て雰囲気が違いますよね。
実はこれ、それほど難しくないので、その方法を紹介しようと思います。
Contents
プラグインを使う
『Drop Shadow Boxes』が影を付けてくれるプラグインで、影の出し方にいくつかのパターンがあって選ぶことができます。
ただ、プラグインを入れなくてもCSSで実現できます。
プラグインは、プラグインどうしやテーマとの相性で不具合を起こすことがあるので、CSSで実装できるものはCSSを使った方が無難です。
ここではCSSの“box-shadow”プロパティを使用した影の付け方を紹介します。
画像一つ一つを個別に指定する
box-shadowの指定方法
値の指定は左から「横方向の位置」「縦方向の位置」「ぼかしの量」「広がりの大きさ」「色の指定」「内向きの影を指定」となります。
横方向の位置
0を同じ位置（影と画像が重なった状態）とし、プラスの値を指定すると右へ、マイナスの値を指定すると左へ移動します。
必須の値なので必ず指定します。
縦方向の位置
0を同じ位置（影と画像が重なった状態）とし、プラスの値を指定すると下へ、マイナスの値を指定すると上へ移動します。
必須の値なので必ず指定します。
ぼかしの量
ぼかしの量の指定で、0を指定すると全くぼかしがない状態で、数値が大きくなる程ぼかしが強くなります。
マイナスの値はありません。
この値は任意なので省略することができます。
広がりの大きさ
0を指定すると全く広がりがない状態で、プラスの値を指定すると全方向に広がります。
マイナスを指定すると影が縮小します。
この値は任意なので省略することができます。
内向きの影を指定
影を内向きにつけたい時に”inset“と追記します。
box-shadowの使い方
style.cssに追記してサーバーにアップ
レイアウトを設定しているstyle.cssに、使いたい内容のbox-shadowのclassを追記して保存し、サーバーあるstyle.cssに上書きします。
WordPressのカスタマイズで追記
style.cssに追記してサーバーにアップするという作業が難しいと思う場合は、WordPressのヘッダにあるカスタマイズをクリックすると開くメニューの一番下に「追加CSS」という項目が用意されていますので、そこで追記することもできます。
⇒
style.cssの上書き、またはWordPressの「カスタマイズ」でCSSの追記が完了したら、投稿の編集画面で画像を挿入し、WordPressの「テキスト」タブを開いて<div>タグなどでclassを指定します。
以下にCSSの書き方と、HTML（WordPressの「テキスト」タブで編集）での記述方法の例を紹介します。
box-shadowのサンプル
簡単な例として7種類作成してみました。
CSS
|
1 2 3 4 |
/* 画像に影を付ける */ .b-shadow01{ box-shadow:5px 5px; } |
HTML
|
1 |
<div class="b-shadow01"><img src="xxxxx"></div> |
右に5px、下に5px移動した状態です。
CSS
|
1 2 3 4 |
/* 画像に影を付ける */ .b-shadow02{ box-shadow:0px 0px 10px; } |
HTML
|
1 |
<div class="b-shadow02"><img src="xxxxx"></div> |
上下左右の移動はせず、10pxのぼかしを指定しました。
CSS
|
1 2 3 4 |
/* 画像に影を付ける */ .b-shadow03{ box-shadow:5px 5px 10px; } |
HTML
|
1 |
<div class="b-shadow03"><img src="xxxxx"></div> |
右に5px、下に5px移動し、10pxのぼかしを指定しました。
CSS
|
1 2 3 4 |
/* 画像に影を付ける */ .b-shadow04{ box-shadow:5px 5px 10px rgba(0, 0, 0, 0.5); } |
HTML
|
1 |
<div class="b-shadow04"><img src="xxxxx"></div> |
上の影が少し濃いので、色をrgbaで指定し透過度を0.5と指定してみました。
CSS
|
1 2 3 4 |
/* 画像に影を付ける */ .b-shadow05{ box-shadow:5px 5px 10px #D9073D; } |
HTML
|
1 |
<div class="b-shadow05"><img src="xxxxx"></div> |
影の色を変更してみました。
CSS
|
1 2 3 4 |
/* 画像に影を付ける */ .b-shadow06{ box-shadow:0px 0px 0px 8px rgba(0, 0, 0, 0.2); } |
HTML
|
1 |
<div class="b-shadow06"><img src="xxxxx"></div> |
透過度0.2の8pxの広がりを指定してみました。
CSS
|
1 2 3 4 5 |
/* 画像に影を付ける */ .b-shadow07{ box-shadow:0px 0px 0px 8px #fff ,5px 5px 15px 12px #767676; } |
HTML
|
1 |
<div class="b-shadow07"><img src="xxxxx"></div> |
8pxの広がりを白で指定してさらに影を付けるとプリントした写真のような雰囲気になります。
簡単にできる基本的な設定はこれぐらいですが、他にもいろいろなことができるようですよ。
興味のある方はWebデザイナー、Webプログラマー向けのサイト「WEB ROCKETS」さんのところにたくさん種類があり参考になります。
<div>タグではうまくできない場合
私の環境では<div>タグを使ってbox-shadowを付けようとするとうまくいきず、こんな感じに段落いっぱいの影になってしまいます。
同様なことが起きた場合は<img>タグの中でclass指定してみるとうまくいくかもしれません。
| <img class=“b-shadow07” src=”Sample.jpg”> |
なお、WordPressは画像挿入すると自動的にclass属性を入れます。
| <img class=“alignnone size-thumbnail wp-image-1456” src=”Sample01-150×150.jpg” /> |
そのclassの中に使用したいbox-shadowの値を追加してもOKです。
| <img class=“alignnone size-thumbnail wp-image-1456 b-shadow07” src=”Sample01-150×150.jpg” /> |
ブログ全体の画像に同じ影を付ける
上記の方法では、画像ごとに色々なデザインの影や飾りが付けられるので、バラエティを楽しみたい方にはいいのですが、1つずつテキストでclass属性を指定するのは面倒と思う方もいるかもしれません。
ちなみにわたしはそうです。
なので、一気にすべての画像につけられる方法も紹介します。
WordPressは画像の挿入時に「添付ファイルの表示設定」の「配置」の指定の仕方で、必ず寄せのclassが入ります。
[左]を選択した場合：class=”alignleft”
[中央]を選択した場合：class=”aligncenter”
[右]を選択した場合：class=”alignright”
[なし]を選択した場合：class=”alignnone”
必ず入るclassなので、この4つにbox-shadowの指定を付けてしまいます。
例えば右に5px、下に5px移動し、ぼかしを10px、黒で透過度を0.5としたい場合は、style.cssに以下のように追記します。
CSS
|
1 2 3 4 5 6 7 |
/* 画像に影を付ける */ img.alignleft, .aligncenter, .alignright, .alignnone,{ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } |
私の環境ではalignnoneにbox-shadowを指定すると、サイトのヘッダのタイトルにまで影がついてしまうので、私の場合は上記の記述からalignnoneだけは抜かしてあります。
これで通常画像を入れる際は、「添付ファイルの表示設定」の「配置」の指定で必ず「左」、「中央」、「右」を選択するようにすれば特に何もしなくても影が付くようになりますし、画像を横並びにしたい時など、alignnoneを使用したい時は「画像一つ一つを個別に指定する」で紹介した方法で入れられるようにclassを用意しておけば、手入力にはなりますが対応できるので問題はありません。
また、縁取りのある画像などで影をつけたくないときも、alignnoneを指定すれば影はつかないので便利です。
まとめ
いかがでしたか？
私はCSSに詳しいわけではありませんので大したことは書けませんが、そんな私でも簡単にできたので紹介させていただきました。
ちょっとしたことですが、ブログの雰囲気が良くなった気がしてうれしくなります♪
よかったら試してみてください♥
ちなみに、CSSでデザインを変更するときによくあるトラブルが、「きちんとやってあるはずなのに表示が変わらない。。。」というもの。
私も初めてデザインをカスタマイズしたときに困りました。
これブラウザのキャッシュの問題です。
サイトの内容を短時間で表示するためにブラウザがCSSを覚えていて、再度訪問したときにCSSを読み込むことはしないで、以前に読み込んだCSSを使って表示しているのです。
なので新しいCSSを読み込みたかったら「キャッシュのクリア」をする必要があります。
次回はそのキャッシュのクリアについて書いてみます。
コメント
myumyuさん初めまして。
小泉 彰（ハンドルネーム）と申します。
ワードプレスで画像に影を付ける方法を探して、いろいろなサイトを見ては紹介されている方法を試してみました。
でもどのサイトで調べた方法も上手くいかずに困っていたのですが、myumyuさんの記事を読んで試したらバッチリ影をつけることができました。ありがとうございます。
サイトもとてもキレイで見やすいですし、影のつけ方も他のどのサイトよりも詳しく説明されていたので凄くわかりやすかったです。
僕もブログを始めたばかりなのですが、このようなサイトをお手本にしていきたいと思いまました(^^)
小泉さん、こんにちは♪
上手くいったようでよかったです(^^
私もCSSに詳しいわけではないので、一緒に勉強していきましょう☆
ブログも、お互いがんばっていきましょうね d(*ゝωб*)