« 第20回:「Blog People」でリンク先の更新管理をしてみよう | トップページ | 第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉 »

2006/03/18

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

今回はエントリー部分やサイドバーの下に画像が透けて見えるように背景を設定する方法です。
※クリックで拡大

透明化して背景を表示


具体的な設定方法の前に、まずココログのレイアウト構造を簡単に説明します。
ココログのレイアウト構造を簡単に図にすると、下記のようになります。
※クリックで拡大

ココログのレイアウト構造


一番外側の黒枠内が「body」
その内側の赤枠内が「#container」
タイトルが表示されている部分(オレンジ)が「#banner」
左サイドバー(青)が「#left」
右サイドバー(緑)が「#right」
エントリー部分(紫)が「#center」
という要素でスタイルが決定されています。
(実際には、このほかにもたくさんの要素がそれぞれの部分に設定されています)

そして、重なり順は下から上に
【A】「body」
【B】「#container」
【C】「#banner」「#left」「#right」「#center」
となっています。

つまり、【C】の色(背景)を消すことでそこに【B】の背景を表示出来、
【C】+【B】の色(背景)を消すことでそこに【A】の背景を表示することが出来る、ということです。
※但し「#center」部分の色は、その下の「.content」で指定されているためここの色(背景)を消すことになります。

今回は【B】に置いた画像を表示するためにその上にある【C】の部分を透明化する、ということになります。

※【A】に画像を置いて、【B】【C】を透明化する方法については次の記事
第22回: 本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉
にて説明しています。

さて、ここまで判った上で設定方法の説明です。

手順

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

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

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

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

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

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

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックしてリンクを開く。
    ※「リンク」ボタンでなく、画像の名前の方をクリックして開いてください。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください。
    ※カスタムテンプレートの作り方は 『第3回: カスタムテンプレートを作ってみよう』を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    /*バナー、本文、サイドバーの透明化*/

    #banner,.content,#right,#left
    {
    background-color:transparent; /*指定範囲の透明化*/
    }


    /*背景画像の設定*/

    #container
    {
    background-image:url(●●●); /*背景画像の指定*/
    background-repeat:no-repeat; /*背景画像の繰り返し:なし*/
    background-position:■ ●; /*背景画像の位置*/
    }


    を記述する。
    ※漢字、かなで書いてある部分以外は全て半角英数で書いて下さい。
    ※●●●には上記で保存した画像のURL、 ■、●には画像を配置する位置を指定して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』
  5. 「変更を保存」ボタンを押す。
    ※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

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

ここがポイント

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

お世話になりました

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


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


|

« 第20回:「Blog People」でリンク先の更新管理をしてみよう | トップページ | 第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉 »

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

背景」カテゴリの記事

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

コメント

はじめまして。
初心者の私がカスタマイズについて「使い方ガイド」や「解決広場(全部を読むのに一苦労(^^;))」を読んでも、専門的な用語が出てくるとチンプンカンプンでした。
でもこちらは手取り足取りって感じで、すごく解りやすくて助かります。
またちょくちょくお邪魔しに来ますので、宜しくお願いしまーす。

そうそう、*second message*のデザイン、素敵ですね。すごく可愛いです!

投稿: 石榴 | 2006/03/18 17:48

■石榴さん
こんにちは。コメントありがとうございます。
*second message*のデザインについてもご意見ありがとうございました。
変えたばかりなので嬉しいです(^^)

カスタマイズは一度始めてしまえばあとは応用で何とかなるのですが、最初のとっかかりをどうしたらいいのか…とちょっと悩みますよね。
そんな方の助けにちょっとでもなれたらいいなあ、と思っています。

また遊びに来て下さいね。
お待ちしています(^^)

投稿: tako→石榴さん | 2006/03/19 00:06

こんばんは。

