FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

背景に固定した画像を内側にも表示する

背景に設定した画像をスクロールせずに固定して表示する方法を紹介します。
さらにその画像を記事欄等の内側にも表示する方法を紹介します。
※当サイトの共有テンプレート「lightframeシリーズ」を想定して説明します。

まず、背景に設定した画像をスクロールせずに固定して表示する方法を紹介します。
スタイルシートの末尾に以下を加えてください。

body {
background-image: url("http://～"); /* 背景画像 */
background-attachment:fixed; /* 固定表示 */
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: right bottom; /* 表示位置 */
}

"http://～"には用意した画像のURLを入れてください。
繰り返し表示の有無と表示位置はお好みにあわせて設定してください。
これで背景画像がスクロールされずに固定表示されます。

しかしこの背景画像は、その手前にある要素の背景色で覆い隠され、外側に僅かに見えるだけです。
内側にも表示させるには、内側に設定されている背景色を削除する必要があります。

以下、当サイトの共有テンプレート「lightframe_white」を想定して説明します。
スタイルシートの次の行を削除してください。

#outline {
background-color:#ffffff; /* サイト背景色 */
}

記事やプラグイン等も透明にするなら、さらに次の赤い行を削除してください。

/* ▼ 記事 ▼ */
.ently_outline {
background-color:#FFFFFF; /* 背景色 */
}
～
/* ▲ 記事 ▲ */

/* ▼ 左側メニュー(プラグイン１) ▼ */
～
.plugin1_body {
background-color:#ffffff; /* 背景色 (本体) */
}
/* ▲ 左側メニュー(プラグイン１) ▲ */

/* ▼ 右側メニュー(プラグイン２) ▼ */
～
.plugin2_body {
background-color:#ffffff; /* 背景色 (本体) */
}
/* ▲ 右側メニュー(プラグイン２) ▲ */

/* ▼ 上部メニュー(プラグイン３) ▼ */
～
.plugin3_body {
background-color:#ffffff; /* 背景色 (本体) */
}
/* ▲ 上部メニュー(プラグイン３) ▲ */

/* ▼ コメント ▼ */
.comment_outline {
background-color:#FFFFFF; /* 背景色 */
}
～
/* ▲ コメント ▲ */

/* ▼ トラックバック ▼ */
.trackback_outline {
background-color:#FFFFFF; /* 背景色 */
}
～
/* ▲ トラックバック ▲ */

/* ▼ カテゴリ・検索・月別ナビゲーション ▼ */
～
.various_body {
background-color:#FFFFFF; /* 背景色 (本体) */
}
～
/* ▲ カテゴリ・検索・月別ナビゲーション ▲ */

これで背景に固定した画像を内側にも表示することができます。

関連記事

[ 2009/05/07 00:43 ] カスタマイズ lightframe 専用 | TB(0) | CM(7)

≪ 記事内のリストにだけ、リストアイコン画像を設定する | HOME | コメントを含めた検索 ≫

[ 4104 ] 確認

いたお様、御親切に説明頂き有難うございます<(_ _)>
早速説明頂いた通りにスタイルシートを編集してみると、
出来ました！
思い通りのテンプレートになりました＼(*^▽^*)／
これなら背景を変更する度にページ全体の雰囲気がガラリと
変えられるので、本当に素敵な編集ですね。

１つ確認なのですが
#outline {
background-color:#ffffff; /* サイト背景色 */
}

は全て消したのですが合ってますでしょうか？
それとも記事やプラグインと同様に赤字部分の
background-color:#ffffff; /* サイト背景色 */
だけを消すべきなのでしょうか？

あと出来れば固定背景を３つ程ランダムに表示
させたいのですが、この編集にそういう事は可能
なのでしょうか？
可能な場合、どこにそのタグを入れれば良いのか
分かりません；；
又質問してしまい申し訳ございません。。
御回答頂ければ幸いです<(_ _)>

[ 2009/05/07 14:21 ] [ 編集 ]

[ 4105 ] 記事タイトルの背景

何度もすいません。
記事タイトルの背景は透視化されていないのですが、
どこを消せば透明になるのでしょうか？＞＜

[ 2009/05/07 14:35 ] [ 編集 ]

[ 4107 ] ▼猫まろさん

/* ▼ 記事 ▼ */
.ently_outline {
～
}
.ently_title {
font-size:10pt; /* 文字サイズ(記事タイトル)*/
background-color:#○○○○○○; /* 背景色 (記事タイトル)*/

赤字の部分が記事タイトル色です。
ここを削除すれば透過されると思います。

[ 2009/05/07 15:54 ] [ 編集 ]

[ 4108 ] ちゃん様

御親切にありがとうございます<(_ _)>
アドバイス通り編集すると無事に記事タイトルの背景が透過されました！
同じ様に左側メニュー(プラグイン１)、右側メニュー(プラグイン２)、上部メニュー(プラグイン３)
のタイトル部分も試した所、全て透過出来て感激しました。
ありがとうございます<(_ _)>

[ 2009/05/07 16:19 ] [ 編集 ]

[ 4113 ] > ちゃんさん、猫まろさん

ちゃんさん、いつもありがとうございます＾＾

猫まろさん、#outlineは全部消しても消さなくてもOKです。
背景画像をランダムに表示する方法はこの記事を参考にしてください。

背景画像をランダムに変える
http://10plate.blog44.fc2.com/blog-entry-81.html

[ 2009/05/07 21:41 ] [ 編集 ]

[ 7928 ]

いつも参考にしています＾＾
質問なんですが…
ブログの背景に画像を入れてみて
背景色もなくしました。
プレビューで見てみるとちゃんと反映されているのですが
ブログの確認で見ると反映されていません…
やはり反映まで時間かかるのですか？

[ 2010/01/18 20:59 ] [ 編集 ]

[ 7934 ] > Azbyさん

今見たところ背景画像が見えますが解決されたのでしょうか。
もしまだ見れないなら[Ctrl]+[F5]でブラウザをリフレッシュしてみてください。

[ 2010/01/18 23:23 ] [ 編集 ]

コメントの投稿