アメブロで画像を立体的な写真に見えるように影をつけるCSS設定の方法

2019年8月7日 2019年8月12日 3分16秒

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

初心者

アメブロで写真を立体的な写真に見せる方法はありますか？

よしたか

できますよ。

画像もちょっとしたことで目を引くことができます。

ＣＳＳでカスタマイズすると

画像を毎回加工することなく

余白と枠線をつけることができます。

これで毎回同じように装飾できるようになるんです。

この記事を読むことで

Contents

立体的な写真に見えるように影をつけるCSS設定の方法

人の目を引く3大写真

きれいな画像はブログの記事の内容を印象付けてくれる効果がありますね。

人の目を引く「画像の周りに余白と影をつけて」

立体感のある画像のカスタマイズをご紹介します。

以下の記述をＣＳＳの最後に追記すると

画像に余白と影がつきます。

.articleText a.detailOn img {
border:1px solid #999999;
padding:10px;
background:#fcfcfc;
box-shadow: 3px 3px 3px #cccccc;
}

※ＣＳＳ編集用デザインスキンのみの対応となります。

解説

border:1px solid #999999;　　

⇒枠線の太さ、スタイル、色をまとめて指定する

padding:10px;

⇒簡単に言えば余白

background:#fcfcfc;

⇒背景色

box-shadow: 3px 3px 3px #cccccc;
⇒影の指定

今回はアメブロで画像に影をつける方法を解説しました。

アメブロの設定方法とWordPressでは設定方法が違います。

今回はアメブロの専門です。

細かい情報も流していますのでメルマガ登録も

してくださいね(^^)

この記事を書いた人

コーチ・コンサル・セラピスト等のお一人起業家向けにWordPressを教えています。
Webが苦手で何から始めていいかわからない方にヒアリングを行い、適切なアドバイスを行い、必要なサポートを行っています。

あなたにお願いです。
メルマガを登録して、情報を受け取ってください。

あなたとは今日しか出会えないかもしれません。
出会いと繋がりを大切にしています!!