AFFINGER6(アフィンガー6)のトップページヘッダーデザイン4選＆カスタマイズ【画像サイズやメニューも】

こういった疑問にお答えします。

結論、AFFINGER6(アフィンガー6)ならヘッダーデザインは基本4種類あり、テキストやボタンを組み合わせれば思いのままにカスタマイズできます。

でも、アフィンガーってカスタマイズ性が高すぎるがゆえに、設定方法がわからないことが多いんですよね。

そこであなたがAFFINGER6(アフィンガー6)のヘッダーデザインで路頭に迷わないよう、下の内容を徹底網羅します。

• AFFINGER6(アフィンガー6)のヘッダーデザイン4選のカスタマイズ方法
• ヘッダー画像の画像サイズ
• ヘッダーメニューの設定方法
• ヘッダーカードの設定方法

この記事を読めばあなたもAFFINGER6(アフィンガー6)で思うままのヘッダーデザイン、メニュー、ヘッダーカードを設定でき、ブログで成果を出せますよ。

またブログ初心者やアフィンガー初心者で初期設定やカスタマイズ方法がわからないあなたには『アフィンガーの完璧なる初期設定全集』『AFFINGER(アフィンガー)を手足のように使いこなす使い方とカスタマイズ方法』が参考になります。

AFFINGER6(アフィンガー6)のヘッダーデザイン4選＆カスタマイズ方法

AFFINGER6(アフィンガー6)では大きく分けると下の4つのヘッダーデザインに設定できます。

• 画像1枚のヘッダー
• ヘッダー上部全体を画像で覆うヘッダー
• 記事スライドショーヘッダー
• 背景画像と手前の画像を別々で設定するヘッダー

それぞれのヘッダーデザインを解説していきます。

AFFINGER6(アフィンガー6)のヘッダーデザイン①画像1枚のヘッダーデザイン

まずはAFFINGER6(アフィンガー6)のスタンダードなヘッダー画像の設定方法『画像1枚のヘッダーデザイン』の方法は下の手順です。

• 『WordPressダッシュボード』→『外観』→『カスタマイズ』を開く
• カスタマイズから『ヘッダー画像』を選択する
• 『現在のヘッダー』→『新規画像を追加』する
• 画像を選択して切り抜く（推奨画像サイズ: 2200×500ピクセル)
• カスタマイズで画像が反映されたら『公開』をクリックする
• ヘッダー画像設置完了です

もっと画像や動画で詳しく説明をしてほしいあなたは下の記事で徹底解説しているのでぜひ参考にして下さい。

参考AFFINGER6のヘッダー画像・テキスト・ボタンの設置方法を徹底解説

AFFINGER6(アフィンガー6)のヘッダーデザイン②ヘッダー上部全体を画像で覆うヘッダーデザイン

ヘッダー上部全体を画像で覆うヘッダーデザインは下の手順です。

• 『WordPressダッシュボード』→『外観』→『カスタマイズ』→『基本エリア設定』→『headerエリア』を開く
• 『header（ヘッダー～ヘッダー画像下エリア）全体の背景画像です』から『画像を選択』で任意の画像を選ぶ
• ヘッダー画像エリアで『トップページ画像エリアの高さを画面サイズに応じて最大にする(β)※優先』にチェックを入れる
• 「背景画像を幅100%のレスポンシブにする」にチェックを入れる。(全体に表示しない場合はチェックを入れない)
• ヘッダー、メニューなどのカラーを『無色透明』に設定する
• タイトルやキャッチフレーズを非表示にする

もっと詳しく画像や動画で説明してほしいあなたは下の記事が参考になります。

参考AFFINGER6(アフィンガー6)でヘッダー上部全体を画像で覆うヘッダー画像の設定方法

AFFINGER6(アフィンガー6)のヘッダーデザイン③記事スライドショーのヘッダーデザイン

https://youtu.be/CiY2fOp9Ggk

AFFINGER6(アフィンガー6)のトップページに記事スライドショーを設定する方法は下のとおり2つの種類があります。

• ヘッダー画像の代わりに記事スライドショーを表示
• ヘッダー画像と記事スライドショーを併用表示

それぞれ簡単に設定方法を解説していきます。

画像や動画で詳しく『AFFINGER6(アフィンガー6)のトップページへのスライドショー設定方法』を知りたい人は下の記事が参考になります。

参考AFFINGER6(アフィンガー6)トップのスライドショー設定方法【ヘッダー画像併用方法も】

AFFINGER6記事スライドショーのヘッダーデザイン①ヘッダー画像の代わりに記事スライドショーを表示する方法

