【WordPress】画像に枠や影を付ける

WordPressで使用しているテーマによっては、画像ブロックで追加した画像に枠がつかないことがあります。

テーマや背景色によってはなんとなく見づらいこともあるかと思いますので、そんな時は追加のCSSで画像に効果を付けてあげましょう。

画像ブロックの画像に対してCSSを適用する方法を解説します。

　 このページはAmazonアソシエイト含むアフィリエイト広告を掲載しています。

適用イメージ

まず、枠なしの状態だと、

こんな感じです。

これに枠を付けたときのイメージとしては下記のようになります。

サイトの背景色と画像の背景色が同じ場合なんかは特に、枠を付ける前と後で見やすさも変わってきますね。

追加CSSの設定

これからいくつかパターンを紹介しますが、追加CSSの設定場所は同じなので先に解説します。

まず、管理画面のメニューから[外観]＞[カスタマイズ]と進みます。

カスタマイズメニューの下のほうにある[追加 CSS]を選択します。

すると追加CSSの入力欄が表示されますので、ここにCSSを設定していきます。

画像ブロックの画像に効果を付ける

では早速、画像に効果を付けてみましょう。

今回は、画像の外側にグレーの枠線を追加し、また周囲に影の効果を入れることで画像を強調します。影は右下方向に少しずらして、立体感が出るようにします。

画像ブロック全てに枠と影を付ける

まずは、画像ブロックを追加したとき、画像に自動で枠と影を付けるようにしてみます。

画像ブロック自体には特に手を加えずにできるので、とても簡単ですし、一度設定してしまえば特に意識する必要がありません。

追加CSSに次の内容を入力して[公開]ボタンを押します。

1.wp-block-image img {
2    border: 1px solid #ddd;
3    box-shadow: 5px 3px 8px #ccc;
4}

設定している内容としては、

となります。数値や色の値は好みで調整してください。

これで画像ブロックの画像全て枠線と影が表示されるようになったと思います。

特定の画像にのみ枠と影を付ける

上記は画像ブロックの画像全てに枠や影が付きますが、効果をつける画像を指定したい場合があるかもしれません。その場合は次のような方法があります。

まず、追加CSSは次のように設定します。

1.add_border_target img {
2    border: 1px solid #ddd;
3    box-shadow: 5px 3px 8px #ccc;
4}

先ほどとは設定するクラス名が違っていて、今回の「add_border_target」部分は独自のクラス名であれば何でも大丈夫です。

他と重複しなければもっと短いクラス名でもOKですよ。

次に、効果を付けたい画像ブロック設定の[高度な設定]の中にある[追加CSSクラス]に、先ほど設定した独自のクラス名（この場合は「add_border_target」）を設定します。

これで、追加CSSクラスを設定した画像ブロックの画像にのみ、CSSが適用されます。

全自動と指定を併用する

上記2つのパターン（すべての画像ブロックに自動で・特定の画像ブロックにのみ）を併用することもできます。

基本的な方法はこれまでの解説内容と同じで、追加CSSに2パターン両方の記述を追加しますが、その際に気を付けるのは記述する順番です。

1.wp-block-image img {
2    border: 1px solid #ddd;
3    box-shadow: 5px 3px 8px #ccc;
4}
5.add_border_target img {
6    border: 1px solid #ddd;
7    box-shadow: 5px 3px 8px #ccc;
8}

先に全体に適用する設定、後に部分的に適用する設定を記述します。

CSSは記述してある順に適用されます。そのため、全体に適用する設定を後のほうに書いてしまうとその設定で先に記述した内容を上書きしてしまい、結局、全体適用のほうが有効になってしまうのです。

そこさえ気を付ければ、上記の記述で両方を適用することができます。試してみてください。

色々な効果を付ける

ここまでは、グレーの枠線と影を付けることで画像を強調しました。

CSSの設定ではいろいろな表現をすることができますので、いくつか例を紹介します。

実際に指定した際にどういう表示になるかは「やってみてのお楽しみ」ということで、とりあえずコードのみ紹介します。

枠線のみでシンプルに

1.wp-block-image img {
2    border: 1px solid #aaa;
3}

box-shadowを指定しなければ影はつかないので、枠線のみになります。

borderに3つ値を指定した場合、指定した順に幅・種類・色の設定となります。色々試してみて、好みの枠線を指定しましょう。

枠線＋右下に影で浮き上がるように

1.wp-block-image img {
2    border: 1px solid #ddd;
3    box-shadow: 5px 3px 8px #ccc;
4}

執筆時点で、本サイトで適用している効果です。（そのうち変えるかもしれませんが）

影を付けることで、少し画像が浮いて強調されるような効果があります。

太めの白枠＋影で写真立てっぽく

1.wp-block-image img {
2    border: 12px solid #fff;
3    box-shadow: 5px 5px 10px 5px #aaa;
4}

画像の周りに太めの白枠を設けることで、写真のような見た目にすることができます。白枠以外にも、あえて黒枠でモダンな感じにしてみたり、黄色っぽい色で木枠風にしてみてもいいかもしれませんね。

このサイトは写真を使うことがほとんどないので、使いどころがないのですが…

オフセットした色付きの影でポップな雰囲気に

1.wp-block-image img {
2    box-shadow: 10px 10px 10px #5af;
3}

人間の認識力は不思議なもので、実際には線が無くても、輪郭を感じることでそこに境界があるように認識してしまいます。なので、borderを使わずに少し位置をずらした影を付けるだけでも、そこ枠があるように見えてきます。

また影自体も色を指定することができるので、明るい色を指定することでポップな雰囲気を演出することができます。

ほんの一例を紹介しましたが、CSSではもっと様々な表現をすることができます。興味のある方はいろいろと試してみてください。

you-tnb-298

理系大学卒業後、音楽の専門学校へ。ギター・ドラムでの音楽活動を経て、30歳手前でプログラマーへ転身。

---

ウェブシステム・スマホアプリ・マクロツールなど様々な受託開発を経験した後、メーカー企業で業務アプリケーションの開発に携わる。45歳を過ぎて独立、グローナレッジ設立。

---

応用情報処理技術者、ウェブデザイン技能検定3級、色彩検定2級、日商簿記2級。登山は富士山経験あり、マラソンはハーフ1h58m。