« 第21回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈1〉 | トップページ | ブログ便利ツール:「RSSリーダー」利用のススメ »

2006/03/18

第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉

前回に引き続き「背景画像が透けるように表示してみよう」シリーズの第2弾です。
今回は一番下の「body」部分に入れた背景が全体に透けるように設定してみましょう。
…と言っても基本的には前回の考え方と同じですが(笑)
下記の画像は以前、別ブログ(ココログ)で使っていたデザインです。 
※バナーの部分は別に作成しています。

本文、サイドバーの下に透ける背景


この方法だと大きな画像をそのまま利用できて、サイドバーやバナーの区切りが全くなくなるので背景画像を変えるだけでブログの見た目が一気に変えられます。

手順

事前準備:画像を準備する

背景用の画像を準備します。

ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

準備した画像はPC内の判りやすい場所に保存しておきます。

ファイルをココログにアップロードする

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
    ※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は 『第3回:カスタムテンプレートを作ってみよう』を参照して下さい。
  4. 「編集」画面の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」様内 『背景画像の表示位置を指定する』
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • background-color:transparent;
    の 「transparent」は背景色を透明にする値です。
    カラーコードではないので「#」は不要です。
  • background-repeat:no-repeat;
    は、 画像を繰り返さない(=一つだけ)表示する、ことを指定しています。
    その他の表示方法(繰り返し、敷き詰めなど)については下記のページを参照して下さい。
    「TAGindex」様内 『背景画像の並び方を指定する』
  • background-attachment:fixed;
    は、背景画像を固定する(=スクロールで動かさない)ことを指定しています。
    スクロールさせる場合はこの行を削除して下さい。
  • 今回の指定箇所は必ず文字が上に載ります。
    それを考慮して背景画像は文字の邪魔にならないものを選びましょう。
    私はお借りした素材をソフトを使って少し薄くなるように加工しています。
    ※素材サイト提供の素材については加工が許可されているかどうかを確認して下さい。

お世話になりました

■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


|

« 第21回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈1〉 | トップページ | ブログ便利ツール:「RSSリーダー」利用のススメ »

カスタマイズ」カテゴリの記事

背景」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

takoさん、いつもお世話になっています。
この透明化シリーズの件、お待ちしていました!
「どうやるんだろう?」とずっと疑問に思いつつ、
画像のパーツ化やスクリプト使用まで考えていました。
ココログ提供のリッチテンプレートの解析もしたけど、
あちらはかなり大胆なことをしているんですよね(笑)。
でも、意外と簡単にできることが分かって、スッキリ!

3月末のバージョンアップ後に、私も試してみたいと思います。

投稿: ads(あず) | 2006/03/21 02:13

 こんにちは!いつもありがとございます。
「みんなの解決広場」をうろうろしていたら、この記事と同じ内容のことを
takoさんが解答されてるのを見つけて、慌てて飛んできました(⌒ー⌒)
 早速、使わせていただきました!
せっかくの可愛い背景が少ししか見えなくて残念だなぁ…
と思っていたので、とても嬉しい技でした。
ありがとうございましたm(*__*)mペコ 
また記事で紹介させていただきたいと思います。

投稿: シナモン | 2006/03/21 03:37

 たびたび失礼します。
よく見たら、私が「みんなの…」から使わせていただいたものと若干違うようなのですが、
ブログには上手く反映されているようです。このままで、何か問題があるんでしょうか?

投稿: シナモン | 2006/03/21 03:52

■あずさん
こんにちは。コメントありがとうございます。

>お待ちしていました!

お待たせしました!(笑)
CSSを書くのは簡単だったのですが、やっぱりこれはレイアウト構造から説明したほうが判りやすいだろうな~、だとしたらその図も書かなきゃな~、と思っているうちに遅くなってました。

>画像のパーツ化やスクリプト使用まで考えていました。

私がやってることなんだから、そんなに難しくないですって!
魔法の言葉は「transparent」です(笑)

>3月末のバージョンアップ後に

楽しみにしてま~す♪

投稿: 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

初めまして!shinと申します。
今回リッチテンプレートから、自分で作ったページにリニューアルしようと思いたってから、takoさんのサイトにずーっとお世話になってました。
正直このサイトさんが無かったら、リニューアルを諦めてましたよ…。

色々試行錯誤して、やっとそれっぽくなりましたので、ひとまずお礼を言いたくてコメントしました!

まだ、bodyの所に背景を薄く表示したり、サイドバーの文字の大きさをちょっとだけ大きくしたり、改善したい点が色々あるので、これからもお世話になります!
よろしくお願いしますo(_ _)oペコッ

投稿: shin | 2008/10/03 11:43

■shinさん
こんにちは。コメントありがとうございます。

>このサイトさんが無かったら、リニューアルを諦めてました

