ネットビジネス独立宣言

seesaaブログでヘッダー画像を変更する方法を順を追って説明します。

まずはブログに好みのバランスの画像付きのテンプレートを選んで設定しておき、そのテンプレートのCSSの中身からヘッダー画像のサイズを確認しておきましょう。

ブログ管理画面 ＞ デザイン ＞ デザイン設定

へ進むと、設定しているテンプレートのタイトルが並んでいますので、その中の適用されているテンプレートのタイトルをクリックするとCSSの中身が確認できます。

まずは画像の横幅の記述のある箇所です。

テンプレートによって記載されている箇所は異なりますが【#container{】という記述を探すとすぐに見つかります。（だいたい１０行目～２０行目の間くらいにあることがほとんどです。）

次に画像の縦幅の記述のある箇所です。

こちらもテンプレートによって記載されている箇所は異なりますが【#banner{】という記述を探すとすぐに見つかります。（だいたい６０行目～７０行目の間くらいにあることがほとんどです。）

調べた横幅と縦幅に合わせて作成したオリジナルのヘッダー画像を用意しましょう。

決してネットから無断で拾ってきたりせずに、ご自身の写真や著作権フリーのものや、あるいは私も活用しておりますヘッダーバナーを提供してくれるサービスの画像を活用するようにしましょう。>>みためデザイン

そしてseesaaブログへ用意した画像をアップロードします。

ブログ管理画面 ＞ ファイルのアップロード

こちらへ進むと画像ファイルをアップロードすることができます。

今ではアップロードは画像のドラック＆ドロップで実行できるので楽です。

アップロードし終わると下のほうにアップロードした画像の一覧が出てきますので、ヘッダー画像とする画像のHTMLボタンのところをマウスオーバーしてください。

すると、HTMLの記述が出てきますのでこれをコピーします。画像のようにHTMLが出てきている時に ctrl + C でコピーしましょう。

コピーしたコードの最初のほうにあるコードがアップロードした画像を示すURLになります。（後半のほうの記述はサムネイルという小さな画像のURLになります。）

さて、最初に画像のサイズを調べるために開いたCSSに戻ります。

【background-image:url】という記述から始まる一文の中に画像URLの記述が記載されています。

この記述の中の（）で挟まれているコードが画像URLなのですが、この部分を先ほどアップロードした画像のURLで書き換えてしっかり保存しましょう。

保存ボタンが下のほうにあるので、編集するだけ行ってついうっかり保存ボタンをクリックして保存することを忘れてしまい、画像が反映されないと悩むかたが結構いらっしゃいますので、保存は大切です。

これでseesaaブログのヘッダー画像を自分の好みの画像へ入れ替える作業が完了です。

ブログを実際に見て確認してみてください。