ヘッダにはそのブログ（ホームページ）のタイトルやサイトの説明などが書かれています。トップページだけでなく、すべてのページで表示される、いわばホームページの顔です。なので、テンプレートのままよりは、少しでも加工してオリジナリティがあるものにしたいものです。

　ここでは、テンプレート若草で用意されている画像からオリジナルの画像に変更するための設定手順を紹介します。

準備：スタイルシート
　SeeSaaブログの　「マイ・ブログ」タグからサインイン（ログイン）して　→　「デザイン」　→　「スタイルシート」　→　「使用しているテンプレートのタイトル」　でスタイルシートを変更、書き足しができるページを開きます。

下の画像のようなページが表れます。このページでスタイルシートを変更していきます。



準備：画像アップロード
　SeeSaaブログの　「マイ・ブログ」タグからサインイン（ログイン）して　→　「ツール」　→　「ファイルマネージャ」で画像をアップロードするページを開きます。通常は「ツール」タグをクリックするだけで「ファイルマネージャ」のページが開きます。ここから画像をアップロードします。

　アップロードとは、自分のパソコン内にあるデータをインターネット上のサーバにコピーすることです。インターネット上のサーバから自分のパソコンにデータをコピーするダウンロードと逆の作業です。



　画像の拡大、縮小などの編集作業はここではできません。あらかじめフォトレタッチソフトや画像作成ソフトなどで編集しておく必要があります。

1.ヘッダサイズの確認と変更

　テンプレートで用意されている画像（http://blog.seesaa.jp/img/bg/wakaba/header.gif）も上のセレクタで指定しているサイズと同じ　762ｘ251ピクセルに合わせてあります。

　ブログの横幅とヘッダの高さは好きなサイズに変更できます。（「レイアウトのサイズや背景色を変更する」で説明しています）

2.オリジナル画像をヘッダのサイズに合わせる

　このサイトのヘッダのサイズは800ｘ120pxに設定したので（元は『若草』の762ｘ251px）、そのサイズに合わせて画像を作成しました。下に貼り付けたサムネイルが作成したオリジナル画像です。クリックすると別ウィンドウで開きます。



　私の場合、画像の作成にはAdobeのPhtoshopを利用しています。

　デジカメで撮影した画像などを利用する場合も拡大・縮小や使用する部分を切り抜いてヘッダのサイズに合うようにしてください。

　ヘッダのサイズより小さい画像を使用して背景画像をリピートさせない方法もあります。その場合は、スタイルシートで背景カラーの設定も必要です。

3.画像をファイルマネージャからアップロードする

　ヘッダに使用する画像を作成したら、その画像をブログ内のimgeフォルダにアップロードします。

　まず、冒頭の準備：画像アップロードのところで書いたようにファイルマネージャを開きます。

　次に『参照...』と書かれたボタンを押します。別ウィンドウでファイル選択する画面が現れるのでパソコン内に保管してある画像を選択します。



　画像を選択すると下の画像のように『参照...』ボタンの左側の窓にパソコン内の画像のアドレスが表示されます。右側の『追加』ボタンを押すとファイルがアップロードされます。

4.スタイルシートの設定（画像URL、タイトル表記）

　アップロードし終えたら、ヘッダにその背景画像が表示されるようにスタイルシートを設定します。

　準備：画像スタイルシートのところで書いたようにスタイルシートを設定するページでスタイルを変更します。

このページの１.ヘッダサイズの確認と変更でも触れたように、ヘッダ部分を設定するセレクタは『#banner』です。

　背景画像のURL（黄色いラインを引いた部分）を新たにアップロードした画像のURLに変更します。

　画像のURLは、「ツール」→「ファイルマネージャ」でその画像の「タイトル」をクリックし、開いたページの「元ファイル」から確認できます。


ブログタイトルを表示させたくない場合

　このサイトのように画像の中にタイトルロゴを描いた場合はブログタイトルを表示させる必要がなくなります。その場合、タイトルのスタイルを指定するセレクタ『ｈ1』の設定を変更することで表示させないようにします。

変更前

text-indent:-9999px;　　タイトルの表示位置を左に9999pxずらすことでブラウザに写らないようにします。

font-size:1px;　　たとえタイトルが表示されなくても文字サイズを指定しないと＜h1＞があるべき場所に文字サイズ分の余白ができてしまうので、余白を小さくするために小さい文字サイズを指定します。

marginとpaddingとfont-weightは必要ないので消去しました。

ｈ1 a{ } の意味は ＜h1＞がリンクつき（クリックするとサイト移動する）の状態のときのスタイルを指定するという意味です。
タイトル表示をしない場合、この項目は不要なので消去します。

＊この方法の短所はタイトルロゴがリンクボタンになっていないことです。タイトルロゴをリンクボタンにする方法は次項「タイトルロゴを使う」で説明します。

　じつは、ブログタイトルを消すだけならば、「デザイン」→「コンテンツ」で開かれるページから『ブログ名』を削除するだけで消去できます。しかし、そうするとHTMLソースの中に＜ｈ1＞タグがなくなってしまいます。＜ｈ1＞タグはＧｏｏｇｌｅなどの検索エンジンがサイトを読み取る上で重要なタグなので、消さずに【表示させない】方法にしました。



ブログ説明の表示位置をずらす。

　このサイトの場合、ブログタイトルの下に表記される『ブログ説明』を右側に表示させてあります。　ブログ説明を指定するスタイルシートのセレクタは『.description』です。


変更前  

　marginの数値を変更することで文字の表示位置をずらします。ブラウザで確認しながら表示位置を調整してください。

　上の変更後の枠内でmarginを「枠の外側」と書きました。枠など何処にもないんじゃないか?と思われるかもしれませんが、実際には枠（border）は表示されていないだけで文章を囲むようにして存在しています。