Jimdoヘッダーカスタム

ヘッダー関連のカスタマイズについて解説していきます。

ヘッダーのカスタマイズは無限です。HTMLとCSSの組み合わせで無限通りのヘッダーを作ることができます。ココではよくある作り方の基本を解説していきます。

ヘッダーに画像をつける

まずはHTMLの編集のみでヘッダーを付けてみます。

下記のHTMLを探してください。赤文字の箇所をあなたの画象に変更します。

画象はファイルからアップロードします。

 

<div id="container">

<div id="header">

<h1>Headline</h1>

<img src="header.jpg" alt="" />

</div>

 

HTMLの書き換えのみでヘッダー画象を変更することができます。

ココで気を付けたいのがヘッダーの画象の大きさはコンテンツ全体の幅に合わせて、

ヘッダー画像を作成することで綺麗にヘッダー画像が設定できます。

 

ロゴを配置してH1タグに設定する

H1タグにロゴ画像を設定して、ロゴをクリックしたらトップページに戻る。

こんなカスタムをしてみたいと思います。

まずはHTMLを変更します。下記のように変更してみてください。

さらにCSSも変更しましょう。

CSSの変更するCSS、ID名は#header h1 aです。

 

HTML

 

<div id="container">

<div id="header">

<h1><a href="http://templatecustom.jimdo.com/">Headline</a></h1>

<img src="header.jpg" alt="" />

</div>

 

CSS

 

#header h1 a
{
width:252px;//ロゴ画象の横幅
height:173px;//ロゴ画象の縦幅
padding:0px;//余白
margin:0px;//マージン
background:url(http://画象URL)no-repeat;
text-indent:-9999px;//リンクテキストを排除
}

 

CSSはあなたのサイトにあわせて配置などの値を変えてください。

画象の横縦幅や画象URLをあなたのロゴの情報に変えることで

あなた独自のロゴを配置することができます。

 

 

ヘッダーにオリジナルメニューをつける

現在執筆チュ

ヘッダーの幅を100%にする

ヘッダーの幅を100%にするカスタマイズです。

元々のHTMLはヘッダー部分がコンテンツ(id="container")の中に入ってしまっています。

まずは、ヘッダー要素をコンテンツの外に出しましょう。

 

HTMLカスタム前

 

<div id="container">

<div id="header">

<h1>Headline</h1>

<img src="header.jpg" alt="" />

</div>

.....

 

HTMLカスタム後

 

<div id="header">

<h1>Headline</h1>

</div>

 

<div id="container">

<img src="header.jpg" alt="" />

.....

 

CSS

 

#header{  width:100%;}

 

CSSは上記に変更します。

これにてヘッダー部分の横幅が100%になりました。