ヘッダー 設定順

AFFINGERのヘッダーを0から最短、最速で初期設定する!【ヘッダーの設定記事まとめ】

AFFINGERのサイトを最速で初期設定するコーナー!今回はヘッダー編です!AFFINGERを使ったサイトのヘッダーを初期状態から設定していきます。AFFINGERを導入したばかりの人はぜひ!

このページはこのブログでこれまで配信してきたカスタマイズ記事をフローチャートにしてまとめたものです。AFFINGERのヘッダーのカスタマイズに関してほぼ網羅しています。なので、このチャートが終わる頃にはほぼ完全体のヘッダーが姿を表しているはずです。

ちょっと大変かもしれませんが頑張って設定してみてください!

AFFINGERのヘッダー初期設定フローチャート

※サムネイルスライドショー機能を追加しました。

ヘッダー画像を設定する

まず最初は一番目立つヘッダー画像部分から設定していきます。次の4つのパターンから好きなものを選んでください。

パターン1"ヘッダー画像"と"画像スライドショー"

ヘッダー画像

画像を一枚表示します。

ヘッダー画像

画像スライドショー

画像をスライドショーさせます。

画像スライドショー

難易度:普通・・・画像のサイズ調整に手間取るかも...

"ヘッダー画像"と"画像スライドショー"の設定方法はこちら

パターン2基本の"headerエリア"とフルスクリーンの"headerエリア"

基本の"headerエリア"(ヘッダーコンテンツなし)

ブラウザの上部を一枚画像で覆います。

基本の"headerエリア"(キャッチコピーなし)

基本の"headerエリア"(ヘッダーコンテンツあり)

ブラウザの上部を一枚画像で覆い、文章やボタンを設置します。

基本の"headerエリア"(キャッチコピーあり)

難易度:やや難しい・・・工程が多い。PCとスマホでぞれぞれ画像のサイズを合わせるのが面倒。

フルスクリーンの"headerエリア"(ヘッダーコンテンツなし)

ブラウザ全体を一枚画像で覆います。

フルスクリーンの"headerエリア"(キャッチコピーなし)

フルスクリーンの"headerエリア"(ヘッダーコンテンツあり)

ブラウザ全体を一枚画像で覆い、文章やボタンを設置します。

フルスクリーンの"headerエリア"(キャッチコピーあり)

難易度:易しい・・・サイズ調節しない分、比較的簡単に設定できます。

基本の"headerエリア"とフルスクリーンの"headerエリア"の設定方法はこちら

パターン3"ヘッダー記事スライドショー"

記事スライドショー(スライド)

記事のアイキャッチをスライドショーで表示します。

ヘッダー記事スライドショー(スライド)

記事スライドショー(フェードイン・アウト)

記事のアイキャッチをフェードイン・アウトで表示します。

ヘッダー記事スライドショー(フェードイン・アウト)

難易度:易しい・・・設定画面でポチポチするだけ

"ヘッダー記事スライドショー"の設定方法はこちら

パターン4"背景が固定され手前の画像が動くヘッダー"

画像を二枚重ねて手前の画像をスライドさせます。

背景を固定してスライドするヘッダー画像(PC)

難易度:難しい・・・サイトに合った画像を準備するのがとても難しい。

"背景が固定され手前の画像が動くヘッダー"の設定方法はこちら

ロゴ部分を設定する

次はロゴ部分を設定していきます。次の2パターンから好きなものを選んでください。

パターン1アイコンロゴ

タイトルの横にアイコン(画像)を置くパターンです。

ロゴ部分を設定する(アイコンロゴ)

難易度:易しい・・・画像をアップロードするだけ。

"アイコンロゴ"の設定方法はこちら

パターン2ロゴ画像

タイトルの代わりに画像を置くパターンです。

ロゴ部分を設定する(ロゴ画像)
ロゴ画像(左寄せ)
ロゴ画像(中央寄せ)

難易度:難しい・・・工程が多いぶん大変。

"ロゴ画像"の設定方法はこちら

ヘッダーメニューを設定する

ヘッダーに表示する一番大きなメニューを設定します。一般的にはグローバルナビゲーションメニューと呼ばれる部分です。

ヘッダーメニューを設定する

"ヘッダーメニュー"("グローバルナビゲーションメニュー")を設定する方法はこちら

ロゴの右部分を設定する

次はロゴの右側のエリアをどのように活用するか決めていきます。活用方法は2つのパターンが用意されています。

パターン1ヘッダーメニューを右上に移動

先ほど作ったヘッダーメニュー。このヘッダーメニューは初期設定ではロゴの下にありますが、ロゴの右側に移動することもできます。

ヘッダーメニュー(デフォルト)
ヘッダーメニュー(デフォルトの状態)
ヘッダーメニュー(ロゴの下からロゴの横に移動する)
ヘッダーメニュー(ロゴの横に移動させた状態)

ヘッダーメニューをロゴの下からロゴの横に移動する方法はこちら

パターン2電話番号や小文字メニュー

二つめのパターンは「小さいメニュー(フッター用メニュー)」「電話番号」「ちょっとした一言」のどれか、または全てを設置するパターンです。

ロゴの右部分(フッター用メニュー、電話番号、ヘッダー右ウィジェット)

小文字のメニュー(フッター用メニュー)

一番上には小さい文字のメニューを配置できます。事務的なリンクやSNSボタンを設置するときに便利です。

小文字のメニュー(フッター用メニュー):ブログやアフィリエイトサイトの例
ブログやアフィリエイトサイトの例
小文字のメニュー(フッター用メニュー):企業やお店の例
企業やお店の例
小文字のメニュー(フッター用メニュー):SNSボタンの例
SNSボタンの例

サイト右上に事務的なリンクやSNSボタンを設置する方法はこちら

電話番号

二段目には電話番号を表示できます。

電話番号を表示する方法はこちら

ヘッダー右ウィジェット

三段目にはちょっと一言を添えるのに便利な自由スペースがあります。

ヘッダー右ウィジェット(使用例:フォローお願いします。)
ヘッダー右ウィジェット(使用例:営業時間10:00〜18:00)

"ヘッダー右(フッター)ウィジェット"の設定方法はこちら

ロゴを中央寄せにした場合

ロゴを中央寄せにした場合はこのエリアは使用できません。

ウィジェットを挿入

ヘッダー画像の上や下のスペースにウィジェットを挿入できます。お好みで設定してください。

ヘッダー画像エリア上のウィジェット

ちょっとした宣伝文を入れるときに便利です。

ヘッダー画像エリア上を設定する

"ヘッダー画像エリア上のウィジェット"の設定方法はこちら

ヘッダー画像エリア下のウィジェット

ヘッダー画像エリア下を設定する

"ヘッダー画像エリア下のウィジェット"の設定方法はこちら

ヘッダーカードを設置する

ヘッダーの下の部分にカード状のバナーを設置できます。最大4枚まで。

パターン1白い文字を入れて背景に画像を置くパターン

ヘッダーカードを設置する(白い文字を入れて背景に画像を置くパターン)

パターン2画像をそのまま表示するパターン

ヘッダーカードを設置する(画像をそのまま表示するパターン)

"ヘッダーカード"の設定方法はこちら

サムネイルスライドショーを設置する

ヘッダーの下にサムネイルのスライドショーを設置できます。

ヘッダーの下にサムネイルスライドショーを設置する

"サムネイルスライドショー"の設定方法はこちら


ヘッダーの設定は以上です!お疲れ様でした。

-ヘッダー, 設定順