今ではPhotoshopのようなソフトを使わなくても写真画像に「影」を付けることが容易になってきました。「影」を付けることで、変哲もない写真が目を引く写真に！！
今回は、写真画像に縦方向・横方向、影の大きさや影の色まで自在に変えるコードの書き方をご紹介します。
※画像に影は、アメブロではPC版のみ対応で、スマホ版は適応外のタグのようです
なのでスマートホンで、この記事を見ている方は写真画像に影は反映されません
※CSS（スタイルシート）に別途記述するのではなく、より簡単な直接記事内にコードを記述する方法で紹介しています。
■「box-shadow」を使って影を付ける
▼ノーマル
▼ぼかしのない影
HTML表示で追加したタグ『style="box-shadow: 10px 10px"』
<img alt="猫" contenteditable="inherit" height="280" src="https://stat.ameba.jp/user_images/20190807/22/seoisland/b9/73/j/o0500033314525581633.jpg" style="box-shadow: 10px 10px" width="420">
▼ぼかしのない影の色を変える
HTML表示で追加したタグ『style="box-shadow: 10px 10px #00afff"』
影の色は『#00afff』を使用。カラーコードでお好きな色に変更が可能です。
<img alt="猫" contenteditable="inherit" height="280" src="https://stat.ameba.jp/user_images/20190807/22/seoisland/b9/73/j/o0500033314525581633.jpg" style="box-shadow: 10px 10px #00afff width="420">
▼影にぼかしを入れる
HTML表示で追加したタグ『style="box-shadow: 10px 10px 10px #999999"』
<img alt="猫" contenteditable="inherit" height="280" src="https://stat.ameba.jp/user_images/20190807/21/seoisland/70/d7/j/o0500033314525559984.jpg" style="box-shadow: 10px 10px 10px #999999" width="420">
▼影を縮小させる例
HTML表示で追加したタグ『style="box-shadow: 10px 10px 15px -10px"』
<img alt="猫" contenteditable="inherit" height="280" src="https://stat.ameba.jp/user_images/20190807/21/seoisland/70/d7/j/o0500033314525559984.jpg" style="box-shadow: 10px 10px 15px -10px" width="420">
▼上下左右対称に影をぼかす例
HTML表示で追加したタグ『style="box-shadow: 0 0 10px #999999"』
<img alt="猫" contenteditable="inherit" height="280" src="https://stat.ameba.jp/user_images/20190807/21/seoisland/70/d7/j/o0500033314525559984.jpg" style="box-shadow: 0 0 10px #999999" width="420">
おさらい
box-shadow内の数値の意味は下記を指します。
『 box-shadow: 左右の位置 上下の位置 影のぼかし度 影の広さ 色; 』
数値や色を変えてお好みの影を探しましょう！
■「drop-shadow」を使って画像の縁に沿って影を付ける
※アメブロではPC版のみ対応で、スマホ版は適応外のタグのようです
なのでスマートホンで、この記事を見ている方は写真画像に影は反映されません
画像素材は『pngfly』でダウンロードした『png』画像を使用しました。
▼影無しのノーマル
<img alt="" contenteditable="inherit" height="343" src="https://stat.ameba.jp/user_images/20190807/15/seoisland/89/c7/p/o0309034314525217501.png" width="309">
▼画像の縁に沿って影を付ける
HTML表示で追加したタグ『style="filter:drop-shadow(5px 5px 5px #999999)"』
filter: drop-shadow(左右の位置px 上下の位置px ぼかし具合px 色)
<img alt="" contenteditable="inherit" height="343" src="https://stat.ameba.jp/user_images/20190807/15/seoisland/89/c7/p/o0309034314525217501.png" style="filter:drop-shadow(5px 5px 5px #999999)" width="309">
▼画像の縁に沿って影を付け影の色を変える
HTML表示で追加したタグ『style="filter:drop-shadow(5px 5px 5px #ff66ff)"』
影の色は『#ff66ff』を使用。カラーコードでお好きな色に変更が可能です。
<img alt="" contenteditable="inherit" height="343" src="https://stat.ameba.jp/user_images/20190807/15/seoisland/89/c7/p/o0309034314525217501.png" style="filter:drop-shadow(5px 5px 5px #ff66ff)" width="309">
■アメブロ記事内本文に「text-shadow」を使って文字に影を付ける
アメブロ記事内「文字」に影を付けるタグは、スートホンでも反映されます
文字に影を付ける
<p style="font-size:1.8em; text-shadow:1px 3px 3px #513c3c">文字に影を付ける</p>
▼文字の大きさ指定
font-size:1.8em;
▼文字に影を付けるコード
text-shadow:1px 3px 3px #513c3c
text-shadow:左右の位置px 上下の位置px ぼかし具合px 色
左上方向と右下方向に色違いの影を付ける
<p style="font-size:1.8em; text-shadow: -3px -3px 2px #999999,3px 3px 2px #0000ff">左上方向と右下方向に色違いの影を付ける</p>
使い道はともかく「左上方向」と「右下方向」に影を付けるには「,」で区切って設定した2つの影が同時に適用されています。
▼文字の大きさ指定
font-size:1.8em;
▼文字に影を付けるコード
text-shadow: -3px -3px 2px #999999,3px 3px 2px #0000ff
text-shadow:左方向位置px 上方向位置px ぼかし具合px 色,右方向位置px 下方向位置px ぼかし具合px 色
以上、アメブロ記事内に直接CSSコードを記述して「画像」「文字」に影を付ける方法について解説しました。
