« 茅葺きの家 | トップページ | カスタマイズ11(背景を食い込ませる2) »

2004.04.19

カスタマイズ11(背景を食い込ませる1)

画像がバナー部分から本文に食い込むデザインを開発(笑)したのでここでやり方を披露しちゃいます。

今回はかなり長くなるので、解説編と、タグ編を分けて記事にしました。
タグ編は「カスタマイズ11(背景を食い込ませる2)」に書きました。
説明読むの面倒だよ、という場合はスタイルシートのタグ部分だけコピペして勝手に作り直してください(笑)。

おおまかな手順は3つ。
横幅指定、高さ指定、画像の作成、です。
サイドバーや本文記事部分にかけて背景画像が続くようにするには、それぞれの部品に正確な数値を設定することが大前提となります。
全部数値を指定するのは面倒に思えますがこれには他にも大きなメリットがあって、ネスケで見たときの不具合も解消されるので、私的には数値指定はお勧めです。
多いけどがんばってねっ。

1.横幅指定
全部で4カ所指定します。
右の数値は私のココログの数値です。

#container背景をのぞいた全体800px
#center記事部分400px
#left左サイドバー200px
#right右サイドバー200px

*もうちょっと広くしたい場合は全幅を900ピクセルにするといいです。
でもそれ以上大きくしてしまうと多くの環境で画面がはみ出て横スクロールバーが出てしまうのであまりお勧めしません。

2.高さ指定
これは#bannerのみの指定で大丈夫。
ただし、ブログのタイトル部分の上下に余白が指定されてるのでこれもプラスしなくてはなりません。
私の場合は#bannerが120ピクセル、上下の余白(padding)は各25ピクセルにしました(つまり高さは合計で170ピクセルですね)。
タイトルの余白を作るなら上と左だけ指定すればいいじゃん、って感じしょうが、あえて上下左右指定するには理由があります。
ニフティ提供の大元のスタイルシートですでに余白の数値が指定されていますが、デザインによって数値もまちまちです。
自分のデザインって普通は余白いくつになってるんだろう?っていちいち調べるのも面倒でしょ(笑)。
オリジナルのスタイルシートで数値を書いておけば、その数値が優先されるのです。これで数値指定は準備完了です。

3.背景画像の作成
なんでも好きな画像でいいですよ、幅はキッチリ800ピクセル、高さは200以上あるとキレイに食い込むと思います。
下をグラデーションにすれば溶け込んでいくみたいな雰囲気を出せますね。
グラデーションに加工するソフトなんて持ってないよ、って場合でもWindows付属のペイントでエアブラシなんかを使うと、点描っぽいザックリした感じが得られるかなと思います。
あなたのセンスでいろいろ試してみてねっ。
その画像を今度は4つに分割します。
一番上は#bannerと余白を足した高さの170ピクセルにします。
左右はサイドバーと同じ幅の200ピクセル、真ん中は本文と同じ幅の400ピクセルにします。
それぞれの画像に名前をつけてアップロードしておきましょう。
どこに保存したか忘れないようにねっ。
ちなみに私の場合はスタイルシートと同じフォルダ内に4つの画像を保存しました。
画像は別なサーバー(自分のホームページとか)に置いておきたいという場合は「画像を使うにあたって」を参照してねっ。

ひゃ~~もうちょっとだがんばれ~~~。いよいよスタイルシートの指定だ!
ちなみにスタイルシートの置き方は以前書いた「スタイルシートの作成&背景を変える」を参照してくださいね。

|

« 茅葺きの家 | トップページ | カスタマイズ11(背景を食い込ませる2) »

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

コメント

なるほど~~!!
そんなカラクリがあったんだーー!!!
画像を4つ使ってたのね~。。。
目からウロコだゎ。
これは、早速実験してみなくちゃ(笑)
まずは、画像の用意だわね♪

しのぶさん、ありがとう~
・・・・いそいそ。。。

投稿: 檬花 | 2004.04.20 21:30

がんばれ~~~!!!
ゴチャゴチャ書いちゃったからなんか面倒そうだけど、
やってみるとけっこう簡単だったりします。
訳分からなくなったら遠慮なく
「オマエの説明は分からん!」と言ってやってくださいねっ。

どんな感じで変身するのか、楽しみにしてま~す!!!

投稿: しのぶ | 2004.04.20 23:59

すばらしいタイトル背景で、思わずトラックバックさせて頂きました。自分も挑戦しようかと思っています。

投稿: つ一とん | 2004.04.22 21:20

つ一とんさん、初めましてっ
「つーとん」かと思ったら「ー」じゃなくて「一」なんですね(笑)。

