記事中の画像につける枠・ボーダーのCSSデザインまとめ【コピペOK】


記事中の画像に枠やボーダーをつけることで、より強調したり、他の画像と区別することができす。

この記事では画像につける枠・ボーダーのデザインとコピペシートをまとめていきます。

画像を大量に貼ると読み込みが重くなってしまうので、この記事では画像の部分をテキストで代用しています。

Bloggerで画像にボーダーをつける方法はこちらをご覧ください。

>>【Bloggerコピペ】記事の写真に枠・ボーダーをつける方法

シンプルなボーダー


うすいグレーで囲むだけのシンプルなデザイン。はっきりとした境目のないOrange ZELOを使ってる場合、いい感じに馴染みます。

style="border: 2px solid #888;

 角を丸く


丸かどタイプのボーダーです。ボーダーをつけずに角をまるくすることも可能です。

ボーダーあり:
style="border: 2px solid #888; border-radius: .5em;"

ボーダーなし:
style="border-radius: .5em;"

ドットタイプ


ドットタイプのボーダーです。シンプルなボーダーに比べると対象をより目立たせることができます。

ふつうのドット:
style="border: 2px dashed #888;"

丸かどドット:
style="border: 2px dashed #888; border-radius: .5em;"

二重のボーダー


二重線のボーダーです。二重線の場合、指定したpx数は(上の線 + 下の線 + 間の領域)となるため、大きめのpxを指定します。

ふつうの二重線:
style="border: 4px double #888;"

丸かど二重線:
style="border: 4px double #888; border-radius: .5em;"

影をつける


影をつけることもできます。少し立体的になり、目立たせることができます。

style="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);"

まとめ

お気に入りのボーダーは見つかりましたか?

全体の配色やレイアウトと合わせながら、デザインバランスの良いボーダーをつけましょう。

Bloggerで記事中の画像にボーダーをつける方法はこちらをご覧ください。

>>【Bloggerコピペ】記事の写真に枠・ボーダーをつける方法


Bloggerの新テーマ「Orange ZELO」はこちらをご覧ください。

>> Blogger最強テーマ【OrangeZELO】の機能・特徴を紹介します

コメント