Customize AFFINGER

AFFINGER6 カスタマイズ【ヘッダー画像にサイト情報とヘッダーメニューを表示】おしゃれなサイトの定番!?

当ページのリンクには広告が含まれています。

AFFINGER6 カスタマイズ【ヘッダー画像にサイト情報とメニューを表示】おしゃれなサイトの定番!?

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

AFFINGER6のカスタマイズでヘッダー画像にサイト情報(サイト名・サイトロゴ・キャッチフレーズ)とヘッダーメニューを表示させる方法を初心者さん向けにご紹介します。

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

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

ヘッダーの画像内にサイト情報とメニューを表示させておしゃれ感をアップさせちゃいましょう。^^/

こんな方におすすめ!

  • ブログ初心者
  • WordPressテーマAFFINGER6を使っている。
  • トップページをちょっとおしゃれにしたい!(笑)

この記事でわかること!

  • headerエリアに設定するヘッダー用画像を準備する
  • headerエリアに画像を設定する
  • サイト情報とヘッダーメニューの文字色設定
    1. サイト情報(サイト名・サイトロゴ・キャッチフレーズ)の文字色設定
    2. ヘッダーメニューの文字色設定
  • 各ページごとのヘッダー画像の高さ設定
    1. 共通設定:ヘッダー画像の高さ設定
    2. トップページ専用設定:ヘッダー画像の高さ設定
  • まとめ!

それではご覧ください!

基本的なヘッダー画像とオーバーレイヘッダー画像の違い

次の画像は、ヘッダー画像の最も基本的な設定で サイト情報とヘッダーメニューの下にヘッダー画像を表示させるパターンです。

基本パターンのヘッダー画像イメージ

上の設定方法をしてみたい方は下の画像をクリックしてください。^^/「解説記事に飛びます」

yajirusi-sita-80x40

この記事でご紹介するヘッダー画像の設定は サイト情報とヘッダーメニューをヘッダー画像の中に表示させるパターンです。

ヘッダー画像にサイト情報とメニューを表示させたイメージ

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

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

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

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

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

購入方法で迷ったら…こちらで確認【特典付きを購入しよう!】

headerエリアに設定するヘッダー用画像を準備する

headerエリアに設定するヘッダー用の画像を準備します。

画像は メディアライブラリに保存します。この記事の設定では「2000x700px」で使用しています。AFFINGER管理でのデフォルト値は「2200x500px」を推進していますが表示させたい部分の大きさによって微調整が必要です。今回のサンプルでは、リンゴマークをしっかり表示させるため上記の高さに調整しました。(詳細は後述します)

基本的には2000以上あればOKだと思います。(画面を横方向に広げて表示したときに画像が切れなければOKです)

それでは画像をメディアライブラリに追加していきましょう。

※ 既に 画像がメディアファイルにあるばいはこの章は飛ばして次の章をご覧ください。

『WordPress管理>ダッシュボード>メディア>新規追加』をクリックします。

以下の画面が表示されます。

『ファイルを選択』をクリックします。

メディアのアップロード
yajirusi-sita-80x40

任意のデバイスからヘッダー用画像をアップロードします。

画像の準備は以上です。

headerエリアに画像を設定する

「header(ヘッダー~ヘッダー画像下エリア)全体のエリアです」に画像を設定します。

カスタマイザーを起動します。

『WordPress管理>ダッシュボード>外観>カスタマイズ』をクリックします。

WordPress管理:外観|カスタマイズ
yajirusi-sita-80x40

カスタマイザーが起動すると 以下の画面が表示されます。

左から順番にメニュータブを選択して進みます。

『基本エリア設定>headerエリア>』をクリックします。

基本エリア設定

カスタマイザー:基本エリア設定

headerエリア

カスタマイザー:基本エリア設定|headerエリア

画像を選択

カスタマイザー:基本エリア設定|headerエリア|header(ヘッダー~ヘッダー画像下エリア)全体のエリアです

画像を選択

  • 『画像選択』ではメディアライブラリーにアップロードした画像を選択します。
  • 『背景画像を幅100%のレスポンシブにする』にチェックをいれる▶︎おすすめ!
  • 『背景画像を暗くする』にチェックをいれる▶︎おすすめ!
yajirusi-sita-80x40

設定終了後、『公開』をクリックして完了です。

以上で、header(ヘッダー~ヘッダー画像下エリア)全体のエリアに画像が設定されました。

header(ヘッダー~ヘッダー画像下エリア)全体のエリア|画像設定デフォルト

この状態ではヘッダーの高さがデフォルトの状態なので…

  • サイト情報とヘッダーメニューの文字色設定
  • 各ページごとのヘッダー画像の高さ設定

この2項目を次の章で設定していきます。

サイト情報とヘッダーメニューの文字色設定

この章では、ヘッダー画像に重なったサイト情報とヘッダーメニューの文字色の設定をご紹介します。
カスタマイザーでの作業になります。ヘッダー画像との色合いを確認しながら設定しましょう。

カスタマイザーの起動手順は割愛します。

サイト情報(サイト名・サイトロゴ・キャッチフレーズ)の文字色設定

サイト情報(サイト名・サイトロゴ・キャッチフレーズ)の文字色の設定をします。

※ サイト情報の文字色以外の各種設定はこの記事では省きます。

カスタマイザーを起動します。

左から順番にメニュータブを選択して進みます。

『ロゴ画像 / サイトタイトル』をクリックします。

ロゴ画像 / サイトタイトル

