[phoe-icon name="fa-photo fa-fw fa-lg"]　Photoshop今は昔

かつては、シャドウつきの写真をつくって、ホームページに入れるのにたいへん苦労したことがありました。シャドウをつけると格好いいので、いろんな写真レタッチソフトを探しまわったこともありました。それも、今は昔の話です。いまでは、ソフトに頼らずとも、cssとHTMLをちょっと付け加えるだけで、けっこう見栄えのいいシャドウつきの写真をウェブ上に表示させることができるようになりました。必要なCSSは、わずか3行だけ。

.shadow {
  box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}

HTMLは、写真の画像を指定するimgタグの中のsrcの一属性として、shadowを追加するだけです。

WordPressの場合でいえば、「エディタ画面」で「メディア追加」を選び、必要な写真をパソコンからエディタ画面に取り込みます。画面に取り込むと、テキストエディタに自動的にimgタグが記述されていますから、そこにshadowの1文字を書き加えるだけです。実に簡単。すると、下のように、シャドウつきの写真が表示されます。まさにCSSマジック。

Photoshopなどを使えば、もっと繊細なシャドウをつけらえるかもしれませんが、ブログ用にはこれで十分でしょう。このテクニックは、別途運用している「フォトログ」で多用したいと思っています。

次のサイトを参考にさせていただきました。