ヘッダー画像の幅に縦に二本の影を付けてブログ全体を立体的に

ヘッダー幅に縦二本の影のような線を入れてアメブロを立体的に見せる方法

こんにちワ。”道路工事きもまろ”です^^;

このこと、以前も、このブログに書きました。
御存知の方は、スルーしちゃって下さいませ。m(_ _ )m
（過去記事を少し整理してますもんで・・汗）

ここのところ数日、アメブロの全体的なカスタマイズについて書いて来ました。

1.アメブロの既存のデザインからCSS編集用デザインに変更する
2.アメブロにヘッダー画像を設置する
3.ブログタイトルと説明文を消してリンクにする
4.ヘッダー上の隙間を詰める
5.アメブロの「CSS編集可能デザイン」に画像背景を設置

今回の記事で、アメブロの全体的なカスタマイズの方法シリーズは、とりあえず最後にしようと思います。

ヘッダー幅に縦二本の影のような線を入れてアメブロを立体的に見せる方法

CSS編集の末尾に以下のコードを追記して下さい。

/*ヘッダー幅に影（立体化）03:10*/
.skinBody2{
width:984px;
margin:0 auto;
box-shadow:1px 2px 20px rgba(50, 50, 50, 1);
}

※1.背景に画像や、カラーコードで色をつけてない場合に影が濃すぎると感じるようでしたら、赤字の数字を、100,100,100にしてみて下さい。影の色が薄くなります。
※2.上のコードの色を指定するのに、今までの１６進数の書式ではなく、ＣＳＳ３ならではの、ＲＧＢ－Ａという色を指定する書式を使ってます。
詳しい説明はこちらにありました。
⇒色を指定する新しい書式ＲＧＢ－Ａ

〇思うこと
このブログに影を付けて立体的に見せる方法って、他にも影の画像を画像ソフトで作って設置する方法とか、調べてみたら色々ありました。
その中で、この方法が一番簡単で、尚且つ各種の調整ができる方法だと思います。

☆ブィブィ  ('-^*)/

新しいことわざが誕生しました。「猫も塀から落ちる」

ね！？

表示 - 継承 2.1