記事中の画像に枠やボーダーをつけることで、より強調したり、他の画像と区別することができす。
この記事では画像につける枠・ボーダーのデザインとコピペシートをまとめていきます。
画像を大量に貼ると読み込みが重くなってしまうので、この記事では画像の部分をテキストで代用しています。
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】の機能・特徴を紹介します
コメント