記事内に画像をアップしたけど、「なんだか見た目が物足りない・・・」、そう思ったことはないですか？
そんなときは、カスタムCSSに少しのコードを追加するだけで見栄えを即効で良くすることができます。
CSSって聞くと、「難しそう」って引いてしまうかもしれませんが、コピペだけでカンタンにできますよ。
まずはカスタムCSSの使い方については以下の記事を参照してください。
それでは実際に変更した例をご紹介します。
こちらが元画像になります。
まずは、画像の枠の部分に「影」をつけてみましょう。
影はあまり濃く幅広くつけてしまうと逆に格好悪くなってしまうので、控えめに設定するのがコツ。
.entry-content img {
-webkit-box-shadow:0 1px 3px #cccccc;
-moz-box-shadow:0 1px 3px #cccccc;
box-shadow:0 1px 3px #cccccc;
}
上記ソースを書くと、以下のようになります。
ちょっぴり影がつきましたね。
次は、画像の角を少しだけ「丸く」してみましょう。
先ほどのものに1行追加するだけ。こちらも少しだけ、がポイントです。
.entry-content img {
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow:0 1px 3px #cccccc;
-moz-box-shadow:0 1px 3px #cccccc;
box-shadow:0 1px 3px #cccccc;
}
角がとれて優しい印象になります。
（＾－＾）
このようにカスタムCSSにほんの少しコードを記述するだけで、記事内の画像すべてをちょっとだけ見栄え良く表示することができます。
是非色々とチャレンジしてみてください！
＼(^o^)／