FC2ブログ

ヘッダー部分(トップ部分)の背景を変える方法 Templ8@FC2blog

FC2ブログテンプレートの無料配布とカスタマイズでSEO対策(検索エンジン最適化)

ホーム > スポンサー広告 >ヘッダー部分(トップ部分)の背景を変える方法ホーム > templ8カスタマイズ >ヘッダー部分(トップ部分)の背景を変える方法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


--/--/-- --:-- スポンサー広告

ヘッダー部分(トップ部分)の背景を変える方法

ヘッダー部分(ブログタイトルとブログ説明文のある部分)の背景を変えたいという方が多くいらっしゃったので説明します。

だらだらと説明するだけじゃわからないかもしれないのであるブログを使って説明します。実験台に選ばれたのはこのブログです。
市松模様のアイテム勢ぞろい!【市松屋】
このブログは僕のカスタマイズした「templ8_3kuro」が使われています。初期はこんな感じでした→画像①。今ではこんな感じです→画像⑤。ヘッダー部分はブログタイトル通り市松模様の背景になっていますよね。背景に表示したい画像を用意してスタイルシートを少し変えるだけで、市松模様のアイテム勢ぞろい!【市松屋】のようにかっこよく?ヘッダーの背景を変えることができます。

どのように背景を変更したか順を追って説明します。

1. 背景になる画像を用意します。
画像は自分で撮った写真でもいいですし、ペイントなどで自分でデザインしてもよいですし、無料素材集にあるものでもよいです。ご自身の好きなもの、ブログにあったものを選びましょう。この市松模様は自作です。

2. アップロードします。
画像が用意できたらその素材をアップロードします。アップロードのやり方は、ブログの管理ページ(記事を書いたりテンプレをいじったりするページ)の左カラムにあるファイルアップロードをクリックし、アップロードで参照ボタンをクリックして背景にしたい素材を選択し、タイトルを記入してアップロードボタンを押します。そうすると下のファイル一覧に画像が現れるので、画像をクリックすると新しいページに画像が表示されるので、そのURLが画像のURLになります。これはあとで使います。

アップロードする際は拡張子(jpg、gif、pngなど)、サイズ(500KBまで)に注意してください。

ちなみに今回使った素材はこれ→素材1です。ちなみに拡張子はGIF、大きさは320x100です。

3. デザイン面を考えてヘッダーメニューとヘッダー広告を削除しました。
テンプレートの設定でHTML編集でヘッダーメニューとヘッダー広告の部分をそのまま削除しただけです。

4. 背景に先ほどの画像を入れる。
ヘッダー部分のスタイルシートを見ると初期設定では以下のようになっています。

/**************************************** ▼ ヘッダー ▼ */
#header_outline {
border:1px solid #000000;
margin:10px 0px 0px;}
#header_body {
background-color:#000000;
border:1px solid #000000;}
/**************************************** ▲ ヘッダー ▲ */

上記の赤字の部分を以下のように変更します。
background:#000000 url(http://blog-imgs-27.fc2.com/i/c/h/ichimatsu8/ichimatsu320x100.gif) no-repeat left top;
これは背景を色、画像、並び方、スクロール、位置の順に半角スペースで区切って指定していったものです。通常このように背景を設定します。まず色を設定します。そして画像はurl(画像のURL)で設定します。次に並び方ですが僕は繰り返す必要のない素材ですのでノーリピート(no-repeat)を指定しています。そして次に位置です。僕は左側に素材を表示させるつもりなのでleft topです。

/**************************************** ▼ ヘッダー ▼ */
#header_outline {
border:1px solid #000000;
margin:10px 0px 0px;}
#header_body {
background:#000000 url(http://blog-imgs-27.fc2.com/i/c/h/ichimatsu8/ichimatsu320x100.gif) no-repeat left top;
border:1px solid #000000;}
/**************************************** ▲ ヘッダー ▲ */

ヘッダーのスタイルシートは上記のように変わりました。この状態でブログを見た場合こんな感じになります→画像②

4. 高さを調節します。
画像②を見た感じヘッダーにもうちょっとボリュームがほしいと思い、自作した画像の高さは100pxなので高さを100pxに設定しました。

/**************************************** ▼ ヘッダー ▼ */
#header_outline {
border:1px solid #000000;
margin:10px 0px 0px;}
#header_body {
background:#000000 url(http://blog-imgs-27.fc2.com/i/c/h/ichimatsu8/ichimatsu320x100.gif) no-repeat left top;
height:100px;
border:1px solid #000000;}
/**************************************** ▲ ヘッダー ▲ */

この状態でブログを見るとこのようになりました→画像③

5. ヘッダーの枠を削除します。
画像③を見てヘッダーの枠が邪魔だと思い、ヘッダーの枠を削除しました。

/**************************************** ▼ ヘッダー ▼ */
#header_outline {
margin:10px 0px 0px;}
#header_body {
background:#000000 url(http://blog-imgs-27.fc2.com/i/c/h/ichimatsu8/ichimatsu320x100.gif) no-repeat left top;
height:100px;}
/**************************************** ▲ ヘッダー ▲ */

この状態でブログを見てみるとこのようになりました→画像④

6. ブログタイトル、サイト紹介文の位置を変えます。
画像④を見てわかるのですが、背景が白で文字が白だと読めませんですので、文字の位置を右側にずらしました。文字の位置を変えるにはブログタイトルとサイト紹介文のスタイルシートをいじらないといけません。

ブログタイトルのスタイルシートを見ると以下のようなところがあります。
h1 {
font-size:14pt;
text-align:left;
margin:10px 10px 5px; }

これを下記のように変更しました。
h1 {
font-size:14pt;
text-align:right;
margin:20px 80px 5px 10px; }
※マージンのいじり方はこちらを参照してください→マージンとパディング

サイト紹介文のスタイルシートは以下のようになっています。
.intro {
font-size:10pt;
color:#FFFFFF;
text-align:left;
margin:0px 10px 10px;
font-weight:normal;}

これを以下のように変更しました。
.intro {
font-size:10pt;
color:#FFF;
text-align:right;
margin:0px 10px 10px;
font-weight:normal;}

ここまで来てやっと納得のいく状態になりました→画像⑤。これでいちおう完成です。

どうだったでしょうか?むずかしく感じたでしょうか?画像を背景に設定してしまえば、あとはマージンやら文字の位置やらヘッダーの大きさやらの微調整ですから、自分の好きなようにやればもうそれで完成です。ですのでオリジナルのヘッダーを作ってみてください。ヘッダー以外でもブログ全体の背景でも記事の背景でもこれと同じようにやればできちゃいます。ぜひ試してみてください。

説明が雑でわからない方は気軽にご連絡ください。

2009/01/17 22:44 templ8カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。

名前:

メール:

件名:

本文:



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。