ヘッダーとフッターを設定しようWordPressブログトップ画面の作り方

こんにちはosushiです。

今回はWordPressでWebサイトのトップページにヘッダーメニュー・フッターなどを設置していく方法について解説していきたいと思います。どのようなWebページにしたいのかサイトマップを構想したうえでサイト作成していきますが、まずは自分の考えているWebサイトに近いデザインのテーマを選定しましょう。このブログではテーマ「アルバトロス」を使って説明していきます。宜しくお願い致します。

関連記事　WordPress テーマの選び方とポイント

ヘッダーとフッターとは

このブログのヘッダー

フッター

ヘッダーにはブログのタイトルやメニューバー、画像などが表示される部分です。本文のコンテンツより上部にある領域のことです。

フッターはサイトの最下部にある Copyrightやリンクが表示されている部分です。

ヘッダーフッターともにサイト内ページを移動しても表示される部分になります。サイトを閲覧しやすくなるようヘッダーフッターを作成していきましょう。

ヘッダーフッターの設定方法

外観＞カスタマイズ

1. サイトカラーを選択できます。
2. サイトのロゴを設定
3. サイトのアイコン（ファビコンなど）を設定
4. アルバトロスではSNSのボタン非表示の設定やアナリティクスとの連携設定ができます。
5. ヘッダーの画像を選択します。
6. Webサイト全体の背景画像を選択します。
7. メニューの表示位置の設定・表示順の設定ができます。
8. ウィジェットを追加できます。
9. トップページのフロントページに表示するコンテンツを設定。

ヘッダーの設定で使用するのは②⑤⑦
フッターは⑧から設定していきます。

ヘッダーにサイトのロゴを表示する方法

②のサイトロゴから「画像を選択」でイメージをアップロードします。
イメージのサイズは３４６×８８px推奨です。

アップロードしたら「保存して公開」で設定完了です。

ヘッダー画像を設定する方法

⑤のヘッダー画像から「新規画像を追加」をクリックしイメージをアップロードします。
サイズは２４００×５００px推奨ですがアップロードした画像を切り抜きして使用することも可能です。

ヘッダーにメニューバーを設定する方法

メニューは表示したいメニュー項目をまず設定します。

外観＞メニュー

①「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の中からメニューを構成したい項目にチェックを入れ「メニューに追加」をクリックしメニュー構造に追加します。

②メニュー構造でメニューを並べ替えます。各項目のバーをドラックすることで並べ替えることが出来ます。

③「メニューを保存」

次に保存したメニューをヘッダーに表示します。

⑦メニューから

メニューの位置を選択

①「グローバルナビ」を「ヘッダー」に選択
②保存して公開

ヘッダーにメニューバーが表示されます。

フッターの設定

⑧のウィジェットから「フッター（左）」「フッター（真ん中）」「フッター（右）」の表示したい位置を選択します。

①フッターに表示したいコンテンツをウィジェットから追加します。
②「保存して公開」

フッターにコンテンツが表示されます。

まとめ

いかがでしたでしょうか？ヘッダーとフッターに設定について解説していきました。私が使用しているテーマ「アルバトロス」での画面説明になっておりますが、どのテーマでも同じように設定していけるかと思います。作成したサイトマップを参考にしながら作成していくとスムーズです。直観的な作業でHPの外観を構成できるがWordPressの使いやすい部分ですよね。

最後まで読んでいただきありがとうございます。