HOME内部対策 > ヘッダーとフッターのHTML固定方法とデザインまとめ

ヘッダーとフッターのHTML固定方法とデザインまとめ

2016/09/12[最終更新日]:2017/03/06
このエントリーをはてなブックマークに追加

ヘッダーやフッターを固定し、ユーザービリティを高めながら、サイト構築する方法があります。

今回は、ヘッダー・フッターのHTML(HTML5)固定方法、ヘッダー・フッターのデザイン、ヘッダー・フッターとSEOについて中心に解説したいと思います。

ヘッダーとフッターのHTML固定方法とデザインまとめ

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR

ヘッダー(header)とは

ヘッダー(<header>)とは、HTMLファイルのbody内に記述するタグの一つで、webページ上部のコンテンツを表示するために指定するタグ要素です。
ヘッダー(<header>)は、HTML5から追加されたタグ要素です。

ヘッダーの記述例
<body>
<header>
<h1>サンプルサイト</h1>
<nav>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”menu01.html”>メニュー1</a></li>
<li><a href=”menu02.html”>メニュー2</a></li>
</ul>
</nav>
</header>
</body>

ヘッダー(<header>)は、HTMLファイルのbody外の<head>タグとは異なります。

フッター(footer)とは

フッター(<footer>)とは、HTMLファイルのbody内に記述するタグの一つで、webページの下部コンテンツを表示するために指定するタグ要素です。
フッター(<footer>)は、HTML5から追加されたタグ要素です。

フッターの記述例
<body>
<footer>
<nav>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”menu01.html”>メニュー1</a></li>
<li><a href=”menu02.html”>メニュー2</a></li>
</ul>
</nav>
</footer>
</body>

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

ヘッダー・フッターのHTML(HTML5)固定方法

ヘッダーとフッターの位置をHTML(HTML5)で固定するには、「css(スタイルシート)ファイルで、position:fixed;を指定する」方法があります。

HTMLファイルのタグ要素や指定したidやclass属性に対し、以下のよう、cssでposition:fixed;を指定する

HTMLファイルの記述例
<header id=”sample”>
<h1>サンプルサイト</h1>
<nav>
<ul>
<li><a href=”index.html”>ホーム</a></li>
<li><a href=”menu01.html”>メニュー1</a></li>
<li><a href=”menu02.html”>メニュー2</a></li>
</ul>
</nav>
</header>
css(スタイルシート)の記述例
header#sample {
 position:fixed;
}

上記方法を活用し、スクロールしてもヘッダーが固定されてるサイト(itomakihitode.jp)実例が以下になります。

ヘッダー・フッターのHTML(HTML5)固定方法 イメージ

ヘッダー固定の際に、実際のHTMLファイルへの記述は以下になります。

<div id=”header02″>
<div id=”devo-menu”>
<script type=”text/javascript” src=”http://devo.jp/crosstab_service/crosstab_service_new.js”></script>
</div>
<div id=”header-inner”>
<div class=”fl-l”>
<a href=”/”><img src=”/images/common/header_logo.jpg” /></a>
</div>
<div class=”fl-r login-style”>
<a href=”http://itomakihitode.jp/login.php” id=”login_btn”><img src=”/images/common/header_login.jpg” /></a>
</div>
</div>
</div>

ヘッダー固定の際に、実際のCSS(スタイルシート)ファイルへの記述は以下になります。

#header02 {
background-image: url(../images/common/header_bg.jpg);
background-repeat: repeat-x;
background-position: 0px 50px;
width: 100%;
height: 112px;
clear: both;
position: fixed;
margin-top: 0;
z-index: 1;
}

上記方法は、ヘッダーのみならずフッターやその他、固定したい箇所に応用できます。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

ヘッダー・フッターのデザイン

ヘッダーとフッターのデザインは、以下のようなサイトが参考になりそうです。

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-
主に日本国内中心に、いろんなWEBサイトのフッター部分(ページ下部も含んでいます)を集めたデザインまとめサイトです。

参考にしたい ヘッダーデザインのまとめ | | モノづくりブログ – 株式会社8bit
参考にしたいヘッダーデザインを厳選し、まとめたサイトです。

フッターデザインが素晴らしい国内のwebデザインのまとめ20 | ポケットラボ
国内のwebサイトに限定し、素敵なフッターを20個厳選したフッターデザインまとめサイトです。

Header Love – Website Header Inspiration
約300個のヘッダーデザインを閲覧できる海外のギャラリーサイトです。

ヘッダー・フッターとSEOについて

ヘッダーとフッターを最適化することで、以下のようなSEO効果が考えられます。

・ヘッダーとフッターのリンクをテキストにし、SEO効果を高める
ヘッダーとフッターメニューをアンカーテキストにし、リンク効果を高めながら、サイト評価されやすくする。
また、ヘッダーとフッターにあるリンクが画像の場合、画像にalt属性を記述し、リンク効果を高め、サイト評価されやすくする。

・ヘッダーとフッターのデザインを見やすくし、SEO効果を高める
文字の大きさや色、位置などデザイン調整し、ヘッダー・フッターメニューのクリック率を高めながら、ページセッション、直帰率平均セッション時間などを改善する。

ページセッション、直帰率、平均セッション時間などを改善し、サイトパフォーマンスを向上させ、サイト評価されやすくする。
※ページセッションは、ユーザーがサイト訪問した際に閲覧するページ数のこと。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

ヘッダー・フッターの共通化

ヘッダーとフッターを共通化し、サイト編集を効率化するには以下のような方法があります。

・phpインクルードを活用する
ヘッダーとフッターの表示コードが書かれたphpファイルをそれぞれ個別に作っておき、それらを表示させたい箇所にphpインクルードで読み込ませ、共通化する方法。

・専用ソフトのテンプレートやライブラリー機能を活用する
HTML編集ソフト「Dreamweaver」のテンプレートやライブラリー機能を活用し、ヘッダーとフッターを共通化する方法

まとめ

ヘッダーとフッターを最適化し、ユーザービリティを高めましょう。

良質なコンテンツ(ユーザーが求めるコンテンツ)に誘導し、サイト回遊させることが大切です。
そのためには、良質なコンテンツへ向けたリンクを適切に増やしましょう。

SEO対策でサイトパフォーマンスを向上させ、サイト評価を高めながら、順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
カテゴリ:内部対策
B!

最新記事
SEOラボをSNSで応援する
無料SEOツール
話題の記事
2017年7月 効果があったSEO対策は、被リンク【まとめ】
アメブロで上位表示できますか?【今月(2017年8月)の問合せ】
サイトの使いやすさ(UX=ユーザーエクスペリエンス)が重要なSEO要因になってきている
「検索エンジン最適化スターターガイド」は最も効率のよいSEO技法である
ブログを2つ運営しています。同じ内容を投稿していいの?という問い合わせ
最近6位に上昇したページの対策教えます
他社のSEO商品を比較
最近、順位が落ちてきたというお問合せ
最近のSEO対策と順位決定の仕組み
検索ユーザーが求めるコンテンツの考え方
人気記事BEST10
follow us in feedly