これがやってみたくて、この前からたびたび来ているんですが、
やはり最初から順を追って勉強しないとダメそうです(^^;)。
成功するか、断念するまで、しつこくやって来て、カウンターを
無駄に進めてしまいそうなので、あらかじめお断りしておきます。

こうして背景画像を入れるには、まず本文やサイドバーの色を消して
おかないといけないんですよね?

投稿: Tompei | 2006/04/03 22:51

■Tompeiさん
こんにちは!コメントありがとうございます(^^)

>カウンターを無駄に進めてしまいそうなので

いえいえ、私も読んでいただくために書いているので来ていただけるのは嬉しいです。
ご遠慮なく何度でも見てやって下さい。

今回のバージョンアップではフリー以外でもカスタムCSSが使えるようになったのが一番大きな変化なのかな、と思っています。
CSSは最初は取っつきにくいかも知れませんがちょっとずつでも取り入れていくと、思った以上に変化が楽しめるので面白いと思いますよ。
それに「確認」ボタンを押すだけだったら実際の画面には影響させずに様子を見ることが出来るので、失敗を気にせずにどんどん書き込んで確認してみるといいと思います。
(私なんか実際に反映させてみて確認→「あ、やっぱりダメ~!」→やり直し、をよくやってます(笑))

不明点があったら気軽に質問して下さいね。
お待ちしています(^^)

投稿: tako→Tompeiさん | 2006/04/03 23:25

こんにちは。

おかげさまで少しずつ形になってきたので、新しいデザインをアップして、記事にしました。これからも頼りにしていますので、どうぞよろしくお願いいたします。

投稿: Tompei | 2006/04/05 18:17

■Tompeiさん
コメントありがとうございます。

今回は少しでもお役に立てたようで何よりです(^^)
また使えそうな記事がありましたらどんどん試してみて下さいね。

こちらこそ宜しくお願いします。

投稿: tako→Tompeiさん | 2006/04/08 00:41

こんにちは。

じつはこれもお借りしたのです。
(遅くなってすいません><)

とってもきれいでわたしのイメージどおりに出来ました。
これもtakoさんの説明が簡潔でわかりやすかった
からです。
ありがとうございました(*'▽'*)

投稿: まっきー | 2007/05/11 00:27

■まっきーさん
こんにちは。

ネット上には素敵な素材を無料で提供して下さっている素材屋さんがたくさんありますので、(利用規約を守った上で)上手に利用して自分らしいデザインを楽しんで下さいね。

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

投稿: tako→まっきーさん | 2007/05/12 14:03

はじめまして。最近ココログでblogを始めた者です。
行き詰ってしまいました。助けて下さい!
「ココログオリジナルテーマ」の「新緑」というテンプレートを使ってます。
スクロールすると 全部がスクロールされるテンプレートなんですが、
スクロールすると 記事だけがスクロールされて、
他は固定する様にカスタマイズしたいです。
いろんなサイトを周って 挑戦してみるんですが、
うまくいきません(-_-;)
どうぞ 教えてください。
もしかしたら 編集できないテンプレート って事もあるのでしょうか?
よろしくお願いいたします。

投稿: yumiyumi | 2010/07/06 21:48

■yumiyumiさん
こんにちは、はじめまして。

ご質問の件、昨日「助け合い掲示板」でやりとりされていた件ですよね。
私も気になってCSSを触ってみたのですが、
掲示板の回答と同様、バナーを固定することは出来るのですが、スクロールすると被ってきてしまう記事部分の背景の白を削除することはどうしても出来ませんでした。

オリジナル・テーマ全般に言えることですが、あのテンプレートは最初からデザインがきっちり決まっているので、私のような半端な知識ではちょっと太刀打ち出来ないというのが正直なところだし、それをどうにかしようというモチベーションも(情けない話ですが)今のところありません。

なので、

>編集できないテンプレート

かどうかも私には判断できません。
私には歯が立ちませんでしたが、もっときちんとCSSやHTMLを勉強して理解している方なら出来るのかもしれません。
(出来るような気がします)

