ブログをとことん調べます。:ヘッダー部分の絵を変えてみたい

TOP＞＞ブログカスタマイズ＞＞ヘッダー部分の絵を変えてみたい

2005年07月06日

ヘッダー部分の絵を変えてみたい

先日ご質問をいただきました。

「タイトルのバックに画像をはめ込みたいのですが。」

おそらくヘッダー部分のタイトルスペースのバックに、画像をはめ込みたいのでしょうね。私のブログで言うと、頭を抱えたサラリーマンの画像の事でしょう。実は私も以前からここの画像を変えたいと思っていたので、一応調べておきました。

このブログの例の画像はライブドアブログの初期テンプレートの画像そのものです。初期テンプレートをいろいろとカスタマイズして今日に至るのですが、ヘッダーの画像だけは少し愛着もありまして、最初のまま残しています。

ですから私の場合は、新たに背景に画像をはめ込むというより、画像を変更するという作業で済みますから少し楽なわけですね。

本題ですが、ヘッダー部分の画像の設定はCSSで行うのがスマートなようです。なぜかというと、私が使っているテンプレートがその方法でやっているから＾＾；HTMLでもできるのでしょうけど、今回はCSSでの設定のやり方をまとめておきます。

CSSを眺めてみると、

#banner,#subbanner{
・・・・・・・・・・・・・・
}

というセクションが見つかると思います。ここがヘッダー部分のスタイル定義です。その中に、

background:url('http://image.blog.livedoor.com/img/usr/20040831/main_image.gif') no-repeat 0 0;

という行が見つかります。他のテンプレートを確認したわけではないですが、私の選択したテンプレートのように、最初から画像が設定されているテンプレートの場合にはこの行があると思います。その場合はここの画像のURLを差し替えたい新しい画像のURLに変更すればいいのです。

画像が設定されていないテンプレートの場合はこの行が無いかもしれません。その場合はこの行をそのものを追加すれば良いでしょう。ただ、このまま貼り付けるとライブドアブログのテンプレートの画像を勝手に使う事になるので問題になるでしょうね。ちゃんと自分で用意した画像のURLにしましょう。

さて、自分で用意した画像のURLをどのようにして取得するのかについてですが、まずその前に、画像をサーバーにアップしなければなりません。その方法については以前記事にしましたので、そちらが参考になるかと思います。

参考記事：画像リンクを作るには

人気ブログランキング。目指せトップ１０入り！

Posted by hammer77 at 22:31 │Comments(10) │TrackBack(0) │Edit

この記事へのトラックバックURL

トラックバックありがとうございます。トラックバックスパム対策の為、このブログへのトラックバックは一時的に保留されます。出来だけ速やかに公開しますのでどうぞよろしくお願いします。

http://app.blog.livedoor.jp/hammer77/tb.cgi/27340383

この記事へのコメント

私はブログ初心者でいつもこっそり参考にさせていただいています。
初心者的質問で申し訳ないのですが、トラックバックについて。
貴サイトのおかげで意味はある程度わかったと思うのですが、トラックバックってどうすればいいのですか？やり方がイマイチわかりません・・・

Posted by 空 at 2005年07月07日 15:50

説明していただきありがとうございます。
まさかこんなに早く書いてくれるとは思いませんでした。
感謝の気持ちでいっぱいです。さっそく試して見たいと思います。
またお世話になると思いますが、よろしくお願いします。

Posted by モリ at 2005年07月07日 17:46

タイトル画像変えるんですか？
この画像こそ「ブログをとことん調べます。」の顔だと思っていたのですが。
とはいうものの、テンプレートの画像ですから、たまに同じテンプレートを使っているブログを見ると「あれ、ブログをとことん調べます。？」と思ってしまうのも事実。

とここまで書いてよく記事を見直したら、このブログのタイトル画像を変えるって話じゃないのですね。
うっかり(^^ゞ

Posted by hirohiro_6 at 2005年07月07日 20:20

空さん、はじめまして。

トラックバックのやり方ですか。簡単に説明すると、記事の下のほうにあるトラックバックURLをコピーして、自分の記事投稿画面のトラックバックURLに貼り付けるだけです。

といってもこれだけの説明じゃ分からないですね。また記事にするかもしれません＾＾；

Posted by hammer at 2005年07月08日 01:05

モリさん、こんばんわ。
モリさんのような質問をネタにして成り立っていますので＾＾；
今度試してみてください。

Posted by hammer at 2005年07月08日 01:06

hirohiro_6さん、こんばんわ。

そうなんです。イメチェンしたいとは常々思いながら、なかなかそれができないんです。ブログを立ち上げてからずっとこのデザインですから、やっぱり愛着があります。

もうしばらくこのまま行こうと思っています＾＾

Posted by hammer at 2005年07月08日 01:08

hammerさん！！
大成功です！！今はとても自分でも気に入っています。
ホントにありがとうございます！！
ついでにＢｌｏｇのバックも変えてみました。
やはりＣＳＳのほうがやりやすいですね。
今後もぜひともよろしくお願いします＾＾

Posted by モリ at 2005年07月08日 23:27

よかったです＾＾
私もこの機会に自分のブログのリニューアルでもやってみようかと思っています＾＾

Posted by hammer at 2005年07月09日 13:34

はじめまして。

CSS＆HTMLはだいたいは分かるのですが、ブログは超初心者（プラグインを知りませんでした・・・）なので、ここの記事には大変助けられています。

これからもチョコチョコお邪魔しますので、よろしくお願いします。