【AFFINGER6】ヘッダー&フッターのレイアウトをカスタマイズ！

今回の記事は、ヘッダーやフッターまわりを簡単かつおしゃれにカスタマイズする方法を解説していきます。

私もまだまだブログ初心者です。

なので一緒に勉強していきましようね！

まず、この部分がヘッダーとなります、頭(上)の部分ですね。

そしてこちらがフッター、足(下)の部分です。

それでは当ブログのレイアウト方法を詳しく説明していきます。

決して当サイトがおしゃれだと言っているわけではありませんので💦

ヘッダー部分のカスタマイズ方法

WordPress管理画面の【AFFINGER管理】をクリックします。

ヘッダーをクリックします。

少し下の方に「ヘッダーを分割しない」という欄がありますので、そこにチェックをつけて一度セーブします。

再度、同じ場所の「ヘッダーを分割しない」の下に「ヘッダーエリアをセンタリング」にチェック欄が表示されます。

その部分にチェックを入れセーブをクリックしますと、サイトのタイトルを真ん中に寄せる事ができます。

先ほどの画像では左寄りだったタイトルが中央に移動しました。

お好きな方を使って下さいね。

カテゴリーを作る方法

訪問者の方に読んで頂きやすくするように、記事の区割を行います。

あまり数が多くならない方が、読者さんも迷わないかと思います。

WordPress管理画面の【投稿】→【カテゴリー】をクリックします。

新規カテゴリーを追加の場所に、カテゴリーを書き込みます。

スラッグは表示されるURLの一部で、https://www.サイト名/スラッグ名/になります。

半角英数字で入力します。

そして下にある新規カテゴリーを追加をクリックします。

これでカテゴリーが追加されました。

カテゴリーはこれからどんどん記事を書いていく上で、都度、追加していきましょう。

投稿画面の右側にカテゴリーがありますので、そこにチェックを入れてカテゴリーの指定をしましょう。

ヘッダーメニューを作る方法

次にヘッダーメニューを作ります。

WordPress管理画面の【外観】→【メニュー】をクリックします。

メニュー構造の下にある「メニュー名」に付けたいメニュー名を入力し、右下にある「メニューを保存」をクリックします。

左の「メニュー項目を追加」の一番下、「カテゴリー」の右側の▼のプルダウンをクリックします。

ここで使用するカテゴリーにチェックを入れます。

最後に「メニューに追加」をクリックします。

そうしますと、「メニュー構造」の中に先ほどチェックしたカテゴリーが追加されました。

ドラッグ&ドロップで、カテゴリーの順序や階層を変更することができます。

私の場合、現在、カテゴリーメニューの中にプルダウン方式で全ての親カテゴリーを入れていますので、こんな感じになりますが、だいたいは5つくらいのメニューの数で、「ホーム」「プロフィール」「問い合わせ」「ご自身のサイトカテゴリー」「ご自身のサイトカテゴリー」のようになるかと思います。

順番が決まれば、右下の「メニューを保存」をクリックします。

ヘッダーメニューに【ホーム】を追加する方法

ホーム=トップページとなります。

ホームをクリックしたらトップページに戻ると、訪問者の方に色々と他の記事を読んでもらいやすくなりますね。

先ほど使用したカテゴリーの上に【カスタムリンク】があります。

その右の▼のプルダウンをクリックし、「サイトのアドレス」と「ホーム」を入力後、メニューに追加をクリックします。

こちらもカテゴリー同様、メニュー構造に「ホーム」が追加されました。

私は一番左に持って行きたかったので、一番上までドラッグしました。

最後は必ず「メニューを保存」をクリックします。

同様に「問い合わせ」や「プロフィール」は固定ページから設定します。

メニューに追加したいものにチェックを入れましょう。

これまでの作業で上の画像のようになります。

ひとまずお疲れ様でした💦

ブログタイトル周りをカスタマイズする方法

WordPress管理画面の【外観】→【カスタマイズ】をクリックします。

【基本エリア設定】→【ヘッダーエリア】をクリックします。

この画面で色の変更が可能となります。

最後に公開をクリックします。

慣れないうちは、AFFINGER管理で色の管理をした方が簡単だと思います。

この画面では細かい設定が色々できますので、余裕のある時に触ってみるのもいいかもしれません。

また、当サイトにはヘッダー部分に「インフォメーションバー」を設置しています。

別途、下記の記事にまとめていますので、合わせてお読み頂けますと嬉しいです。

合わせて読む

【AFFINGER6】インフォメーションバーを表示させる方法

フッター部分をカスタマイズする方法

次に、フッター部分のカスタマイズの方法について説明していきます。

WordPress管理画面【外観】→【メニュー】をクリックします。

「新しいメニューを作成しましょう」をクリックします。

メニュー名に「フッターメニュー」と入力し、右下の「メニューを作成」をクリックします。

メニュー項目を追加の中から、フッターメニューに追加したいものを選びチェックを入れます。

最後に「メニューに追加」をクリックします。

ヘッダーと同じ要領です。

問い合わせを追加する場合、当サイトで使用している「Contact Form7」の設定の仕方を下記の記事で説明しています。

良ければご覧になって見て下さい。

合わせて読む

【初心者用】WordPressの問い合わせフォーム「Contact Form 7」の設定方法

フッターは基本的に、ヘッダーと同じ設定の仕方になります。

まとめ

最後に、ヘッダーメニューやフッターメニューは訪問者の方にとって他の記事も読んでもらえるかもしれない道標となります。

迷わないようにカテゴリー分けしたり、問い合わせやプライバシーポリシーの設置など、大変重要になってきます。

GoogleAdSenseに申し込む場合は必須と言っていいと思います。

AFFINGER6では簡単に設置できますので、さくっと進めてしまいましょう。

最後までお読み頂きまして、ありがとうございました。