ヘッダー画像を固定にしたデザインにしたい。
![findout](https://biz-sel.com/wp-content/uploads/2021/07/d434afbeb03cf338d118cb26cf220c65-100x100.png)
![ゆめただのり](https://biz-sel.com/wp-content/uploads/2020/08/yumeada_avatar_sqr-100x100.png)
そんなお悩みにお答えします。
完成イメージ
トップのヘッダー画像を固定表示にするデザインです。
メニューも画像の中に表示する、企業向けサイトにも使われているデザインで、応用が効く方法です。
\完成イメージはこちら/
AFFINGER6のヘッダー領域
最新のヘッダー領域の仕様です。
ヘッダー画像は、ヘッダーメニューの下からおすすめカードの手前までのエリアに表示されます。
ヘッダー画像領域を使って、ヘッダー全面に画像を表示することはできません。
このため、「headerエリア」を使います。
![AFFINGER6-header-area](https://biz-sel.com/wp-content/uploads/2022/06/AFFINGER6-header-area.png)
設定方法
![ゆめただのり](https://biz-sel.com/wp-content/uploads/2020/08/yumeada_avatar_sqr-100x100.png)
具体的な設定方法です。
headerエリアの設定
![WordPressメニュー1](https://biz-sel.com/wp-content/uploads/2022/06/313ac63d5881b8adad0033355711c3e9.png)
![WordPressメニュー2](https://biz-sel.com/wp-content/uploads/2022/06/b085439746b19fe39010713e02151e6f.png)
![](https://biz-sel.com/wp-content/uploads/2022/06/52fb26f4cb8ff5e601d331b0708dbe1c.png)
ここで、headerエリアの背景画像を設定します。
設定した画像が、一面に表示されます。
推奨サイズは、2200×500となっています。
表示されるのは、画面サイズに合わせて変わります。
画像の中央部分が表示されますので、1280x960以上の画像を用意します。
![WordPressメニュー4](https://biz-sel.com/wp-content/uploads/2022/06/193121aea517dfe8c8f9062f8d48120d.png)
ヘッダーエリア画像の設定
ヘッダーエリア背景画像には何も設定しません。
画像設定が無いことを確認してください。
背景色も設定しません。
![WordPressメニュー5](https://biz-sel.com/wp-content/uploads/2022/06/8fd68a9f12586d003c3c856f19bfd9b2.png)
ヘッダー画像の設定
ヘッダー画像の設定をしていきます。
![WordPressメニュー6](https://biz-sel.com/wp-content/uploads/2022/06/7b8cdabc8010f8baf0251f8054d2ebfa.png)
ヘッダー画像、ヘッダー画像の後ろの背景画像は設定しません。
設定画像が無いことを確認してください。
![WordPressメニュー7](https://biz-sel.com/wp-content/uploads/2022/06/0481dbddb955f52aa722cdc7f93881b6.png)
次にヘッダー画像エリアの最低の高さを指定します。
![WordPressメニュー8](https://biz-sel.com/wp-content/uploads/2022/06/181742ccf0c172d36a4a50ec6740a71a.png)
ここで設定する値は、このように実際にheader画像の実際の高さを調べて設定します。
一度画像を設定してから、次の手順で調べます。
サイトをChrome表示して、F12キーを押します。
カーソルアイコンをクリックし、その後矢印カーソルをヘッダー画像領域に合わせると、高さがわかります。
![header-area1](https://biz-sel.com/wp-content/uploads/2022/06/header-area1.png)
ヘッダー画像の設定は以上です。
追加CSSにコードを追加する
最後にコードを追加します。
![WordPressメニュー9](https://biz-sel.com/wp-content/uploads/2022/06/502a68bbcf9fa900d7560b49dc5f9da6.png)
このように、コードを追加します。コピペでOKです。
@media print, screen and (min-width: 960px) {
/* header背景画像の固定表示 */
#header-full {
background-attachment: fixed !important;
background-size: auto 660px !important;
}
}
![ゆめただのり](https://biz-sel.com/wp-content/uploads/2020/08/yumeada_avatar_sqr-100x100.png)
以上で作業は終了です。固定表示のヘッダー画像で
差別化しちゃいましょう。
\こちらの記事も要チェック/
こちらもチェック
-
-
AFFINGER6トップページのカスタマイズ方法【オシャレに差別化】
続きを見る
こちらもチェック
-
-
AFFINGER6が初心者には難しいと言われるワケとおすすめする5つの理由
続きを見る