天使のたまご

アクセスカウンタ

zoom RSS Photoshop Elements でHP用画像を作ろう♪〜ヘッダーの画像をHPに載せる

<<   作成日時 : 2008/05/20 16:20   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

うーん、前回の記事から二ヶ月半以上経ってしまった・・・。(^^ゞ
ま、やらないよりはいっかぁ!
てなわけでさっそく、「Photoshop Elements でHP用画像を作ろう♪〜ヘッダーの画像を合成する(2)」で作った画像を、スタイルシートを使ってHPに載せる方法の一例をご紹介します。

*スタイルシートはHTMLソースを記述するページのheadタグで囲まれた部分に記述することもできますが、独立したcssファイルから参照する方法がCEO対策などの観点からよりよいとされています。
後日「HTMLメーカー」によるcssファイルの作成方法、及びその参照の仕方について記事にする予定なので、よければそちらもご覧下さい。

さて今回、題材にするヘッダ用画像はこちら。↓

画像

サイズは700×250ピクセルです。
これをスタイルシートでHPに載せるとこんな感じに。↓

画像

(ウィンドウの上部が赤いのはセサミストリートのテーマを使用しているから、故障ではありません)うーん、クリックで拡大しても、画像が粗くてわかりにくいなぁ。ごめんね、まだソフトの扱いに慣れてないもので。(^^ゞ
てなわけで、どんな感じか実際にHPを見たい場合は→「潮まかせ航海日誌」

ヘッダ用の画像は、「h1要素」の背景としてスタイルシートに記述します。「h1」はもっとも重要な見出しを指定するタグで、文字の大きさは使用するHTMLエディタや見るブラウザによって異なりますが、統一したい場合は絶対的サイズ(ピクセルやポイントなど)をスタイルシートで指定しましょう。
題材の画像を「h1要素」で記述すると以下のようになります。

h1 {
height: 110px; 標準モードによる画像の高さ@(A−C)
_height: 250px; 互換モードによる画像の高さA
color: #336699; 文字の色
margin: 0px; B
padding-top: 140px; 見出し文字の位置、上余白C
padding-left: 90px;  見出し文字の位置、左余白
background-image: url("背景画像のパス"); ヘッダ用画像のアドレスD
background-repeat: no-repeat; 画像の繰り返しなしE
letter-spacing: 7px; 文字間の余白
}

@、A及びCについては、
「標準モードと互換モードの違い(1)・width プロパティ 」のheightプロパティに関する部分をご参照下さい。

Bのmarginをわざわざ0pxに指定するのは、ユーザーの使うブラウザによって、「h1要素」と次の要素の間に、自動的に余白が入ってしまうのを防ぐためです。それほどレイアウトにこだわらないのであれば、記述する必要はありません。

Dはフォトショで合成し、アップロードした画像ファイルが置いてある場所ですね。これには「絶対的パス」と「相対的パス」があって、同じディレクトリにアップロードしてある場合は、ファイル名を記述するだけでページの所定の箇所に表示できます。これが「相対的パス」で、一方「絶対的パス」とは、いわゆる「http:/」から始まるアドレスのことを指します。

E背景画像は基本的に、タイル状に繰り返して表示されます。なので繰り返したくない場合は、必ずこの記述を入れなくてはいけません。

これで「h1要素」のスタイル指定ができました。
ただしこのヘッダ画像を、ブラウザの画面との間に余白なしでピッタリくっつけたいときは、もう一工夫必要になります。
スタイルシートの「body要素」の部分に、以下の記述を付け加えて下さい。

body {
margin: 0px;
padding: 0px;
}

これは使うブラウザによって、スタイルシートに指定しなくても、要素と要素の間に自動的に余白を設ける仕様になっているからです。マージンとパディングの両方を記述するのは、標準モードと互換モードによる解釈の違いに対処し、どちらのブラウザで見ても同じように表示させるため。
ややこしいちゅうか、いちいち面倒ですね。(^^ゞ

ここまでスタイルシートに記述したら、後はHTMLソースの所定の位置にタグを記述してスタイルを適用するだけです。
たとえば題材の画像だと・・・

<h1>潮まかせ航海日誌</h1> となります。

これでちゃんと、望みとおりのレイアウトに表示されるハズ。
なおスタイルシートの記述は、セミコロンをコロンと間違えて入力しただけでも適用されないので、ちゃんと表示されない場合は、まず記述ミスをチェックするようにして下さい。{}の閉じ忘れも、標準モードではワケわからん表示になってしまうので(笑)、ご注意下さいね。(^_^)v

関連記事
「Photoshop Elements でHP用画像を作ろう♪〜ヘッダーの画像を合成する(1)」

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
Photoshop Elements でHP用画像を作ろう♪〜ヘッダーの画像をHPに載せる 天使のたまご/BIGLOBEウェブリブログ
文字サイズ:       閉じる