『ブログのヘッダー画像』を差し替えた

【カテゴリ：パソコン　ブログカスタマイズの記録】

今週『Seesaaブログ』がリニューアルしたこともあって、このブログも少しイメージチェンジしてみようかと思いました。

そこで、ヘッダーの画像を差し替えてみました。

下の画像は、今まで一年以上このブログのヘッダーに使用していた画像です。



下の画像が今回の差し替え後に使用している画像です。



．．．

『Seesaaブログ』標準のデザインを使用している人で、オリジナリティを出したいと思っている人は、ヘッダー画像を差し替えてみてはいかがでしょうか？

ヘッダー画像を変えるだけでイメージが大きく変わるかもしれません。

好みの新しい画像さえ用意できれば、差し替え作業自体は簡単にできます。

というわけで、画像の差し替え方法について手順を書くことにしました。

尚、今回具体的な例で解説するため、新しくブログを追加しました。

下は、新しく追加したブログです。

気分爽快！！PCニュース:
http://kingpcinfo.seesaa.net/



．．．

スポンサーリンク

まず、現在のデザインで使用しているヘッダーの画像サイズを調べます。

調べ方の例ですが、ブラウザが『Firefox』の場合、画像部分を右クリックして表示されるコンテキストメニューから『背景画像だけを表示』をクリックします。



すると以下のように表示されます。



ブラウザのタブの部分に『header.jpg（JPEG 画像, 778x246 px）』と表示されているので、これでサイズが分かります。



もしくは、画像をいったんファイルに保存して、ファイルのプロパティの『詳細』タブを表示すれば、ここでもサイズが分かります。



今回の画像の例では『778 x 246』ピクセルでした。

．．．

次に、差し替えるための新しい画像（サイズ＝『778 x 246』ピクセル）を用意します。

自分の場合は、デジカメで撮った画像を横幅が合うように縮小し、トリミングで高さを246ピクセルとなるようにカットしました。

以下が、差し替え用に用意したサンプル画像です。



このファイルをファイルマネージャを使用してアップロードしておきます。



例として、ファイル名は『header_02.jpg』でアップロードしました。

↓アップロード完了後の状態



．．．

ここからは、デザインの設定を変更する作業です。

管理画面の『デザイン』を選択して表示される『デザイン一覧』画面で、『デザイン設定』をクリックします。



以下のような画面が表示されるので、タイトル名が表示されている箇所をクリックします。

（この例では、『light pole(右サイドバー)』です。）



すると、下のようなテキストの編集画面が表示されます。



『#banner{』となっている箇所を探します。



以下が、現在のヘッダーに表示している画像ファイルの箇所です。

background-image:url(https://blog.seesaa.jp/img/bg/light_pole/header.jpg );

この部分を以下の例のように、アップロードしたファイルに変更します。

background-image:url(https://kingpcinfo.up.seesaa.net/image/header_02.jpg );



通常、アップロードしたファイルは以下のような URL になっていると思います。

https://○○○○.up.seesaa.net/image/××××

○○○○：ホスト名
××××：アップロードしたファイル名

変更したら、『保存』ボタンをクリックします。



クリック後、以下のように表示されます。

『設定を変更し、ＣＳＳをビルドしました。』



この後ブログを表示すれば、ヘッダーが新しい画像に差し代わっている事と思います。



おわり。

スポンサーリンク