CSSで写真に白フチと影をつけてみる
アナログ世代としては、写真には白フチがあったほうがいい。
フチなしプリントもずいぶん昔からあったでしょって？ はい、ごもっとも。
でもね、やっぱり白フチありのほうが写真っぽい。
ブログが白バックだから白フチつけてもフチなしに見えちゃうから、影なんかもつけられたら嬉しい。
やろうと思えばPhotoshopで簡単にできるけど、1枚1枚処理するのはめんどくさい。
そうだ、CSSならできるんじゃない？ ってことでググって試すこと10分少々。
できました！ 意外に簡単、便利な世の中ですなぁ。
以下、はてなブログでの設定方法だけど、他のブログでも応用できると思うので、志を同じくするアナログ世代の方はお試しを。
まず、［管理］→［デザイン］→［カスタマイズ］の［デザインCSS］の欄に、以下のコードを入力して［変更を保存］する。
【CSSコード】
.shadow_a{
width: 560px; ←写真の幅
height: 420px; ←写真の高さ
margin: auto;
background: #ccc;
border: 5px solid white; ←白フチの幅
position:relative;
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.50);
-moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.50);
-webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.50);
}
※4px 4px 20pxの部分は、左から「左右にずらす距離（−なら左に移動）」、「上下にずらす距離（マイナスなら上に移動）」、「ぼかしの広がり」で、カッコ内の「50」は「影の透明度」なので、それぞれ好みで調整を。
あとは、記事を書くときに、HTMLの写真部分に以下のようCSS名を組み込むだけ。簡単でしょ。
【HTML】
<p class="shadow_a"><span>写真のHTML部分</span></p>
一度CSSの設定をしてしまえば、記事を書くときに赤い部分を加えるだけだから、ほとんど手間はかからない。
効果を確認しながら自動でコードを生成してくれる便利なジェネレーターなんかもあるのでこれを利用するのもあり。
http://www.themeshock.com/css-drop-shadow/
いやぁ、デジタルっていいね。←アナログ世代じゃなかったんか
※古いバージョンのブラウザやスマホなどには効果がありません。
