カスタマイズ・レコード１６ －背景画像の透過－

【背景画像の透過】

初めてのココログ・カスタマイズさんの
　　「第22回：本文やサイドバーの下に背景画像が透けるように表示してみよう(2)」　を
参考にさせていただいて、カスタマイズをしてみました。

１．背景画像の透過
一番下にある背景を透過させてみました。
今迄とはかなり違った印象になっていると思います。
以下のタグを、カスタムCSS　に加えました。

/*バナー、本文、サイドバーの透明化*/
#banner,#container,.content,#right,#left
{
background-color:transparent; /*指定エリアの透明化*/
}

/*背景画像の設定*/
body
{
background-image:url(http://～/○○○.gif); /*背景画像の指定*/
　　　　　　　　　　※ご自分のファイルをアップした絶対パスを記入
background-repeat:no-repeat; /*背景画像の繰り返し：なし*/
background-attachment:fixed; /*背景画像のスクロール：なし*/
background-position:left top; /*背景画像の表示位置*/
　　　　　　　　　　※ご自分の好みによって数値の変更可

（注意）
”background-attachment:fixed;”
は、背景画像を固定する
（＝右横のスクロール・バーの動きにつれて画像が動かない）
ことを指定しています。
スクロールさせる場合は、この行を削除して下さい。

２．本文を囲む枠線表示／半透明化
背景画像を透過させると、本文が全体にかすんでしまって締まりがなくなる上、
掲載される文字が見えづらくなります。
そこで本文を枠線で囲むと同時に、本文全体を半透明化させて文字を読み易くしてみました。
以下のタグを、カスタムCSS　に加えました。

.entry-body{
background-image:url(http://～/○○○.gif);/*背景画像の指定*/
　　　　　　　　　　※半透明化させるファイルをアップした絶対パスを記入
border:1px solid #2b8e57;/*枠線*/
　　　　　　　　※希望するカラーコードを記入
padding: 10px;/*枠線から本文までの余白*/
}

【追記】
半透明化させるファイルは、Free Wall Paperさん の
サイトからダウンロードさせて頂けます。
　★トップページ → 素材 → 使い方 → 半透明の背景
ご利用の際は、提供サイトの規約を遵守の上、ご利用下さい。

これで文字も読めるようになって、かなりのイメージチェンジが出来ました！。