なんかなあ、み~んな、私のよりずっと美しく作ったりするんだよなあ。
不条理だ~~(爆)。

投稿: しのぶ | 2004.04.22 23:10

どうも初めまして!
スタイルシートで背景画像を設定できるのは知っていて、
実際自分の所でもサイドバー部分は変えたんですけど、
まさか・・・(多すぎて語れず)、これは、すごいっ!
それにご丁寧な説明文。大変勉強になります。
見栄えはどこかの公式サイトみたいです(どこ?)。

かなりの根気が必要だけど、達成感は想像以上でしょうね。
女性の方が繊細なデザインを開発するのかも(私は男です)。
またすごいのができたら、教えてくださいね!

投稿: ads(あず) | 2004.04.23 00:26

>adsさん
コメントありがとうございます~~。
いやー、私なんかかなり大ざっぱというか、詰めが甘いというか、いつも「だいたい」とか「雰囲気」とかで強引に押し切ってしまうので、いつも後からいろんな人にフォローしてもらってます(大汗)。

私から見たら、男性の方が綿密な計算は得意なんじゃ?とも思うんですが、結局はその人の性格もあるのかも知れませんねっ。
ちなみに私の母はスーパーアバウトな性格、父は徹底的に計算と計画の人だったりします。
そして、母の方が最後に勝つ(笑)ことも数知れず。

ともあれ、これからもよろしくお願いします~~。

投稿: しのぶ | 2004.04.23 20:38

 お教えいただいた方法で、やっとタイトル背景を食い込み式に直してみました。

 記事タイトルの部分が判別し辛くなってしまったので、もう少し何とかしようと研究中です。

p.s. 「一」を使っているのは、他の人とハンドルがダブっているので、意図的に変えました。

投稿: つ一とん | 2004.05.01 20:13

>つ一とんさん
さっそく拝見しました~。
すっごくステキになりましたねえ!!!

遠くに富士山が見えるこの画像も美しいし、これはどこの風景なんでしょうか?
いいなあ、こういう景色を見ると伊豆に行きたくなるなあ。

投稿: しのぶ | 2004.05.01 21:43

 あの画像は、戸田の海岸から見える富士山です。だんだん気温が高くなってくると、霞んでしまうのが残念です。
 「最近読んだ本」とか毎日の記事のタイトルの文字色が背景と同系色なので、もう少しなんとかしようとしています。

投稿: つ一とん | 2004.05.01 22:24

こんばんわです。

ひーこら言いながら(笑)私もちゃれんじしてみました。
いやあ、難しかったですぅ。。。。
サイト名を画像のみで表示したかったので、とりあえずコントロールパネル→設定の「サイト名」を空欄にしたんですが、これはたぶんベストな方法ではないですよねえ。。。なにか良い方法をご存知でしたら、ご教示いただけたら非常にウレシイですぅ。m(_ _)m

投稿: とんがりやま | 2004.05.22 01:00

>とんがりやまさん
おおお!!!カッコ良く変身しましたねえ!!!
ブログタイトルの件なんですが、今の空欄にするのもいいけど、それだとブラウザのタイトルバーがURLになってしまうんですよね。
スタイルシートの#banner Aのとこに「visibility: hidden;」を書き加えてみてください。
具体的にはこんな感じ。

#banner A {
COLOR: #ffffff;
FONT-STYLE: italic;
TEXT-DECORATION: none;
FONT-FAMILY: "Arial", "Helvetica", "sans-serif";
visibility: hidden;
}

上のタグではフォント色やスタイルは、私の設定になっているので、とんがりやまさんのスタイルに置き換えてくださいね。
これなら、タイトルを入れても見えないし、ブラウザのタイトルバーにはちゃんとブログ名が出るわけですねっ。

投稿: しのぶ | 2004.05.22 03:18

うわぁ、素早いご返事、ありがとうございます〜〜っ!
いやあ、しのぶさんの食い込みテク、ずっと憧れだったんです。
なにせスタイルシートのなんたるかもほとんど理解できていない鳥頭ですので、ようやくあのように見えた瞬間は感涙ものでした(笑)
お教えいただいた件は、週明けにもさっそくやってみます。
本当にありがとうございました。取り急ぎ、御礼まで。

投稿: とんがりやま | 2004.05.22 04:12

はじめまして。
過去ログにコメントしてすいません。
ブログデザインの変更をしようとウロウロして、こちらに巡り会いました。すごく素敵な技にびっくり。早速挑戦させていただきます。出来たときにはコチラにリンクさせて頂いてもいいですか?
それにしても素晴らしい写真ですね。しっとりした桜に見惚れてしまいました。

