こんにちは。YOSHITAKA（@YOSHITA19704216）です。
初心者
アメブロで写真を立体的な写真に見せる方法はありますか？
よしたか
できますよ。
画像もちょっとしたことで目を引くことができます。
ＣＳＳでカスタマイズすると
画像を毎回加工することなく
余白と枠線をつけることができます。
これで毎回同じように装飾できるようになるんです。
この記事を読むことで
- アメブロでの写真の影をつける方法
Contents
立体的な写真に見えるように影をつけるCSS設定の方法
影をつける写真もこだわっていこう
人の目を引く3大写真
- 美味しそうな料理の写真
- きれいな風景写真
- 楽しそうな写真
きれいな画像はブログの記事の内容を印象付けてくれる効果がありますね。
人の目を引く「画像の周りに余白と影をつけて」
立体感のある画像のカスタマイズをご紹介します。
アメブロのCSS編集の見本
以下の記述をＣＳＳの最後に追記すると
画像に余白と影がつきます。
.articleText a.detailOn img {
border:1px solid #999999;
padding:10px;
background:#fcfcfc;
box-shadow: 3px 3px 3px #cccccc;
}
※ＣＳＳ編集用デザインスキンのみの対応となります。
CSS解説
fa-arrow-circle-right
解説
border:1px solid #999999;
⇒枠線の太さ、スタイル、色をまとめて指定する
padding:10px;
⇒簡単に言えば余白
background:#fcfcfc;
⇒背景色
box-shadow: 3px 3px 3px #cccccc;
⇒影の指定
⇒影の指定
- １番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
- ２番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
- ３番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
- ４番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
- 色の値を指定すると、影がその色になります。
まとめ
今回はアメブロで画像に影をつける方法を解説しました。
アメブロの設定方法とWordPressでは設定方法が違います。
今回はアメブロの専門です。
細かい情報も流していますのでメルマガ登録も
してくださいね(^^)
