【CSS】WordPressへアップロードした画像に影を付ける方法

画像に影を付けることで、立体的な表現が可能になり見栄えが良くなる可能性があります。

CSSを少し記述するだけで、簡単に影を付け加えることができるので、ぜひ試してみてはいかがでしょうか。

CSSで画像に影を付け加える方法を紹介していきます。

手順としては、

クラス名の確認

実装(追加CSS)

パラメーターの調整

デベロッパーツールでクラス名を確認する

いきなりCSSを書き始める前にデベロッパーツールでクラス名を確認していきます。

※ブラウザはChromeとなります。デベロッパーツールが使用できない場合はこの次の項を参照。

1.自分のサイトで「右クリック」→「検証」を選択してデベロッパーツールを立ち上げます。

2. 「①矢印」をクリックしてブログの「画像」を選択して、デベロッパーツールの「Styles」を確認します。

ここから当ブログでは、下記がどうやら画像のクラス名だと推測できました。

.pt-post-main img {}

※正直これらは感覚で推測しています。クラス名のパラメーターに横幅だったり高さが入っていたり、クラス名自体にimgとあったので、「画像のクラス名だな」と判断しました。

テーマによって、クラス名は変わるので確認しておく必要があります。

WordPressのテキスト表示モードで確認する

デベロッパーツールが使用できない方は、こちらの方法で確認してみてください。

1.WordPressの投稿画面でテキスト表示モードにします。

2.img class=” alignnone”というクラス名を確認できました。ちなみに「alignnone」というのは画像の配置位置なしという意味になります。

alignnone  :配置位置 なし
alignleft   :配置位置 左
aligncenter  :配置位置 中央
alignright  :配置位置 右

表記としては、下記のようにしてやればOKです。

img.alignnone {}

WordPressカスタマイズの「追加CSS」に実装

このクラス名を調整するには、WordPress「テーマの編集」から直接クラス名を探す必要がありますが、これもテーマによって記述されている場所が異なるので、見つけるのが大変です。

そこで手軽にCSSが記述できる、WordPress「カスタマイズ」の「追加CSS」に実装していきます。

画像では、両方のクラス名を書いていますが、どちらか1つだけで問題ありません。

.pt-post-main img {                       (※当ブログの場合)
box-shadow: 1px 1px 1px #000;
}

or

img.alignnone {
box-shadow: 1px 1px 5px #000;
}

パラメーターの調整

影の太さや色を調整するためにパラメーターを調整していきます。

影を付けるために「box-shadow」というコマンドを使用します。〇〇pxと書かれた数字を変更することで影の状態を変更していきます。

box-shadow: 10px 20px 10px #00F;

1つ目の値:横方向の影。「正の値」で右方向、「負の値」で左方向。
2つ目の値:縦方向の影。「正の値」で下方向、「負の値」で上方向。
3つ目の値:色の広がり
4つ目の値:色の指定

画像の状態

box-shadow: 10px 20px 10px #00F,-10px -20px 10px #00F;

「,」で区切り値を決めてやると上下左右に影を付け加えることが可能です。

画像の状態

余談ですが、クラス名を「img」でくくるとブログに出てくるすべての画像に影がついてしまうので避けたほうが無難だと思われます。

img {
box-shadow: 1px 1px 5px #000;
}

これで調整は完了です。

関連記事:
【CSS】WordPressで行間と改行幅を調整する方法

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でtwo_audioをフォローしよう!