投稿: unu | 2005.03.27 13:51

>unuさん
初めまして、コメントありがとうございます~。
ココログはベーシックであっても(笑)
かなりフレキシブルにデザインすることが可能なので
いろいろ試してみると面白いですよねっ。

何か不明な点がありましたら、遠慮なくおっしゃってくださいねっ。
そしてデザインが完成したら、教えてくださいね~。

投稿: しのぶ | 2005.03.27 23:11

はじめまして。
以前、KOROPPYさんのトコロを発見して色々いじっていたんですが、しのぶさんの“背景の食い込み”だけは、手をつけられずにいました。
難しそうだったんで…。
ところが今日、何気に読んでみたらこれまた丁寧なご説明!何とか出来そうだったんで挑戦してみました。
無事成功しました!
ホントにありがとうございます。

古いログに長々と失礼しました。。

投稿: 冬威 | 2005.11.19 03:08

>冬威さん
初めましてっ、コメントどうもありがとうございます~。
お役に立てて本当になによりです!!
ちょっと面倒ではありますが、一度スタイルシートを設定してしまえば
あとは画像を変えるだけでデザイン変更できちゃうんですよね~。

冬威さんのブログを拝見したのですが、バッチリうまくいってますねっ。
これはジョニー・ロットンと
クラッシュの・・・ジョー・ストラマー・・・でしたっけ?
うわ~懐かしいんだけど、けっこう忘れてる自分がショックです~(涙)。
左の人は、・・・ああ、思い出せない~。

すいません(笑)、ちょっと盛り上がっちゃいました(笑)。
私もピストルズとかザ・クラッシュは割と聴いたんですが
ずっとしまいっぱなしになっちゃってます・・・。
久しぶりに押し入れからCD引っ張り出してみようかしら。

投稿: しのぶ | 2005.11.20 00:04

うわっ、レスまで付けていただいて…すんません。

えっと…ちなみに、左から カート・コバーン(ニルバーナ)、シド・ヴィシャス(ピストルズ)、ミック・ジョーンズ(クラッシュ)です(笑)

投稿: 冬威 | 2005.11.20 01:22

>冬威さん
げげげげっ!!!(汗)
うっは~やっちゃいました!
バンド名は合ってたのに、名前がうわーーん!(涙)

本当に一番やっちゃいけないことをやっちゃいましたよ~。
すいません(汗)、次からは冬威さんのブログにもお邪魔しようと思いますので
どうかよろしくお願いします~。
ちなみに、私はブリティッシュ・ロックが好きでした~。
だから、そっち系の話題も書いていただけると嬉しいな~、
なんて言ってみたりして(笑)。

投稿: しのぶ | 2005.11.21 00:07

(笑)
これからもチョコチョコお邪魔させていただきますので夜露死苦お願いしまっす。

投稿: 冬威 | 2005.11.24 14:09

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: カスタマイズ11(背景を食い込ませる1):

» ついに。。。 [キノミキノママ]
ついにしのぶさんが、あの離れ業(笑)を公開してくださいました~ いつも、いいなぁ [続きを読む]

受信: 2004.04.20 21:38

» すごいタイトル背景を発見 [伊豆の登り子]
 この「SHINOblog」というココログ、タイトルの背景が大変凝っています。こ [続きを読む]

受信: 2004.04.22 21:18

» 改装、ほぼ終了・・ [The evening star ]
 あーでもないこーでもない・・としておりました改装ですが、大きくはほぼ終了致しま [続きを読む]

受信: 2004.05.02 07:18

» えーと、 []
ここ2時間ほどの間に訪問してくださった方は。おそらくサイトデザインがヘンになってたりしていたと思いま [続きを読む]

受信: 2004.05.22 00:53

» 遅くなりましたが、お礼 [とりあえず日記]
いまさらですが、ココの背景を変更するにあたり、 参考にさせて頂きました、しのぶさ [続きを読む]

受信: 2004.06.22 08:02

» デザイン変えてみましたっ [るるが株式会社]
いきなり春を感じ、デザインを一気に変えてみましたっ。 どうでしょう?桜づくしでございます。 折り畳み [続きを読む]

受信: 2005.04.07 21:48

» ココログデザイン(背景を食い込ませる改良編) [SHINOblog]
ひさびさにココログのデザインカスタマイズです。 私がいつも使っている、背景画像を記事部分にまで表示さ [続きを読む]

受信: 2006.01.29 18:28

« 茅葺きの家 | トップページ | カスタマイズ11(背景を食い込ませる2) »