サイトヘッダーとフッターをデザインしよう！【WordPress】【Cocoon】

Webサイトの目次ともいえる「ヘッダー」と「フッター」

名前の通りサイトの一番上と下に配置するメニューのことですが、イマイチどんな感じで設定すれば良いのかわからずに意外と適当に設定している人が多いのではないでしょうか？

ということで、今回はWebサイトのヘッダーとフッターの設定からデザインまで解説します。

作成方法は僕の使用しているテーマ「Cocoon」の画面なので、違うテーマを使用している方は多少違う点があるかもしれませんが、基本は同じなのでぜひ参考にしてください。

ヘッダーの役割

まずはそれぞれの役割について知っていきましょう。

サイト上部メニューのヘッダーですが、ページを開いた時に最初に表示される(ファーストビュー)ということもあり、フッターよりも重要なメニューです。

内容の基本的な考え方はサイトの種類ごとに変わり、

• コーポレートサイト…トップページ直下のページ一覧
• LP（ランディングページ）…大見出し
• ブログ、ニュース、ショップサイト…カテゴリ一覧

といった内容にしておけば使いづらくはないサイトになると思います。

コーポレートサイト

サイトはトップページを基準として、枝分かれしていくのが理想的な形なのですが、そうして見た時にトップページの直下に位置するページがそのままヘッダーになるイメージです。

それより下のページをサブカテゴリとして入れる方法もありますが、ヘッダーがゴチャゴチャしてしまい分かりにくくなってしまうため、僕はあまりオススメしません。

LP（ランディングページ）

コーポレートサイトと似たようなものですが、LPは１ページ構成のサイトで直下のページがないため、代わりに大見出しにスクロール移動してくれるヘッダーが基本です。

ヘッダー自体も上部に固定追従させておけばページ内のどこにいても見たい場所へ移動できるので、ページが縦に長くなりがちなランディングページでは特に重要なメニューになります。

ブログ、ニュース、ショップサイト

上記のサイトとは違い、目当ての記事や商品にアクセスすることが重要なブログサイトやニュースサイト、ショップサイトではトップ直下ページの他に、商品や記事カテゴリーの一覧ページを並べておくと、サイト全体の回遊がしやすくなり使いやすいヘッダーになります。

記事数や商品数が多くなってくると主カテゴリーだけだと不便になってくるので、コーポレートサイトと違い副カテゴリーも設定することも検討しても良いでしょう。

フッターの役割

サイト下部のフッターは最後までスクロールしなければ表示されないメニューなので、そこまで重要なメニューではありませんが、Googleの評価などに関係するページを配置できる最適な場所なので上手く活用しましょう。

簡単な構成としては、

• ヘッダーと同じメニュー
• 必要なページや項目の配置
• 雰囲気を伝える場所として利用

といったところでしょうか。
全て必要というわけではないので、自分のサイトに必要かどうか考えて作って見てください。

ヘッダーと同じメニュー

ヘッダーが固定追従の場合は重複してしまいますし、トップへ戻るボタンがあればすぐにヘッダーにアクセスできるので配置するかどうかは好みで選べば良いでしょう。

フッターの利点として、ヘッダーと違いメニュー項目が多くなっても気にならないため、ヘッダーはシンプルに、フッターは詳細なメニューを配置するというように使い分けるという方法もあります。

必要なページや項目の配置

Googleの評価などにも関係する「プライバシーポリシー」や「免責事項」はサイト内に配置しておかなければいけませんが、実際にユーザーが頻繁に見るようなページではないためフッターに小さく配置しておくくらいでちょうど良いです。

店舗や会社サイトであれば所在地や電話番号、SNSのリンクなどを配置しておくのも一般的です。

雰囲気を伝える場所として利用

フッターはオマケのメニューみたいなところもあるので、フッターの下に画像を配置して雰囲気を伝える場所として利用しているサイトもたまに見かけます。

そもそも配置してもあまり気づく人もいないですし、PHPを編集しないと配置できない場合もあるので興味があればやってもいいかなくらいの方法です。

設定とデザインの方法

それでは実際の設定方法について解説していきます。

最初に言ったように、僕の使用テーマは「Cocoon」なので、
違うテーマの場合多少設定が異なる場合があるのでお気をつけください。

メニューの項目と位置を設定

まずはダッシュボードから「外観」「メニュー」を選択し、新しいメニューを作成しましょう。

メニュー構造下部の「メニューを作成」ボタンを押して保存するのを忘れないように気をつけてください。

メニューは位置を選択すれば該当箇所に配置されます。
内容が同じであれば共通で作成できるのは楽で良いですね。

メニューを作成できたら、内容を決めていきましょう。
画面左側の「メニュー項目を追加」から必要なページを追加するだけなので簡単にできると思います。

SNSのリンクなど外部リンクを追加したいときは「カスタムリンク」にURLをコピペして追加すれば問題ありません。

メニュー項目の個別設定

メニュー項目を追加したら、画面右側の「メニュー構造」に追加されるので
名前・CSSクラス・順番を設定しましょう。

ナビゲーションラベル	メニュー上で表示されるテキスト
CSS class	デザイン用の個別クラス設定
移動	メニューの移動

「ナビゲーションラベル」は基本的にはページ名をそのまま入力しておけば問題ありません。

「CSS class」はメニュー項目にアイコンを追加したい、個別で文字色を変えたいなど、個別でデザインを変えたい場合に設定しましょう。

「移動」はメニューの順番を変える場合とサブメニュー（下の階層）を作成する場合に使います。

順番は手動でも変えれますが、間違えてサブカテゴリーに入ってしまったりするので注意してください。

最初同様、「メニューを保存」ボタンの押すのも忘れずに！

CSSでデザインを調整

メニューの内容が決まったら、出来る方はCSSでデザインを調整しましょう。

「外観」「カスタマイズ」「追加CSS」か「style.cssファイル」にCSSを記述すればデザインが変えられます。

専門的になるので、詳細は省きますが「Cocoon」テーマの場合、共通で変更するなら「navi-inクラス」の「aタグ」を、個別で変更するなら先ほど設定した「CSS class」は「クラス名 a」で指定すればデザインを変更できると思います。

CSSはPHPと違い、間違えたらサイトが動かなくなったりせず、デザインが変になるくらいの被害しかない（それも書いたものを消せば元に戻ります。）ので気軽に挑戦してみてください。

まとめ

サイトのフッターはともかく、ヘッダーは特に重要なメニューです。

デザインはCSSの知識がないと難しい部分もありますが、内容はユーザー目線で使いやすさを考えれば良いのでそこまで難しくないと思います。

今回の記事を参考に、わかりやすいサイトを作ってもらえたら幸いです。