AFFINGER   ※当サイトのコンテンツには広告が含まれる場合があります。

ヘッダー画像を固定表示にする方法【AFFINGER6】

2022-06-12 yume-tada

how-to-pin-header-image

ヘッダー画像を固定にしたデザインにしたい。

findout
お調べさん
ゆめただのり
ゆめただ

そんなお悩みにお答えします。

本記事でわかるコト

AFFINGER6(ACTION)で、ヘッダー画像を1枚で固定表示する設定方法です。

メニューも画像の中に表示する、企業向けサイトにも使われていて、応用ができるでデザインです。

この記事を書いた人【ゆめただ】

この記事を書いた人
track?id=8172&type=classic&u=c91cff99 76c1 4433 bf07 e4daf5c3bf1b

完成イメージ

トップのヘッダー画像を固定表示にするデザインです。

メニューも画像の中に表示する、企業向けサイトにも使われているデザインで、応用が効く方法です。

\完成イメージはこちら/

AFFINGER6のヘッダー領域

最新のヘッダー領域の仕様です。

ヘッダー画像は、ヘッダーメニューの下からおすすめカードの手前までのエリアに表示されます。

ヘッダー画像領域を使って、ヘッダー全面に画像を表示することはできません。

このため、「headerエリア」を使います

AFFINGER6-header-area
AFFINGER6のヘッダー仕様

設定方法

ゆめただのり
ゆめただ

具体的な設定方法です。

headerエリアの設定

管理画面

【外観】-【カスタマイズ】

 管理画面の「外観」ー「カスタマイズ」をクリックします。

WordPressメニュー1

管理画面

 管理画面の「気骨リア設定」ー「headerエリア」をクリックします。

WordPressメニュー2
52fb26f4cb8ff5e601d331b0708dbe1c

ここで、headerエリアの背景画像を設定します。

設定した画像が、一面に表示されます。

推奨サイズは、2200×500となっています。

表示されるのは、画面サイズに合わせて変わります。

画像の中央部分が表示されますので、1280x960以上の画像を用意します。

WordPressメニュー4

ヘッダーエリア画像の設定

管理画面

 管理画面の「基本エリア設定」ー「ヘッダーエリア」をクリックします。

ヘッダーエリア背景画像には何も設定しません。

画像設定が無いことを確認してください。

背景色も設定しません。

WordPressメニュー5

ヘッダー画像の設定

ヘッダー画像の設定をしていきます。

管理画面

 管理画面の「カスタマイズ」ー「ヘッダー画像」をクリックします。

WordPressメニュー6

ヘッダー画像、ヘッダー画像の後ろの背景画像は設定しません。

設定画像が無いことを確認してください。

WordPressメニュー7

次にヘッダー画像エリアの最低の高さを指定します。

WordPressメニュー8

ここで設定する値は、このように実際にheader画像の実際の高さを調べて設定します。

一度画像を設定してから、次の手順で調べます。

サイトをChrome表示して、F12キーを押します

カーソルアイコンをクリックし、その後矢印カーソルをヘッダー画像領域に合わせると、高さがわかります。

header-area1

ヘッダー画像の設定は以上です。

追加CSSにコードを追加する

最後にコードを追加します。

管理画面

 管理画面の「カスタマイズ」ー「追加CSS」をクリックします。

WordPressメニュー9

このように、コードを追加します。コピペでOKです。

@media print, screen and (min-width: 960px) {

/* header背景画像の固定表示 */
#header-full {
  background-attachment: fixed !important;
 background-size: auto 660px !important;
}
}
ゆめただのり
ゆめただ

以上で作業は終了です。固定表示のヘッダー画像で

差別化しちゃいましょう。

-AFFINGER