第22回：本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉
前回に引き続き「背景画像が透けるように表示してみよう」シリーズの第2弾です。
今回は一番下の「body」部分に入れた背景が全体に透けるように設定してみましょう。
…と言っても基本的には前回の考え方と同じですが（笑）
下記の画像は以前、別ブログ（ココログ）で使っていたデザインです。
※バナーの部分は別に作成しています。
この方法だと大きな画像をそのまま利用できて、サイドバーやバナーの区切りが全くなくなるので背景画像を変えるだけでブログの見た目が一気に変えられます。
事前準備：画像を準備する
背景用の画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
準備した画像はPC内の判りやすい場所に保存しておきます。
ファイルをココログにアップロードする
画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
■ 『基本1： ファイルのアップロード』
を参照して下さい。
CSSを編集する
- 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。 - ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。 - 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
※カスタムテンプレートの作り方は 『第3回：カスタムテンプレートを作ってみよう』を参照して下さい。 - 「編集」画面のCSS記述欄に
/*バナー、本文、サイドバーの透明化*/
#banner,#container,.content,#right,#left
{
background-color:transparent; /*指定エリアの透明化*/
}
/*背景画像の設定*/
body
{
background-image:url(●●●); /*背景画像の指定*/
background-repeat:no-repeat; /*背景画像の繰り返し：なし*/
background-attachment:fixed; /*背景画像のスクロール：なし*/
background-position:■ ●; /*背景画像の表示位置*/
}
を全て半角英数で記述する。
※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
※画像の位置指定については下記のページを参考にして下さい。
■「TAG index」様内 『背景画像の表示位置を指定する』 - 「変更を保存」ボタンを押す。
※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。 - 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
- 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
- 「すべてのファイルを反映しました」の画面に切り替わったら終了。
- イメージ通りに出来ているかどうか確認する。
以上です。
うまく出来ましたか？
- background-color:transparent;
の 「transparent」は背景色を透明にする値です。
カラーコードではないので「#」は不要です。 - background-repeat:no-repeat;
は、 画像を繰り返さない（＝一つだけ）表示する、ことを指定しています。
その他の表示方法（繰り返し、敷き詰めなど）については下記のページを参照して下さい。
■「TAGindex」様内 『背景画像の並び方を指定する』 - background-attachment:fixed;
は、背景画像を固定する（＝スクロールで動かさない）ことを指定しています。
スクロールさせる場合はこの行を削除して下さい。 - 今回の指定箇所は必ず文字が上に載ります。
それを考慮して背景画像は文字の邪魔にならないものを選びましょう。
私はお借りした素材をソフトを使って少し薄くなるように加工しています。
※素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。
■素材サイト 「PRISM」様＜記事内のボタン素材＞
| 固定リンク
トラックバック
この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1081766
この記事へのトラックバック一覧です： 第22回：本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉:
» 背景画像を透かしてみた [はっさくノート]
背景用の画像をphotshopで作成し、本文・右サイドバー・左サイドバーのbackground-colorを透かしてみた♪ 方法は毎度お世話になっている｢初めてのココログ・カスタマイズ」さんの『第22回：本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉』を参考にさせて頂いた。有難...... [続きを読む]
受信： 2006/10/10 22:21
コメント
takoさん、いつもお世話になっています。
この透明化シリーズの件、お待ちしていました！
「どうやるんだろう？」とずっと疑問に思いつつ、
画像のパーツ化やスクリプト使用まで考えていました。
ココログ提供のリッチテンプレートの解析もしたけど、
あちらはかなり大胆なことをしているんですよね（笑）。
でも、意外と簡単にできることが分かって、スッキリ！
３月末のバージョンアップ後に、私も試してみたいと思います。
投稿 ads（あず） | 2006/03/21 02:13
こんにちは！いつもありがとございます。
「みんなの解決広場」をうろうろしていたら、この記事と同じ内容のことを
takoさんが解答されてるのを見つけて、慌てて飛んできました(⌒ー⌒)
早速、使わせていただきました！
せっかくの可愛い背景が少ししか見えなくて残念だなぁ…
と思っていたので、とても嬉しい技でした。
ありがとうございましたｍ（*＿＿*）ｍペコ
また記事で紹介させていただきたいと思います。
投稿 シナモン | 2006/03/21 03:37
たびたび失礼します。
よく見たら、私が「みんなの…」から使わせていただいたものと若干違うようなのですが、
ブログには上手く反映されているようです。このままで、何か問題があるんでしょうか？
投稿 シナモン | 2006/03/21 03:52
■あずさん
こんにちは。コメントありがとうございます。
＞お待ちしていました！
お待たせしました！（笑）
CSSを書くのは簡単だったのですが、やっぱりこれはレイアウト構造から説明したほうが判りやすいだろうな～、だとしたらその図も書かなきゃな～、と思っているうちに遅くなってました。
＞画像のパーツ化やスクリプト使用まで考えていました。
私がやってることなんだから、そんなに難しくないですって！
魔法の言葉は「transparent」です（笑）
＞３月末のバージョンアップ後に
楽しみにしてま～す♪
投稿 tako→あずさん | 2006/03/21 07:11
■シナモンさん
こんにちは。コメントありがとうございます。
シナモンさんも、お待たせしました（笑）
＞私が「みんなの…」から使わせていただいたものと若干違う
「～広場」で書いたのは多分「#banner」部分が抜けているのだと思います。
この前の記事の前半部分（レイアウト構造」のところ）を読んでいただければ判るように、要は「どこを透明化させたいか」で何を指定するか変わってきますのでここはどんな組み合わせでも大丈夫ですよ。
ご自分で透明にしたい部分を好きなように指定して、その結果が思った通りになっていればそれが正解です。
投稿 tako→シナモンさん | 2006/03/21 07:21
ありがとうございました！
今は、同じ模様の背景を一面に使用しているので、位置の設定をしていませんが、
また今度模様替えをして、位置を指定しないといけない時や
背景画像を固定するか、スクロールするか設定する時には、
またここへ来てお世話になるつもりです。
takoさんが、このような初心者にやさしいページを作ってくださって、本当に助かっています。
これからもよろしくお願いします(⌒ー⌒)
投稿 シナモン | 2006/03/21 14:49
■シナモンさん
わざわざコメントありがとうございます(^^)
私も出来ることはあまり多くないのですが、少しでもお役に立てていれば何よりです。
これからも少しずつですが記事を増やしていきますので遊びに来てくださいね。
お待ちしています。
投稿 tako→シナモンさん | 2006/03/21 21:36