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

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

2016/09/12内部対策[最終更新日]:2017/02/21
このエントリーをはてなブックマークに追加

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

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

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

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

PR

目次

ヘッダー(header)とは
フッター(footer)とは
ヘッダー・フッターのHTML(HTML5)固定方法
ヘッダー・フッターのデザイン
ヘッダー・フッターとSEOについて
ヘッダー・フッターの共通化
まとめ

ヘッダー(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対策でサイトパフォーマンスを向上させ、サイト評価を高めながら、順位上昇を目指すことが重要です。

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

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

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

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。