ブログカスタマイズCSSを使って画像に影を付ける方法

wp-custumブログって意外に画像をたくさん使いますよね。

ブログ・サイトでの装飾の設定に欠かせないのが、
CSSです。

CSSを使って、画像に影を付ける方法
ご紹介します。
 
 

 

 

ブログサービスでも、CSSを変更するのは比較的簡単です。
サイトもブログもそうなんですが、WEB上にブログやサイトを表示させるためには、
プログラム言語と、記述を記載してあるファイルで構成しています。
(大まかにいうとということ・・・)

 

初めてブログ・サイトを作る方には、ちょっと解らないかも知れませんが、
いろいろといじっていくと、デザインや画像などをちょっと変えたいなーって
思ってくると思います。

 

これを称して、カスタマイズっていうんですけれども、
サイト・ブログなどの装飾は、このCSSを使って一括管理しているんですね。

※CSSとは?
CSSは Cascading Style Sheet (カスケーディング・スタイルシート)の略で、サイト・ブログなどの見栄えを細かく指定したファイルのことです。

 

 

まー難しいことは、ともかくCSSを使うと、
だらーっとHTMLで長くコードを並べなくても、CSSファイルに
装飾部分の指定をしてあげれば、HTMLで呼び出せばコードも短くて済むし、
何度も指定する手間も省けて楽チンなわけです。

 

「画像に影を付けたい!!」っていう質問が来たので、
CSSを使って、画像に影を付ける方法をご紹介していきます。

 

 

CSSを使えば、簡単に影が付いちゃいますわ!!

私のこのブログなどの一番上の画像などは、
アイキャッチにしているわけではないけれども、画像に影がついていますよね。

こんな感じに影を付けるには、方法としては二つあって・・・・

 

  • 画像自身に影を付ける。(画像加工が必要)
  • CSSで影を付ける設定をして画像に影を付ける。

 

画像自身に影を付ける方法は、画像加工ソフトなどで影付きをしなければなりません。
画像ソフトも、使い慣れてくればすぐできますよね。
ですが、その画像一つだけに影が出来るということになります。

 

CSSに「画像に影を付ける」という設定をしておくと、
どんな画像でも同じ影を付けることができるので、便利です。

 

簡単なCSSですので、設定しちゃってください。

 

例えば、こんな画像を例にして・・・・

 

073

今、このアヒルサンは、影がついていない状態です。

 

 

 

 

 

CSSで、影を付けてみますね。
 

 

 

どうしでしょうか?

 

影付きましたね。

 

 

CSSは、こんな感じです。
※下記のコードをコピーして、CSSファイルに追加してください。
コメントアウトを記述すると、あとで解りやすくなりますよ。

※CSSファイルは、ブログやテンプレートによって名前が異なりますので、
ご自分がお使いのテンプレートを確認してください。

※一般的なCSSの記述です。
このブログはワードプレスの賢威テンプレートを使っているので、
.shadow の前に、#main-contentsを追加してくださいね。

 

 

HTMLで呼び出すときは、class で呼び出します。
こんな感じのコードです。

 

 

 

CSSコードの解説。

-moz-box-shadow ← は、FireFox用のCSSです。
-webkit-box-shadow ← は、safari用のCSSです。

 

今ブログサービスやワードプレスなどは(テンプレートにもよりますが)
CSS3というのに対応できているんですが、対応できてない場合のことも考えて、
いろんなブラウザで見ることが出来るように、設定したほうがいいかもです。

 

CSS3では、box-shadowで影をつけるという定義が出来るようになりました。
※これあまりよくわからない方は、スルーしてください。

 

ボックス(画像)に影を付けるという設定をしているので、
数字の設定で、影の幅を大きくしたり、右・左・上・下に影を付ける設定を
しています。

 

1つ目の数字で、影の水平方向の設定をしています。
プラスの数字で右側に、マイナスの数字を付けると、左側に影を付けます。

2つめの数字で、影の垂直方向の設定をしています。
プラスの数字で下側に、マイナスの数字を付けると、上側に影を付けます。

3つ目の数字は、影のぼかし幅の設定をしています。
マイナスはつけられませんので、いい感じのぼかし幅を見つけてください。

4つ目の数字は、影の大きさを設定しています。
数字が大きいほど、影の大きさが大きくなります。
(マイナスで小さくなります。)

最後は、カラーコードです。
影のカラーをここで設定しています。お好きな影の色を設定できます。

 

 

CSSに設定をすると、どんな画像でも呼び出して使えるので、
とっても便利ですよ^^

 

ブログサービスでも、CSSの追加は出来ると思いますので、
ちょっと覚えて、使ってみてくださいね。
 
 
 
 
A6A6

テンプレートや商材についてのご質問ありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

 
 
 
 

2 Responses to “ブログカスタマイズCSSを使って画像に影を付ける方法”

  1. Kei より:

    こんばんは、

    Keiです。

    CSSを覚えるとカスタマイズが止まらなく
    なるくらいはまりますよね^^

    ブログアフィリエイトでぜひ成果に
    結び付けて欲しいです☆

    また遊びに来ますね^^

    応援もしておきます

    • KoyamaChie より:

      keiさん
      コメントありがとうございます。
      またいつでも、遊びにきてくださいね。
      応援ありがとうございます。

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