本記事では上記のような疑問を解決します。
本記事の内容
- 画像の外枠線を引く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のクラス名を入力します。
以上で完成です。
=====
今日はここまでとなります。
どなたかの参考になれば幸いです。