カスタマイザー:ロゴ画像 / サイトタイトル

文字色を設定

カスタマイザー:ロゴ画像 / サイトタイトル|各種設定

文字色を設定

  • サイトタイトルとキャッチフレーズの文字色:サンプルでは #ffffff(白)
  • スマホヘッダーのタイトル色:サンプルでは #ffffff(白)
yajirusi-sita-80x40

設定終了後、『公開』をクリックして完了です。

ヘッダーメニューの文字色設定

ヘッダーメニューの文字色を設定します。

※ ヘッダーメニューの文字色以外の各種設定はこの記事では省きます。

カスタマイザーを起動します。

左から順番にメニュータブを選択して進みます。

『- 各メニュー設定>PCヘッダーメニュー』をクリックします。

- 各メニュー設定

カスタマイザー:- 各メニュー設定

PCヘッダーメニュー→

カスタマイザー:- 各メニュー設定|PCヘッダーメニュー

文字色を設定

カスタマイザー:- 各メニュー設定|PCヘッダーメニュー|各種設定

文字色を設定

  • 文字色:サンプルでは #ffffff(白)

※ メニューの幅や枠に関する設定が 色々できます。お好みで設定してください。^^

yajirusi-sita-80x40

設定終了後、『公開』をクリックして完了です。


ヘッダーメニューのカスタマイズについて詳しく知りたい方におすすめです。是非、ご覧ください。

ちょっとマニアックですが…好きな人がたくさんいるはず!「ヘッダーメニューでこんなこともできます」

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

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

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

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

購入方法で迷ったら…こちらで確認【特典付きを購入しよう!】

各ページごとのヘッダー画像の高さ設定

各ページごとのヘッダー画像の高さ設定をご紹介します。各ページとは、トップページ(フロントページ)と下層ページを指します。トップページのみ下層ページとは別に高さ設定をすることができます。

手順は以下の通りです。

  • AFFINGER 管理画面から共通設定となるヘッダー画像の高さを設定します。
  • トップページを下層ページとは異なる高さに設定します。

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

共通設定:ヘッダー画像の高さ設定

AFFINGER管理画面から共通設定となるヘッダー画像の高さを設定します。

『WordPress管理>ダッシュボード>AFFINGER 管理>ヘッダー』をクリックします。

以下の画面が表示されます。

サンプル画像をベースにした設定になリます。(目安として参考にしてください)

ヘッダーナビゲーション項目の設定

  • スマホ(タブレット含む)のみ:デフォルトのまま(デフォルト100)
  • PCのみ:500 に変更(デフォルト100)

※ サンプルに用いた画像サイズ:2000x700(px)|サイト情報とヘッダーメニューを中央に配置(赤破線枠部)

赤枠部に数値を入力して 必要に応じて赤破線枠部にチェックを入れます。

AFFINGER管理:ヘッダー|ヘッダーナビゲーション
yajirusi-sita-80x40

設定終了後、『Save』をクリックして共通設定は完了です。

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

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

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

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

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


全てのページが同じヘッダー画像の表示高さで良い場合はここまでの設定で完了です。

次の章では、意図的にトップページのみヘッダー画像の高さを変更して下層ページと差別化するための設定をご紹介します。

トップページ専用設定:ヘッダー画像の高さ設定

トップページを下層ページとは異なる高さに設定します。

「共通設定:ヘッダー画像の高さ設定」で設定した高さより小さくすることはできません。(高さを増す方向のみの設定になります)

カスタマイザーを起動します。

左から順番にメニュータブを選択して進みます。

『ヘッダー画像』をクリックします。

ヘッダー画像

カスタマイザー:ヘッダー画像

ヘッダー画像エリア設定

カスタマイザー:ヘッダー画像|各種設定

ヘッダー画像エリア設定

  • ヘッダー画像エリア最低の高さ(px):200 ▶︎ サンプルは 下層ページのヘッダー画像高さより200px大きく設定
  • スマホ(599px以下)高さを分ける場合:無記入
  • トップページのヘッダー画像エリアの高さを画面サイズに応じて最大にする(β)優先:チェックをいれると最優先で画面全体にヘッダー画像が表示されます。(サンプルはチェックを入れていません)
    ヘッダー画像を画面全体に表示させたい方はチェックを入れてください。詳細記事はこちらから…
yajirusi-sita-80x40

設定終了後、『公開』をクリックして完了です。

まとめ!AFFINGER6 カスタマイズ【ヘッダー画像にサイト情報とヘッダーメニューを表示】おしゃれなサイトの定番!?

AFFINGER6の標準機能を使った人気のあるおしゃれな「ヘッダー画像」の設定方法をご紹介しました。メニューの表現と設定場所が少しわかりにくい?!かもしれませんが…設定自体は簡単で初心者さんでも全然大丈夫です。是非、トライしてください!!AFFINGER6なら初心者でもかんたんにおしゃれサイトができます。^^/

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

SWELL

AFFINGER6_おすすめ記事!

26239_affinger6-swell-comparison-4a 1

WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。

19298_affinger6-honest-review-2a 2

AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを徹底解説。有料テーマをはじめて使う初心者の不安を解決!ブログ収益を加速させるオリジナル特典をご用意しました。

3969_affinger6-how-to-buy-2 3

WordPressテーマACTION(AFFINGER6)のおすすめ購入方法を初心者目線でご紹介。また購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。

15446_AFFINGER6-how-to-use-tag-ma-1 4

AFFINGERタグ管理マネージャー4 ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました!表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。

-Customize AFFINGER
-