AFFINGERのサイトを最速で初期設定するコーナー!今回はヘッダー編です!AFFINGERを使ったサイトのヘッダーを初期状態から設定していきます。AFFINGERを導入したばかりの人はぜひ!
このページはこのブログでこれまで配信してきたカスタマイズ記事をフローチャートにしてまとめたものです。AFFINGERのヘッダーのカスタマイズに関してほぼ網羅しています。なので、このチャートが終わる頃にはほぼ完全体のヘッダーが姿を表しているはずです。
ちょっと大変かもしれませんが頑張って設定してみてください!
![AFFINGERのヘッダー初期設定フローチャート](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/03/affinger_header_setting_chart.jpg)
※サムネイルスライドショー機能を追加しました。
ヘッダー画像を設定する
まず最初は一番目立つヘッダー画像部分から設定していきます。次の4つのパターンから好きなものを選んでください。
パターン1"ヘッダー画像"と"画像スライドショー"
ヘッダー画像
画像を一枚表示します。
![ヘッダー画像](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/header_gazou_after.jpg)
画像スライドショー
画像をスライドショーさせます。
![画像スライドショー](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/header_gazou_slide.gif)
パターン2基本の"headerエリア"とフルスクリーンの"headerエリア"
基本の"headerエリア"(ヘッダーコンテンツなし)
ブラウザの上部を一枚画像で覆います。
![基本の"headerエリア"(キャッチコピーなし)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/header_area1_pc.jpg)
基本の"headerエリア"(ヘッダーコンテンツあり)
ブラウザの上部を一枚画像で覆い、文章やボタンを設置します。
![基本の"headerエリア"(キャッチコピーあり)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/header_area2_pc.jpg)
フルスクリーンの"headerエリア"(ヘッダーコンテンツなし)
ブラウザ全体を一枚画像で覆います。
![フルスクリーンの"headerエリア"(キャッチコピーなし)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/fullscreen_headerarea1.jpg)
フルスクリーンの"headerエリア"(ヘッダーコンテンツあり)
ブラウザ全体を一枚画像で覆い、文章やボタンを設置します。
![フルスクリーンの"headerエリア"(キャッチコピーあり)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/fullscreen_headerarea2.jpg)
基本の"headerエリア"とフルスクリーンの"headerエリア"の設定方法はこちら
パターン3"ヘッダー記事スライドショー"
記事スライドショー(スライド)
記事のアイキャッチをスライドショーで表示します。
![ヘッダー記事スライドショー(スライド)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/kizi_slideshow.gif)
記事スライドショー(フェードイン・アウト)
記事のアイキャッチをフェードイン・アウトで表示します。
![ヘッダー記事スライドショー(フェードイン・アウト)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/duio.gif)
パターン4"背景が固定され手前の画像が動くヘッダー"
画像を二枚重ねて手前の画像をスライドさせます。
![背景を固定してスライドするヘッダー画像(PC)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/kotei.gif)
"背景が固定され手前の画像が動くヘッダー"の設定方法はこちら
ロゴ部分を設定する
次はロゴ部分を設定していきます。次の2パターンから好きなものを選んでください。
パターン1アイコンロゴ
タイトルの横にアイコン(画像)を置くパターンです。
![ロゴ部分を設定する(アイコンロゴ)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/icon-logo_pc_zoom.jpg)
![](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/icon-logo_pc.jpg)
パターン2ロゴ画像
タイトルの代わりに画像を置くパターンです。
![ロゴ部分を設定する(ロゴ画像)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/logo-gazou_pc_zoom.jpg)
![](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/logo-gazou.jpg)
![](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/logo-gazou_center.jpg)
ヘッダーメニューを設定する
ヘッダーに表示する一番大きなメニューを設定します。一般的にはグローバルナビゲーションメニューと呼ばれる部分です。
![ヘッダーメニューを設定する](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/03/header-menu_color.jpg)
"ヘッダーメニュー"("グローバルナビゲーションメニュー")を設定する方法はこちら
ロゴの右部分を設定する
次はロゴの右側のエリアをどのように活用するか決めていきます。活用方法は2つのパターンが用意されています。
パターン1ヘッダーメニューを右上に移動
先ほど作ったヘッダーメニュー。このヘッダーメニューは初期設定ではロゴの下にありますが、ロゴの右側に移動することもできます。
![ヘッダーメニュー(デフォルト)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/header_menu_normal_zoom.jpg)
![ヘッダーメニュー(ロゴの下からロゴの横に移動する)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/header_menu_header_right_zoom.jpg)
ヘッダーメニューをロゴの下からロゴの横に移動する方法はこちら
パターン2電話番号や小文字メニュー
二つめのパターンは「小さいメニュー(フッター用メニュー)」「電話番号」「ちょっとした一言」のどれか、または全てを設置するパターンです。
![ロゴの右部分(フッター用メニュー、電話番号、ヘッダー右ウィジェット)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/tel-number_zoom.jpg)
小文字のメニュー(フッター用メニュー)
一番上には小さい文字のメニューを配置できます。事務的なリンクやSNSボタンを設置するときに便利です。
![小文字のメニュー(フッター用メニュー):ブログやアフィリエイトサイトの例](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/footer_menu_blog.jpg)
![小文字のメニュー(フッター用メニュー):企業やお店の例](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/footer_menu_company.jpg)
![小文字のメニュー(フッター用メニュー):SNSボタンの例](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/footer_menu_sns.jpg)
サイト右上に事務的なリンクやSNSボタンを設置する方法はこちら
電話番号
二段目には電話番号を表示できます。
ヘッダー右ウィジェット
三段目にはちょっと一言を添えるのに便利な自由スペースがあります。
![ヘッダー右ウィジェット(使用例:フォローお願いします。)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/footer_widjet_example1.jpg)
![ヘッダー右ウィジェット(使用例:営業時間10:00〜18:00)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/02/footer_widjet_example2.jpg)
ロゴを中央寄せにした場合
ロゴを中央寄せにした場合はこのエリアは使用できません。
ウィジェットを挿入
ヘッダー画像の上や下のスペースにウィジェットを挿入できます。お好みで設定してください。
ヘッダー画像エリア上のウィジェット
ちょっとした宣伝文を入れるときに便利です。
![ヘッダー画像エリア上を設定する](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/03/header_area_upper_widget.jpg)
ヘッダー画像エリア下のウィジェット
![ヘッダー画像エリア下を設定する](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/03/header-area-lower_widget.jpg)
ヘッダーカードを設置する
ヘッダーの下の部分にカード状のバナーを設置できます。最大4枚まで。
パターン1白い文字を入れて背景に画像を置くパターン
![ヘッダーカードを設置する(白い文字を入れて背景に画像を置くパターン)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/03/header-card_sample1.jpg)
パターン2画像をそのまま表示するパターン
![ヘッダーカードを設置する(画像をそのまま表示するパターン)](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/03/header-card_sample2.jpg)
サムネイルスライドショーを設置する
ヘッダーの下にサムネイルのスライドショーを設置できます。
![ヘッダーの下にサムネイルスライドショーを設置する](https://wordpress-theme.jp/affinger/wp-content/uploads/sites/2/2021/05/thumbnail-slideshow_setting.gif)
ヘッダーの設定は以上です!お疲れ様でした。