ヘッダー

【ヘッダー画像パターン4】"背景が固定され手前の画像が動くヘッダー"の設定方法

2021年2月20日

AFFINGERに標準搭載されたヘッダーデザインを紹介」ではAFFINGERに標準装備されている数種類のヘッダーデザインについて紹介しました。ここではその中の"背景が固定され手前の画像が動くヘッダー"の設定方法をご紹介します。

AFFINGERの公式販売サイト(STINGER STORE)でも使われているヘッダーのデザインですね。

完成系はこんな感じです。

\ ビフォー /

ヘッダー画像設定前PC
初期状態(PC)

\ ビフォー /

ヘッダー画像設定前スマホ
初期状態(スマホ)

\ アフター /

背景を固定してスライドするヘッダー画像(PC)
背景が固定され手前の画像が動くヘッダー(PC)

\ アフター /

背景を固定してスライドするヘッダー画像(スマホ)
背景が固定され手前の画像が動くヘッダー(スマホ)

[PR]AFFINGERで使う画像はCanvaで作るのがおすすめ!
超ラク!超おしゃれ!

画像編集サービス
  • こんなに使えて基本利用料無料!
  • おしゃれなテンプレートが豊富!
  • アプリ版のダウンロードも無料!

Canvaの紹介記事へ

背景を固定して手前の画像をスライドさせるヘッダー画像の設定方法

さっそく設定方法を解説していきます。順番としては手前のスライドを表示させ、そのあと背景を設定します。

注意:透過画像(png)が必要になります。イラレ等の画像編集ソフトを持っているか、Canvaだったら有料会員の機能が必要になってきます。

難易度:難しい・・・サイトに合った画像を準備するのがとても難しい。

画像を表示するエリアのサイズを決める

画像を表示するエリアのサイズを決める

まず、ヘッダーに表示する画像の大きさを決めまましょう。

デフォルトのサイズは幅が2200px、縦が500pxになっています("2200px × 500px")が、これが窮屈だと思ったら縦の長さを広げます。横幅はそのままで大丈夫。

画像のサイズは【AFFINGER管理】の【ヘッダー画像】の項目で変更できます。

【ダッシュボード】→【AFFINGER管理】→【ヘッダー】 > 【 ヘッダー画像】

"ヘッダー画像トリミングの高さ"に数値を入れて変更します。600px、700px、800px、900px、1000pxといろいろお試しください。

サイズが決まったらメモしておきましょう。ここでは1000pxでやっていきます。

png形式の画像を準備する

画像のサイズが決まったら今度はそのサイズの画像を準備していきます。上のような背景が透明なpng形式の画像です。サイズは2200px × 1000px。画像形式は必ずpng形式にしてください!

先に述べたように、この形式の画像を作るのはちょっと手間がかかります。イラレ等の画像編集ソフトを持っている or Canvaだったら有料会員の機能が必要になってきます。

画像の作成

画像編集ソフトを起動→先ほどのサイズの新規画像を作成→そこにイラストや文字を配置→最後にpng形式で保存。

画像をアップロード

できあがった画像をサイトにアップロードします。アップロード画面へ行きましょう。

【ダッシュボード】→【外観】→【カスタマイズ】 > 【 ヘッダー画像】> "現在のヘッダー"

"新規画像を追加" > "選択して切り抜く" > "切り抜かない"で画像をアップロードしてください。残りの画像も同じようにアップロードします。最後に"公開"を押します。

スライド機能をオンに

画像をアップロードしただけではスライドしないのでスライド機能をオンにします。"画像スライドショー設定"の項目へ移動しましょう。

【ダッシュボード】→【AFFINGER管理】→【ヘッダー】 > 【画像スライドショー設定】

"ヘッダー画像をスライドショーで表示する"にチェックを入れます。"Save"ボタンを押して保存しましょう。これで画像がスライドするようになったと思います。

背景を設置

ここまで来たらもう少しです。最後に背景を設置しましょう。

フリー素材サービス等から背景になる画像を探します。手前の画像を邪魔しないような背景が望ましいと思います。今回はフリー素材サービスpixabayよりこちらの画像をお借りしてきました。(ちなみにサイズは "1920px ×952px" です。)

Rudy and Peter SkitteriansによるPixabayからの画像

この画像をサイトにアップロードします。アップロード画面へ移動します。

【ダッシュボード】→【外観】→【カスタマイズ】 > 【 基本エリア設定】> 【headerエリア

"画像を選択"よりさきほどの画像をアップロードします。同時に"背景画像を繰り返さない"、"背景画像を幅100%のレスポンシブにする"二つにチェックを入れて"公開"ボタンを押しましょう。

うまくいけばここで完成です。

※このように背景が隠れている場合はすでに他の色設定がなされている状態です。色設定を一つずつ外していきましょう。背景を透明にします。

それぞれの場所へ行き色の項目を空白に"ブランク"にしていきます。欄に入っている文字列を消してください。

すでに設定された色を消す

ロゴ部分:【ダッシュボード】→【外観】→【カスタマイズ】 > 【 基本エリア設定】 > 【ヘッダーエリア】 > "背景色"

メニュー部分:【ダッシュボード】→【外観】→【カスタマイズ】 > 【 各メニュー設定】 > 【PCヘッダーメニュー】 > "背景色"

ヘッダー画像部分:【ダッシュボード】→【外観】→【カスタマイズ】 > 【 ヘッダー画像】 > "ヘッダー画像エリアの背景色"

全て取り除き"公開"ボタンを押したら完成です。

完成!

背景を固定してスライドするヘッダー画像(PC)
背景が固定され手前の画像が動くヘッダー(PC)
背景を固定してスライドするヘッダー画像(スマホ)
背景が固定され手前の画像が動くヘッダー(スマホ)

以上、"背景が固定され手前の画像が動くヘッダー"の設定方法の解説でした。

NEXT:ロゴ部分の設定はこちら

AFFINGERを購入する

詳細はこちら

-ヘッダー