悩む人
記事に貼り付けた画像や写真の縁に枠線を付けたい
本記事ではこのような悩みを解決していきます。
まずはビフォーとアフターを確認してみましょう。
ビフォー(Before)
画像：unDraw
アフター(After)
画像：unDraw
見てお分かりだと思いますが、２つの画像は同じ画像です。
左の画像(ビフォー)は枠線がないため、背景と一体化していますね。
一方、右の画像(アフター)は枠線があるため、どこまでが画像の区域なのか識別できます。
このように画像の縁に枠線を付けることによって、、、
メリット
・記事全体的にまとまりがでる(特に画像が多い場合)
・どこまでが画像の区域なのか識別できる(白い画像だと、白い背景とかぶってしまうため)
などの効果が期待できます。
やり方はとても簡単なので、すぐに設定から反映まで出来ますよ。
sawaday
それではやり方を説明していきます！
枠線の設定方法
【Step1】CSSのコーティング
「外観→テーマエディター→style.css」でCSS編集画面を開き、
コード
/*画像の枠線*/
img.border {
border: solid 1px #cccccc;
}
を入力します。
下記のような感じです。
枠線の色やサイズなどは好みで変更して下さいね(*^^*)
【Step2】画像の編集
「貼り付けた画像をクリック→編集をクリック」して「画像詳細」画面にいきます。
「上級者向け設定をクリック→画像CSSクラスに"border"と入力→更新」で設定完了です！
最後にプレビューなどで画像の枠線が反映されているか確認してみましょう！
おわりに
sawaday
いかがでしたか
とっても簡単に設定から反映まで出来たのではないでしょうか。
今回紹介した枠線があることによって同じ画像でも見やすさが変わってくるので、とてもおすすめですよ。
特に白い画像を使う機会があれば、積極的に取り入れていきましょう！
本記事が少しでも読者さんの役に立てば嬉しいです(*^^*)
それでは！