せっかく頼って来て下さったのに何のお役にも立てず申し訳ありません。
どなたかきちんとした知識のある方に巡り会えることを祈っています。
カスタマイズ、頑張ってください。

投稿: tako→yumiyumiさん | 2010/07/06 22:59

初めまして

現在、新しくブログを開設するために、見よう見まねでスタイルシートをいじりながらデザインを進めております。

今回は、本文タイトルや本文の下に画像を透かして入れたいと思い、ネットを探し回っている中で、「初めてのココログ・カスタマイズ」の第21回に行き着きました。

これでやっと…と喜んだのですが、私の場合ココログプロを使用していて、分からないまま「上級テンプレート」を使用しています。

そのために、「カスタムCSSを編集」ができません。「バナー、本文、サイドバーの透明化と背景画像の設定の箇所」が分かりません。

このような私でもご指導していただけるのでしょうか。お忙しいとは思いますがよろしくお願いいたします。

投稿: たかせいさむ | 2011/02/27 18:18

■たかせさん
こんにちは。ご訪問ありがとうございます。

さて、ご質問の件ですが、たかせさんのブログのCSSファイル( http://izuru136.cocolog-nifty.com/s_pocket/styles.css )を見てみたところ、透明化する各要素のプロパティ(#banner,.content,#right,#left)は上記の記事と同じ名前で設定されていましたので、CSSはそのまま利用すれば適用されると思います。

但し、私はプロプランは利用していませんので、上級テンプレートの場合それをどこに記述すればいいのかまでは判りません。
少し検索してみましたが、残念ながら直接的に参考になりそうなページを見つけることは出来ませんでした。

下記の公式FAQを見た感じだと、上級テンプレートの中に直接記述するように思えますが…。
■上級テンプレートを作成・編集する方法の概要を教えてください
http://cocolog.kaiketsu.nifty.com/faqs/17392/thread

あるいは外部ファイルとして保存してココログのファイルマネージャーにアップロードし、テンプレートには参照用のリンクタグを記述するという形式を取るのかもしれません。
CSSファイルの作成とリンク方法は下記ページを読んでみてください。
■外部ファイルにまとめて設定する
http://www.tagindex.com/stylesheet/basic/setting1.html

以上、ご参考になれば幸いです。

投稿: tako | 2011/02/27 19:16

早速の回答ありがとうございました

…CSSはそのまま利用すれば適用されると思います。

…の一言で、思い直しもう一度じっくりとスタイルシートを読み直しました。
やはり、早とちりをしていたようで、落ち着いてやり直してみたら、できました。

お騒がせしてごめんなさい。だけれども、励まして頂いて自信が持てました。
ありがとうございました。

投稿: たかせいさむ | 2011/02/27 21:52

■たかせさん
こんにちは。

成功おめでとうございます!(^^)
結局大したアドバイスは出来ませんでしたが、少しでもお役に立ったとしたら嬉しいです。

これからも楽しんでブログを続けて下さいね。
わざわざご報告ありがとうございました!

投稿: tako | 2011/02/28 21:49

コメントを書く



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


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



トラックバック

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

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

» デザインを変えました [葉桜日記]
 いつもtakoさんのブログ *second message* にお邪魔するたび [続きを読む]

受信: 2006/04/05 18:14

» こちらも衣替え [あん・ぷろん・ぷちゅ]
メンテナンス実施のお知らせ:2006年6月8日(木)02:00-16:00 とい [続きを読む]

受信: 2006/06/07 13:57

» またまたブログをカスタマイズ [***Country Netlife***]
 1月中にもう一回くらい更新しようと思っていたら、2月になってしまいました。ブロ [続きを読む]

受信: 2008/02/02 15:50

« 第20回:「Blog People」でリンク先の更新管理をしてみよう | トップページ | 第22回:本文やサイドバーの下に背景画像が透けるように表示してみよう〈2〉 »