AFFINGER6カスタマイズ

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

\当サイト限定豪華7特典付き/

AFFINGER5(WING)をみる

/今すぐ申し込む\

AFFINGER6(アフィンガー6)のヘッダーデザイン4選&カスタマイズ【画像サイズやメニューも解説】
悩む人

  • AFFINGER6ってどんなヘッダーにできるの?
  • Cocoonから移行しておしゃれなサイトにしたい!
  • アフィンガー6を使いたいけどカスタマイズは簡単なの?

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

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

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

管理人ハチ
私も1年前にAFFINGER5を購入しこのAFFINGER6(アフィンガー6)に乗り換えて5ヶ月かなりカスタマイズに苦労しました。

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

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

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

当サイト限定豪華7特典

今すぐゲット

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

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

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

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

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

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

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

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

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

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

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

続きを見る

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

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

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

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

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

こちらもCHECK

AFFINGER6(アフィンガー6)でヘッダー画像を全体に大きく表示する方法【ヘッダーを無色透明にする方法】
AFFINGER6(アフィンガー6)でヘッダー画像を全体に大きく表示する方法【ヘッダーを無色透明にする方法】

続きを見る

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

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

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

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

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

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

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

続きを見る

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

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

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

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

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

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

続きを見る

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

https://youtu.be/FCUoolSiKP8

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

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

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

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

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)ヘッダー画像を手前と背景画像で別々に設定してスライドショーにする方法
AFFINGER6(アフィンガー6)ヘッダー画像を手前と背景画像で別々に設定してスライドショーにする方法

続きを見る

当サイト限定豪華7特典

今すぐゲット

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

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

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

  • Canva有料会員
  • PhotoShop
  • Illustrator
管理人ハチ
Canva有料会員になると画像サイズ2200×500pxの画像を簡単に用意できます。

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

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

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

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

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

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

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

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

当サイト限定豪華7特典

今すぐゲット

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

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

  • 『WordPressダッシュボード』→『外観』→『メニュー』を開く
  • メニュー名とメニュー設定でメニューの位置『ヘッダーメニュー』にチェックを入れて『メニュー作成』する
管理人ハチ
この他にもヘッダーメニュー(横列)やフッターメニューも設定可能です。

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

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

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

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

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

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

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

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

当サイト限定豪華7特典

今すぐゲット

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

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

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

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

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

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

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

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

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

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

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

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

続きを見る

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

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

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

管理人ハチ
実は当初は1200×800pxのサイズかなと思っていたのですが、どうしても上下が微妙に切れるので調整しているとこのサイズに落ち着きました。

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

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

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

続きを見る

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

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

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

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

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

  • アイキャッチ画像を作成するのに便利
  • 図解や説明画像も豊富な素材から作成できる
  • ブラウザで完結するからソフトのダウンロードやアップデートが不要
管理人ハチ
このサイトのアイキャッチや図解はすべてCanvaで作成しています。パワポで高い更新料を払うならCanvaのほうが安上がりですよ。

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

\当サイト限定豪華7特典付き/

AFFINGER5(WING)をみる

/今すぐ申し込む\

AFFINGER5おすすめランキング

AFFINGER5(アフィンガー5)

通常版のAFFINGER5(アフィンガー5)で価格は14,800円。今なら期間限定で4000円相当のプラグインも無料で付いてきます。

また当サイト限定特典も多数セットにしているので、今すぐにでも稼ぎたい、結果を出したい人はまずこの通常版のAFFINGER5(アフィンガー5)を試してみましょう。

AFFINGER PACK3(WING対応)

AFFINGER5(アフィンガー5)と『AFFINGERタグ管理マネージャー3』『ABテストプラグイン』2つのプラグインのセットになったオールインワンパックで価格は39,800円。単品で買うより13,600円お得!

どの記事からどのように読者が行動しているのかが丸見えになり導線を貼りやすくなるので費用対効果が高いセットになります。

  • この記事を書いた人

hachi

副業ブロガー / 現役看護師【経歴】国立大学▶︎公務員(保健師)▶︎縦社会と副業禁止で退職決意▶︎精神科看護師▶︎4サイト運営し月4万円収益まで到達(2021年5月現在)▶︎●嫁1太郎1姫と暮らす

-AFFINGER6カスタマイズ