AFFINGER6 カスタマイズ【ヘッダー画像設定▶︎AFFINGER管理から行うパターン】超基本形！

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6のカスタマイズでAFFINGER管理画面から行う「ヘッダー画像設定」を初心者さん向けにご紹介します。

AFFINGER6管理画面とカスタマイザーでの作業になります。

AFFINGER6に標準装備されている基本的な「ヘッダー画像設定」なので初心者さんでも安心ですよ。

ヘッダーに画像を表示させてカッコ良くしちゃいましょう。^^／

こんな方におすすめ！

ブログ初心者
WordPressテーマAFFINGER6を使っている。
トップページをカッコよくしたい！（笑）

この記事でわかること！

ヘッダー画像設定（AFFINGER管理画面）
1. AFFINGER管理画面を表示
2. ヘッダー画像設定
ヘッダー画像設定（カスタマイザー）
1. カスタマイザー起動
2. ヘッダー画像のベース画像を選択及び各種設定
3. ヘッダー画像のベース画像を選択の手順
4. ヘッダー画像用に切り抜き（AFFINGER管理のヘッダー画像設定｜トリミングの設定値）
5. カスタマイザーを公開
まとめ！

それではご覧ください！

こんな感じです。

ヘッダー画像（固定）1画像登録

ヘッダー画像（スライドショー）2画像以上登録

※ 「サイト名（サイトロゴ）・キャッチフレーズ等」サイト情報の下側に画像が設置できます。

AFFINGER6なら簡単にできちゃいます！

★ 当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

ヘッダー画像設定（AFFINGER管理画面）

AFFINGER管理画面でヘッダー画像設定をするのですが…その前に以下を確認してください。

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効にしてください。◀︎『403 Error』が出た場合。

『AFFINGER管理』▶︎『Save』時に『403 Error』が出て対処方法がわからない方は
　こちらをご覧ください。

: AFFINGER6＆ロリポップ！レンタルサーバー『403 Error』が出た時の対処方法！

ロリポップ！レンタルサーバーを使用してAFFINGER6（ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない！こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ！

AFFINGER管理画面を表示

AFFINGER管理画面を開いて詳細メニューへ進みます。

『WordPress管理＞ダッシュボード＞AFFINGER管理＞ヘッダー＞ヘッダー画像設定』をクリックします。

下側に自動スクロールされ以下の画面が表示されます。

※ この画面の項目を設定します。

ヘッダー画像設定

この章では、ヘッダー画像設定の各設定項目をご紹介します。

設定項目

トリミング（px）
ヘッダー画像のリンク先URL：
スライドショー設定

それでは順番に見ていきましょう。

トリミング（px）

『トリミング（px）』とは、ヘッダーに設定する元の画像を切り取る範囲のことです。
縦横比の異なる画像をこの設定で同じサイズに切り抜いて合わることができます。

画像が表示される大きさ

ここで設定したトリミング量が、カスタマイザーの『ヘッダー画像』設定時の切り抜き寸法になります。

幅：2200（推進）
高さ：500（推進）

※ カスタマイザー側で『ヘッダー画像の横幅を100％にする』設定ができるので画像の収まり方に問題なければここまで大きくなくても大丈夫です。
サンプルでは、元の画像に2200幅と1200幅を混用していますがトリミングすれは問題ありません。
（同じ大きさで表示されます！）

『トリミング（px）』の設定は以下の赤枠部分です。

トリミング（px）の設定値が適応される場所は、以下の『画像切り抜き』の部分です。

カスタマイザーでヘッダー画像に新規画像を追加すると以下のような画像切り抜き領域が表示されます。
（詳細手順は後述します。）

ヘッダー画像のリンク先URL：

『ヘッダー画像のリンク先URL：』とは、ヘッダー画像をクリックしたときに指定先のリンクに飛ぶ設定のことです。
（誘導・ガイドに使用します）

『ヘッダー画像のリンク先URL：』の設定は以下の赤枠部分です。

スライドショー設定

『スライドショー設定』とは、複数のヘッダー画像を設定した場合に有効で、ヘッダー画像を特定の時間ごとに順次切り替えながら表示させる設定のことです。
（表示速度があまり速いと落ち着きません）笑／

『スライドショー設定』の設定は以下の赤枠部分です。

すべての設定が完了したら『Save』をクリックします。

表示に優先順位があります！

表示優先度：記事スライドショー設定＞ヘッダーコンテンツ設定＞ヘッダー画像エリアのウィジェット＞ヘッダー画像（画像スライドショー）

※ヘッダー画像エリアにはヘッダー画像の他に、ヘッダーコンテンツ、ヘッダー画像エリアのウィジェット、記事スライドショーの何れかを挿入できます。複数設定された場合の優先度は上記のとおりです。

「ヘッダーコンテンツ設定・記事スライドショー設定」は、スライドショー設定より優先されます。「ヘッダーコンテンツ設定・記事スライドショー設定」を有効にしていると、スライドショー設定は無効になります。

以上で、AFFINGER管理画面での設定は完了しました。

続いて、カスタマイザーからヘッダー画像を設定します。