WordPress記事内の画像に影をつける方法
2017/02/01
こんにちは、okutani(@okutani_t)です。WordPressサイトの記事内にある画像に影をつけるには、２通りのやり方があります。１つはShadows等のプラグインを使う方法と、もう１つはCSSを使った方法です。
正直、画像に影をつけるぐらいであれば、わざわざプラグインを導入しておこなうこともないのでCSSで記述するほうがオススメです。CSSでスタイリングすれば他のプラグインとの干渉も気にしないで良いですし。
なので今回は、CSSを使って記事内の画像に影をつけていきます。CSSがよく分からない方は上記のプラグインを使うのもOKだと思います。どちらかお好みでおこなってみましょう。
ただ、今回のCSSの記述方法はかなりかんたんなので、CSSがよくわからない方でもチャレンジしてみる価値はあるかと思います。
いろいろと前置きが長くなりましたが、実際に作業を進めていきましょう。
スポンサーリンク
画像に付加されるclassについて
記事内に画像を挿入する際には、下記のように配置位置に対応したclassが自動で付加されます。CSSファイルに、対応したclassに合わせて影をつけるスタイルを記述していけばよさそうですね。
- 配置位置 左 ：alignleft
- 配置位置 中央 ：aligncenter
- 配置位置 右 ：alignright
- 配置位置 なし ：alignnone
現在利用しているclass名は、記事投稿画面から「テキストモード表示」で画像を挿入すると確認できます。
私は配置位置なしの「alignnone」でいつも画像を挿入しているので、次のとおりスタイルを記述しました。
CSSファイルにbox-shadowを記述
では、下記のコードをCSSファイルに記述してみましょう。私の場合はstyle.cssがCSSファイルに該当しますので、そちらに記述しました。
img.alignnone {
box-shadow: 1px 1px 5px #000;
}box-shadowを使うことで、指定した要素に影を付けることができます。box-shadowの値は次のように設定できます。
- １つ目の値
- ２つ目の値
- ３つ目の値
- ４つ目の値
よこ方向の影。正の値は右、負の値は左に影がつきます。
たて方向の影。正の値は下、負の値は上に影がつきます。
影の広がりを指定します。大きくすることで影の範囲が広くなります。
色を指定します。#000の代わりにrgba(0,0,0,1)のような記述でもOK。
値はご自身の好きなように変えてみましょう。値を設定した後、実際に影がついたか確認してみます。
上記のとおり、記事内の画像に影をつけることができました。
上下左右に影をつけてみる
下記のように「,」でつなげてあげることで、上下左右に影をつけることもできます。
img.alignnone {
box-shadow: 1px 1px 5px #000, -1px -1px 5px #000;
}こうすることで、上下左右に影をつけることができますね。
また、次のような書き方でもOKです。
img.alignnone {
box-shadow: 0 0 5px #000;
}たて方向とよこ方向を0にして広がりを持たせてあげることで、上下左右に影が付きました。
広がりを大きくしたり、色を変更したり等々、ご自身のサイトにあったスタイルにしてみてください。
まとめ
画像に影をつけてあげるときはbox-shadowを使えばOKです。box-shadowでは、影の濃さや広がり方も設定できて良いですね。
「#000」の値を変えることで、色の指定もかんたんにできます。#を使って色を表すことを「カラーコード」といいますので、気になる方はカラーコードで調べてみてください。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
