CSSで画像の外枠に線を引く方法【WordPressでの適用方法も解説】

Left Caption
背景が真っ白い画像の周りに線を引きたいんだけど、どうすればいいのかな。cssでできないかな?下に貼っているような画像だと、なんか締まりがない気がするんだよな。

本記事では上記のような疑問を解決します。

この記事の内容

  • 画像の外枠線を引くCSSの記述方法。
  • WordPressで実際に画像にCSSを適用する方法。

この記事を書いている私は、業界歴10年ほどのシステムエンジニアのサラリーマンブロガーです。ブログをやっていて背景が白色の画像を使ったときに、なんか締まりがないなと考えていたので、解決策を記事にしました。

ブログやっている方は必見です。ぜひご覧ください。

広告

CSSで画像の外枠に線を引く方法【WordPressでの適用方法も解説】

画像に外枠を付けるには、「box-shadow」プロパティを使用すればOKです。

といっても、「box-shadow」はオブジェクトに対して影を付けるためのプロパティになります。これをうまく利用して、外枠がついたように見せるというわけです。

「box-shadow」の設定内容の解説

設定内容は下記のとおりです。

  • ①:影の位置(横)※マイナス値の指定可
  • ②:影の位置(縦)※マイナス値の指定可
  • ③:影のぼかし具合
  • ④:影の太さ
  • ⑤:影の色

実際に見た目がどうなるか、見たほうが早いと思いますので下記に準備しました。

「box-shadow」の設定例。

「box-shadow」プロパティを使うことで、下記のようなことができます。

例①:外枠に線を引く

box-shadow: 0px 0px 0px 7px #ccc;

このように、いい感じで外枠の線を引くことができます。

例②:右下に伸びる影

box-shadow: 10px 10px 0px 7px #ccc;

例③:影をぼかすことも可能

box-shadow: 10px 10px 10px 7px #ccc;

例④:影の大きさを調整可能

box-shadow: 10px 10px 10px 17px #ccc;

 

上記のように、色々なことができます。自分の用途に合わせて設定すると良いかと思います。

WordPressで実際に使用するときの指定

次に、WordPressで実際に使用するときの設定方法を解説します。

CSS定義の追加

まずは、ブログの記事に反映されるようにCSSの定義を追加します。下記のように進めていけばOKです。

「外観」ー「カスタマイズ」を選択。

「追加css」をクリック。

cssを記述するエリアが表示されるので、ここにcssを追加します。下記のような感じです。

コピーしたい場合はこちら↓↓

img.kage {  box-shadow: 0px 0px 4px #ccc;}

貼り付けた画像にcssを適用する

定義したCSSが適用されるように、画像にCSSクラスを割り当てます。

画像を選択し、「編集」を押下。

「画像CSSクラス」箇所に、先ほど定義したCSSのクラス名を入力します。

以上で完成です。

 

=====

今日はここまでとなります。
どなたかの参考になれば幸いです。

広告