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

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

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

よしたか
できますよ。

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

 

CSSでカスタマイズすると

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

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

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

この記事を読むことで
  • アメブロでの写真の影をつける方法

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

影をつける写真もこだわっていこう

人の目を引く3大写真
  • 美味しそうな料理の写真
  • きれいな風景写真
  • 楽しそうな写真

     

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

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

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

    アメブロのCSS編集の見本

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

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

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

     

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

    CSS解説

    解説

    border:1px solid #999999;  
    枠線の太さ、スタイル、色をまとめて指定する
    padding:10px;
    ⇒簡単に言えば余白
    background:#fcfcfc;
    ⇒背景色
    box-shadow: 3px 3px 3px #cccccc;
    ⇒影の指定
    • 1番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
    • 2番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
    • 3番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
    • 4番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
    • 色の値を指定すると、影がその色になります。

     

    まとめ

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

     

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

     

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

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

    してくださいね(^^)

    あなたは「Web集客」に限界を感じていませんか?

    サイトをただ作るだけで満足ですか?

    あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

    良いコンテンツも埋もれてしまっては全く意味がありません。

    正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

    私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

    しかも、これだけでは終わりません!!

    その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

    サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

    ↓ ↓ ↓ ↓ ↓ ↓ 

    おすすめの記事