ヘッダにオリジナル画像を使う

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

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

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

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

CSSnyuuryoku.gif

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

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

fileupload.gif

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

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

 ヘッダのサイズはスタイルシートのセレクタ『#container』に(ブログ全体の)横幅が、セレクタ『#banner』に高さ(縦幅)が設定されています。下に書かれているのはテンプレート若草の『#container』と『#banner』のスタイルです。
#container{  ←ブログ部分全体のスタイルを指定するセレクタ
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/bg.gif);  ←背景画像URL
background-repeat:repeat-y;  ←背景画像をY軸(縦方向)に繰り返す
background-position : top center ;
width:762px;  ←ブログ部分全体の横幅762px
color:#8B8B8B;
}


#banner{  ←ヘッダのスタイルを指定するセレクタ
font-family:arial, Helvetica;
height:251px;  ←ヘッダ部分の高さ251px
margin:0px;
padding:0px 0px 0px 20px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/header.gif);  ←背景画像URL
background-repeat:no-repeat;  ←背景画像は繰り返さない
}

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

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

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

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

header-banner02.jpg

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

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

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

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

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

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

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

fileupload02.gif

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

fileupload03.gif

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

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

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

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

#banner{  ←ヘッダのスタイルを指定するセレクタ
font-family:arial, Helvetica;
height:251px;
margin:0px;
padding:0px 0px 0px 20px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/header.gif);  ←背景画像URL
background-repeat:no-repeat;  ←背景画像は繰り返さない
}

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

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


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

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

変更前

h1 {  ←見出し1 (タイトル文字のスタイルを指定)
margin:0px;
padding: 30px 10px 10px 0px;
font-size:18px;
font-weight:bolder;
}

h1 a{
color:#597903;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
変更後
h1 {
text-indent:-9999px;  ←テキスト(文字)を左側に9999ピクセル移動する
font-size:1px;  ←文字サイズを1pxにする
}

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

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

marginpaddingfont-weightは必要ないので消去しました。

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

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

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



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

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


変更前  

.description {  ←「ブログ説明」のスタイルを指定するセレクタ
color:#597903;
margin:0px 10px 10px 0px;  ←余白(枠の外側):上0px 右10px 下10px 左0px
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
変更後
.description {
display:block;  ←表示形式:ブロックレベル要素として表示する
color:#ff9900;
margin:20px 60px 10px 350px;  ←余白(枠の外側):上20px 右60px 下10px 左350px
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}

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

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

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。