はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

CSSだけを使いブログ記事画像の縁に影(ドロップシャドウ)を付ける方法を試してみた

2014/12/03現在、当ブログで利用させて頂いているブログテーマは「Simple Gray」というテーマです。

Simple Gray - テーマ ストア - はてなブログ

(2015/08/29追記:現在は「レスポンシブルー」というテーマに変更しています)

 

「続きを読む」のボタンが目立つようおしゃれにデザインされていて、とても気に入っています。

 

このテーマを土台にして細かい部分に手を加え、さらに自分好みにしてゆこうと思います。

 

今回は画像部分です。

 

記事中の画像、このテーマでは画像の枠が無いスタイルです。文字と画像の境界をはっきりさせるために画像周辺にドロップシャドウを付けたいと思います。

 

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

CSSをサイトからコピー

こちらのサイトで紹介されているCSSをコピーします。

CSSで画像に影をつける方法について!ブログの見た目を綺麗に

 

コピーしたものをはてなブログへ貼り付け

コピー出来たら、CSSコードを「ブログ管理画面」⇒「デザイン」⇒「カスタマイズ」⇒「デザインCSS」へ貼り付けます。

f:id:yonta24:20141203015308j:plain

 

CSSのクラス名を変更する

貼り付け後、「.shadow」というクラス名をはてなブログ用に変更します。「.shadow」⇒「.hatena-fotolife」(変更箇所は赤い下線の部分です)

f:id:yonta24:20141203015540j:plain

 

これで、はてなフォトライフからブログに貼り付けた画像にドロップシャドウが付くようになります。クラス名が「.hatena-fotolife」限定なので、はてなフォトライフ以外から貼った画像などには影は付きません。

 

画像の余白や、影の幅なども適宜調整出来ますので、試してみてください。ご一緒にはてなブログを成長させていきましょう!May the force be with you!

 

おすすめエントリー

当ブログの『はてなブログ アフィリエイト入門シリーズ』をひとつにまとめました! - はてなブログでアフィリエイトがしたい人のブログ