2005年12月18日
ブログのタイトル画像を変えたい
このblogの今のデザインとっても気に入ってるんですが、自分でもどうやってしかた忘れないように、今のうちにメモをしておこうと思います。デザインを変えて一番インパクトがあるのはトップの写真なので、ここの変え方を。
まず基本になるblogデザインは、画面の上に絵や写真が入っているものを選ぶほうが簡単です。えっと、説明用のサンプルとして「シンプル」の中の「Drop of Water」を使ってみます。
1.blog管理画面のデザインの設定を開きます。
2.そこの一番下の「カスタマイズ」を開きます。
3.意味の分からないようなコードが表示されます。
4.47行目にある「#banner」というのを見つけてください。(注:デザインによって行数が違います!)
この#bannerのグループに含まれる「background」というところを変更します。
(元のコード)
(変更後のコード)
5.元のコードを変更後のコード(赤字の部分)に置き換えてください。コピーペーストすると簡単です。
6.画面下の「この内容で保存する」をクリックして保存します。
7.最後に再構築(cssのみでOK!)すれば完了です。
blogのトップ画像がヒヨコになったら成功です。画像が大きいせいか、ちょっとはみ出してます。このあたりは今の大きさにあう写真を使うか、表示枠を広げてやるかしないとだめですね。ここからは細かい調整になるので、とりあえず変更の仕方はこんな感じです。また、デザインによっては、もともと画像を使っていないものがあります。こういうのは画像を新しく組み込まないといけないので・・・ちょっと難しいです。簡単なデザインを使うのがおススメです。もし失敗しても、デザインを適用し直したら元にもどるので、気楽にチャレンジできるのがうれしいです。
オリジナル画像を使う時は自分でファイルのアップロードをしてから設定します。デザインかえるとブログのイメージががらっと変わって楽しいです。
まず基本になるblogデザインは、画面の上に絵や写真が入っているものを選ぶほうが簡単です。えっと、説明用のサンプルとして「シンプル」の中の「Drop of Water」を使ってみます。
1.blog管理画面のデザインの設定を開きます。
2.そこの一番下の「カスタマイズ」を開きます。
3.意味の分からないようなコードが表示されます。
4.47行目にある「#banner」というのを見つけてください。(注:デザインによって行数が違います!)
この#bannerのグループに含まれる「background」というところを変更します。
(元のコード)
#banner,#subbanner{
width:740px;
height:163px;
background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/simple02_1/header.jpg') no-repeat 50% 0;
text-align:left;
}
(変更後のコード)
#banner,#subbanner{
width:740px;
height:163px;
background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/newyearbird04/header.gif') no-repeat 50% 0;
text-align:left;
}
5.元のコードを変更後のコード(赤字の部分)に置き換えてください。コピーペーストすると簡単です。
6.画面下の「この内容で保存する」をクリックして保存します。
7.最後に再構築(cssのみでOK!)すれば完了です。
blogのトップ画像がヒヨコになったら成功です。画像が大きいせいか、ちょっとはみ出してます。このあたりは今の大きさにあう写真を使うか、表示枠を広げてやるかしないとだめですね。ここからは細かい調整になるので、とりあえず変更の仕方はこんな感じです。また、デザインによっては、もともと画像を使っていないものがあります。こういうのは画像を新しく組み込まないといけないので・・・ちょっと難しいです。簡単なデザインを使うのがおススメです。もし失敗しても、デザインを適用し直したら元にもどるので、気楽にチャレンジできるのがうれしいです。
オリジナル画像を使う時は自分でファイルのアップロードをしてから設定します。デザインかえるとブログのイメージががらっと変わって楽しいです。