2014年7月18日 (金)

記事内に表示させる画像を装飾する方法

記事内に画像をアップしたけど、「なんだか見た目が物足りない・・・」、そう思ったことはないですか?



そんなときは、カスタムCSSに少しのコードを追加するだけで見栄えを即効で良くすることができます。



CSSって聞くと、「難しそう」って引いてしまうかもしれませんが、コピペだけでカンタンにできますよ。


Hir86_danborukarakaodasu20140614500

まずはカスタムCSSの使い方については以下の記事を参照してください。



それでは実際に変更した例をご紹介します。




こちらが元画像になります。

Th_8668508698_e2ee257766_z


まずは、画像の枠の部分に「影」をつけてみましょう。

影はあまり濃く幅広くつけてしまうと逆に格好悪くなってしまうので、控えめに設定するのがコツ。

.entry-content img {  
    -webkit-box-shadow:0 1px 3px  #cccccc;
    -moz-box-shadow:0 1px 3px #cccccc;
    box-shadow:0 1px 3px #cccccc; 
}



上記ソースを書くと、以下のようになります。

Th_8668508698_e2ee257766_z


ちょっぴり影がつきましたね。




次は、画像の角を少しだけ「丸く」してみましょう。

先ほどのものに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; 
}

Th_8668508698_e2ee257766_z

角がとれて優しい印象になります。

(^-^)



このようにカスタムCSSにほんの少しコードを記述するだけで、記事内の画像すべてをちょっとだけ見栄え良く表示することができます。


是非色々とチャレンジしてみてください!
\(^o^)/