そう言っていただけるとすごく嬉しいです(*゚ー゚*)
基本もちゃんと勉強していない我流のCSSですが、恥ずかしげもなく^^;ブログとして残しておいた甲斐があった!と思えます。
ありがとうございます!

オリジナルのタイトル画、ステキですね(^^)
自分で絵を描けるとカスタマイズの幅がグンと広がりますよね~。羨ましいです。
今回はちょっと苦労されたようですが、一度やってしまえばどんどん応用が効くようになると思いますので、これからもどんどん挑戦してみて下さいね。

またのご訪問お待ちしています。

投稿: tako→shinさん | 2008/10/03 22:59

わぁ、見に来て下さったんですか( ̄Д ̄;?
褒めて頂いて恐縮です…。

takoさんのおかげでちょっとCSSが身近になったので、これからものんびり色々試していこうと思います(^―^)

あ、*second message*にもお邪魔させて頂きました。
ゆったりした空気の素敵なサイトさんですね!

こちらこそよろしくお願いします!

投稿: shin | 2008/10/04 00:03

■shinさん
こんにちは。

>CSSが身近になったので、これからものんびり色々試していこう

是非是非!
ココログはプロ版以外はHTMLファイルは触れないのでカスタマイズに制限があるのですが、CSS初心者にとってはこの辺りから始めるのがちょうどいいんじゃないかな~と思います。
それでもやり方によってはかなり変化が楽しめますので、いろいろ工夫してみて下さいね。

>*second message*

ご訪問ありがとうございます!(*^-^)
本の感想メインですが、カスタマイズ関連も少し書いていますのでもしよかったら参考にして下さい。
(カテゴリーの「ウェブログ・ココログ関連」に置いてあります)

コメントありがとうございました。

投稿: tako→shinさん | 2008/10/04 09:59

初めまして。
ココログの利用は長いのですが、カスタマイズは簡単なものしか出来ませんでした。
最近になって、CSSのやり方を知りたくて、こちらにたどり着きました。
お世話になっています。。

背景画像を固定して、透明にしたかったのが、やっと何とか出来ました。
本当はテーブルだけを半透明にしたかったのですが、これはソフトが無いので
出来ませんでした。。

全体を、透明にしたのは良かったんですが、タイトルに画像を使うと、見た目が変になりそうなので、元々あるタイトルをそのまま使ったら、ヘッタ―部分が狭くて、タイトルのすぐ下に日付と記事タイトルが来てしまいます。
これは何とか方法が無いものでしょうか?
今まではタイトル画像を使っていたので、違和感は無かったのですが。。。

背景画像も、時々替えて楽しみたいと思っています。
他の部分も徐々にカスタマイズしてみたいので、参考にさせていただきます。

長々とすみませんが、よろしくお願いいたします。

投稿: 花はな | 2011/10/17 03:45

■花はなさん
こんにちは。コメントありがとうございます。

さて、ご質問の件ですが、ブログを拝見したところタイトルと記事欄の間はかなり開いているようですが、ご自分で解決されたのでしょうか。
見た感じでは特に今のままで問題ないのではないかと思います。

なかなかこちらのブログ記事の更新が出来ず、質問にもタイムリーに回答できなくて申し訳ありません。
また何かありましたらご連絡ください。
判る範囲、出来る範囲で対応させていただきます。

今後ともよろしくお願いいたします。

投稿: tako | 2011/10/17 23:48

TAKOさま。
ありがとうございました。

どこかにヒントが無いものか、探していた所。。

>■『はっさくノート』 様内 「タイトルバナーをオリジナルの画像で  カスタマイズ・2方法」

こちらで見た方法が、もしかしたら使えるかも?と思い、早速試してみました。
そしたら、出来たんです!

すぐにでも報告をと思い、こちらを覗いて見たんですが、コメントがまだアップされていなかったので、後日にと思い今日になりました。
ありがとうございました。

このサイトが無かったら、ワンパターンのブログに飽きていたと思います。
ちなみにワタシは65歳ですが、やれば出来ると思い、脳細胞にカツを入れて頑張ってます。

まだまだ未完成ではありますが、こちらを頼りにしてもう少しいいものが出来ればと思っています。
お世話になりました。
これからもよろしくお願いいたします。

投稿: 花はな | 2011/10/18 14:28

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1081766

この記事へのトラックバック一覧です: 第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉:

» 背景画像を透かしてみた [はっさくノート]
 背景用の画像をphotshopで作成し、本文・右サイドバー・左サイドバーのbackground-colorを透かしてみた♪  方法は毎度お世話になっている「初めてのココログ・カスタマイズ」さんの『第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉』を参考にさせて頂いた。有難...... [続きを読む]

受信: 2006/10/10 22:21

« 第21回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈1〉 | トップページ | ブログ便利ツール:「RSSリーダー」利用のススメ »