超簡単！CSSで写真の周りにオシャレな枠線をつけるやり方

いつも何気なく載せている写真を、少しだけオシャレに見せたい。
今回はCSSの設定だけでできる、カンタンな方法をご紹介いたします。

まずは普通に画像を挿入したパターン。
やっぱりコレだけだと少し寂しいですよね。ひつじさんはカワイイけど。

CSSでシンプルな枠線をつけてみる

ドット線の場合

ダッシュ線の場合

実線の場合

枠線の種類を変えてみるだけでも、これだけのバリエーションがあります。
各自のブログのテイストに合わせて、枠線の種類や色・太さを変えてみましょう。

ココがポイント！！

主役はあくまでも写真。枠線の色や太さは目立ちすぎないよう抑え目に！

使用したCSS※グリーン部分が枠線の設定箇所です

.entry .contents img.border {
padding: 5px;
margin: 0 !important;
border: 1px dotted #CCCCCC; /*ボーダーの太さ・種類（ドット線）・色*/
}
.entry .contents img.border {
padding: 5px;
margin: 0 !important;
border: 1px dashed #CCCCCC; /*ボーダーの太さ・種類（ダッシュ線）・色*/
}
.entry .contents img.border {
padding: 5px;
margin: 0 !important;
border: 1px solid #CCCCCC; /*ボーダーの太さ・種類（実線）・色*/
}

追加するHTML※グリーン部分が追加箇所です

<img src="画像のパス"  alt="" border="0" class="border" />

※設定したCSSのclass属性を、挿入する画像のimgタグの中に追加するだけです。
※写真と枠線の間の設定は、padding部分の値を調整してください。

今回は、前回の記事「関心度の高い過去の記事をカスタマイズしてブラッシュアップ」の実践編としてお送りいたしました。