AFFINGER6(アフィンガー6)でヘッダー画像の代わりに記事スライドショーを表示する手順は下のとおりです。

• 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー』を開く
• 『記事スライドショー設定』の『ヘッダーに記事をスライドショーで表示する』にチェックを入れる
• 保存(Save)する

画像や動画で詳しく『AFFINGER6(アフィンガー6)のトップページへのスライドショー設定方法』を知りたい人は下の記事が参考になります。

参考AFFINGER6(アフィンガー6)トップのスライドショー設定方法【ヘッダー画像併用方法も】

AFFINGER6記事スライドショーのヘッダーデザイン②ヘッダー画像と記事スライドショーを併用表示方法

AFFINGER6(アフィンガー6)でヘッダー画像と記事スライドショーを併用表示する手順は下のとおりです。

• 『WordPressダッシュボード』→『AFFINGER管理Z』→『ヘッダー下/おすすめ』を開く
• 『サムネイルスライドショー』の『ヘッダー画像下ウィジェットエリアにサムネイル画像のスライドショーを表示します』の『フロントページ』チェックを入れる
• 保存(Save)して完了

画像や動画で詳しく『AFFINGER6(アフィンガー6)のトップページへのスライドショー設定方法』を知りたい人は下の記事が参考になります。

参考AFFINGER6(アフィンガー6)トップのスライドショー設定方法【ヘッダー画像併用方法も】

AFFINGER6(アフィンガー6)のヘッダーデザイン④背景画像と手前の画像を別々で設定するヘッダーデザイン

AFFINGER6(アフィンガー6)のヘッダーを背景画像と手前の画像を別々で設定する手順は下のとおりです。

• 手前側の画像(2200×500px)と背景画像(1000×500px)を用意する
• 『WordPressダッシュボード』→『外観』→『カスタマイズ』の『ヘッダー画像』から現在のヘッダー『新規画像を追加』から手前側の画像を選択する
• カスタマイズの「基本エリア設定』→『headerエリア』の『header（ヘッダー～ヘッダー画像下エリア）全体の背景画像です』で背景画像を選択する
• headerエリアで『背景を繰り返さない』と『背景画像を幅100%のレスポンシブにする』にチェックを入れる
• 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー』を開き『ヘッダー画像をスライドショーで表示する』にチェックを入れる

画像や動画を使って詳しく知りたいあなたは『AFFINGER6(アフィンガー6)ヘッダー画像を手前と背景画像で別々に設定してスライドショーにする方法』を参考にしてください。

参考AFFINGER6(アフィンガー6)ヘッダー画像を手前と背景画像で別々に設定してスライドショーにする方法

AFFINGER6(アフィンガー6)のヘッダー画像のサイズは2200×500px

AFFINGER6(アフィンガー6)のヘッダー画像サイズは2200×500pxです。

2200×500pxの画像を用意する方法は下のとおり。

• Canva有料会員
• PhotoShop
• Illustrator

逆に、有料ソフトや有料会員制画像サイトを利用しないと2200×500pxという特殊な画像サイズを用意するのは難しいかもしれません。

無料で2200×500pxの画像を用意する方法は下の手順です。

• 無料画像サイト『オーダン』や『ぱくたそ』でヘッダー画像にしたい画像を探す
• 無料画像編集サイト(iLOVEIMG等)で画像サイズ変更＆切り抜く

縦と幅が4:1の画像サイズ自体が少ないので、あなたが希望するイメージ画像で2200×500pxを用意するのはかなり大変かもです。

ヘッダー画像の高さ調整方法

AFFINGER6(アフィンガー6)でヘッダー画像の高さの調整方法は下の手順で簡単にできます。

• 『WordPressダッシュボード』→『外観』→『カスタマイズ』を開く
• カスタマイズの『ヘッダー画像』からヘッダー画像エリア『ヘッダー画像エリア最低の高さ（px）』『スマホ（599px以下）』に任意のpx数を入力する

ヘッダー画像自体が2200×500pxなので0～500pxの間で調整すると良いです。

AFFINGER6(アフィンガー6)のヘッダーメニューの設定方法

AFFINGER6(アフィンガー6)のヘッダーメニューの設定方法は下の手順です。

• 『WordPressダッシュボード』→『外観』→『メニュー』を開く
• メニュー名とメニュー設定でメニューの位置『ヘッダーメニュー』にチェックを入れて『メニュー作成』する

メニューは複数作成して『ヘッダーメニュー』には固定ページだけ、『スマホスライドメニュー』には任意の記事を表示するなど別々の設定もできます。

