ブログの記事内の写真にぼかした影をつける方法

カテゴリー: ブログのこと、ホームページのこと

タグ: box-shadow CSS3 FinePix A330 スタイルシート写真にぼかした影をつける

スタイルシートを使って、このブログの記事に載せてある写真に自動的にぼかした影をつけて立体感を出すようにしました。

通常、画像編集ソフトでこのような影をつけるためには、ドロップシャドウなどと呼ばれる加工をしますが、そういった加工をせずにスタイルシートによって自動的に写真に影をつけてみよう・・・ということです。

影を表示するためにスタイルシートに追加したのは以下の行です。

box-shadow: 5px 5px 5px -3px #999

指定内容の説明は以下の通りです。

1番目の 5px ：右方向(x方向)にどれだけ影をずらすか
2番目の 5px ：下方向(y方向)にどれだけ影をずらすか
3番目の 5px：影をどれだけぼかすか
-3px：影をどれだけ拡大・縮小するか (マイナスを指定すると縮小になる)
#999 ：影の色

4月28日の記事に書いたブログタイトルに枠を表示する方法と同じ box-shadow を使っていて、Internet Explorer 8 までだと影は表示されません。

Internet Explorer 9 や他のブラウザで見ると写真にぼかした影が表示されます。

ブログのヘッダーを春モードに変更しました

新潟県南魚沼市はすっかり春になり桜の開花がどんどん進んでいますが、このブログのヘッダー画像は駒ケ岳の雪景色のままでしたので、春らしく桜のヘッダー画像に差し替え…

Lightning G3 無料版 / VK Blocks / WordPress のカスタマイズ [uonuma.biz]

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら

WordPress のトラブル解決・設定・カスタマイズ

ベクトル公式テクニカルパートナー
があなたをお手伝いします

Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。

PHP / jQuery / CSS / アクションフック / フィルターフックのカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。

ご相談・お仕事のご依頼はこちら

“ブログの記事内の写真にぼかした影をつける方法” に対して2件のコメントがあります。

taihoutk より:

2012年5月9日 4:48 PM

先生先ほどはありがとうございました。
帰って来て写真をクリックしたら大きく拡大されています
ありがとうございました　次は動画の勉強ををお願いします。
くりっくより:

2012年5月9日 6:10 PM

taihoutk さん、今日はどうもありがとうございました。
写真の拡大がうまくいってますね。
やっぱり大きく表示されると見た目がいいです。
新しいパソコンで慣れるまでが大変だと思いますが、
楽しみながら覚えていってください。