うりだよ。

FXとANAマイラーと雑記と・・いろいろのブログ

Ads by Google

【CSS】ブログ画像周辺に影(ドロップシャドウ)を付けてみた

こんにちは!

うりです。

 

色んなブログを見ていると、何だかみんなおしゃれで綺麗だなぁ…と思ったので、自分も少しずつカスタマイズしていこうかなと思います!!

 

 

んで、とりあえず今回はタイトルのとおりなんですが、ブログ画像周辺に影(ドロップシャドウ)を付けてみた話。

 

自分のブログでも何個か画像を張ったりしてたんだけど、やっぱりこれがないとちょっと立体感に欠ける感じで物足りないというかなんというか…

 

ということで、調べたら結構簡単にできたので、残しておきたいと思います。

 

 

はてなブログで画像周辺にドロップシャドウを付ける方法

 

まずは参考にさせていただいたブログ記事から。

ありがとうございます!!

affiliate-hatekun.hatenablog.com

 

ということで、紹介されているとおりに早速CSSをコピーして、はてなブログ用に少し加工を施します。

 

最終的に使うCSS記述は以下のとおりです。

.hatena-fotolife {
margin-top: 5px; /* 画像の上の余白*/
display: inline-block;
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */
}

 

これを、

ダッシュボード→デザイン→カスタマイズ(スパナマーク)→デザインCSS

に貼付けます。

 

f:id:uriuridayo:20160109153453p:plain

↑↑付いたでしょ??

 

 

これで、ブログに貼り付けた画像にドロップシャドウが付くようになりました。

 

 

ということで、ブログ画像周辺に影(ドロップシャドウ)を付けてみたの話でした!

これで俺もおしゃれさんの仲間入りだー!!

 

おわりー。