AFFINGER6(アフィンガー6)のスマホメニューの設定方法

AFFINGER6(アフィンガー6)のスマホメニューの設定方法は下の手順です。

• 『WordPressダッシュボード』→『外観』→『メニュー』を開く
• メニュー名とメニュー設定でメニューの位置『スマホスライドメニュー』にチェックを入れて『メニュー作成』する

スマホスライドメニューをPC上で確認する方法

PC上でスマホスライドメニューがどのように表示されているのか確認するには、下の2つの方法があります。

• 『外観』→『カスタマイズ』を開き、左下のスマホアイコンをクリックする
• サイトを開いてF12を押す(パソコンによってはFnキー＋F12)

いずれかの方法でスマホでの表示を確認しながら好みのメニューを設定してみて下さい。

AFFINGER6(アフィンガー6)のヘッダー画像が表示されないときの対処方法

ヘッダー画像が表示されないときの対処方法は下のとおり2つあります。

• 『カスタマイズ』→『ヘッダー画像』→ヘッダーエリアの高さを指定する
• 『カスタマイズ』→『ヘッダー画像』→『画像を選択』からPNG透過画像を設定する

AFFINGER6(アフィンガー6)は現在β版のためヘッダー画像の高さの微調整で不具合があります。

ヘッダー画像や背景画像を設定しても上手く反映されないことが多いので注意して下さい。

今後アップデートで修正される可能性が高いので、このサイトでも継続してアップデートしてこの不具合が解消されればお伝えしますね。

AFFINGER6(アフィンガー6)のヘッダーカードの設定方法

AFFINGER6(アフィンガー6)のヘッダーカードの設定方法は下の手順です。

• 『WordPressダッシュボード』→『AFFINGER管理』→『ヘッダー下/おすすめ』を開く
• ヘッダー/おすすめの『ヘッダーカード』の項目を探す
• ヘッダーカードを設定したい枚数だけ『画像』『テキスト』『リンク先URL』を入力してSaveする(最大4枚まで)

画像や動画でもっと詳しいAFFINGER6のヘッダーカードの設定方法を知りたいあなたは下の記事が参考になります。

参考AFFINGER6『ヘッダーカード』の設置＆カスタマイズ方法【画像サイズ1200×630px】

ヘッダーカードの画像サイズは1200×630px

ヘッダーカードを設定するときには画像を用意する必要があります。

アフィンガー6のヘッダーカードの画像サイズは1200×630pxがちょうどよく表示されるサイズです。

ちなみにブログカードについての設定方法は下の記事が参考になります。

参考【コレで解決】AFFINGER6(アフィンガー6)ブログカード設定をすべて解説【画像大きく表示】

画像を1200×630pxに調整する方法

ちなみに画像を任意のサイズに調整する方法も合わせて紹介しておきます。

• iLOVEIMGへ移動
• 用意した画像をiLOVEIMGの『画像サイズを変更』で横幅1200pxに変更
• 変更した画像をiLOVEIMGの『画像の切り抜き』で1200px×630pxに切り抜く

もし、お金に余裕があるのならCanvaの有料会員になるのがおすすめです。

理由は、サイズ指定した画像を簡単に作成できるから。その他にもおすすめの理由が下のとおりあります。

• アイキャッチ画像を作成するのに便利
• 図解や説明画像も豊富な素材から作成できる
• ブラウザで完結するからソフトのダウンロードやアップデートが不要

AFFINGER6(アフィンガー6)のヘッダーロゴの設定方法とロゴ画像サイズ

AFFINGER5(アフィンガー5)やAFFINGER6(アフィンガー6)でヘッダーロゴ画像を設定する方法は下の手順です。

• ヘッダーロゴ画像を用意する(CanvaやPhotoscapeなどで作成)
• WordPressダッシュボード『外観』→『カスタマイズ』からロゴ画像を設定する

またAFFINGER(アフィンガー)のロゴ画像サイズのおすすめは600×200pxです。

【まとめ】ヘッダー周りを完璧に設定してサイトの顔にしよう

ヘッダー周りは読者の目に最初に入ってくるコンテンツです。

つまりここであなたが狙う読者に刺さるヘッダーコンテンツを用意しておけば回遊率も上がり、ブログ自体も覚えてもらえます。気合をいれてしましょう。

またブログ初心者やアフィンガー初心者で初期設定やカスタマイズ方法がわからないあなたには『アフィンガーの完璧なる初期設定全集』『AFFINGER(アフィンガー)を手足のように使いこなす使い方とカスタマイズ方法』が参考になります。