ヘッダー

【ヘッダー画像パターン1】"ヘッダー画像"と"画像スライドショー"の設定方法

2021年2月17日

AFFINGERに標準搭載されたヘッダーデザインを紹介」ではAFFINGERに標準装備されている数種類のヘッダーデザインについて紹介しました。ここではその中の「ヘッダー画像」と「画像スライドショー」の設定方法をご紹介します。

完成系はこんな感じです。※"画像スライドショー"を選ぶ場合でも手順1から進めてください。

\ ヘッダー画像 /

ヘッダー画像の完成図

\ 画像スライドショー /

画像スライドショーの完成図

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

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

Canvaの紹介記事へ

ヘッダー画像の設定

ここでは「ヘッダー画像」の設定をしていきましょう。画像を1枚表示する方法です。

難易度:普通・・・画像のサイズ調整に手間取るかも...

\ ビフォー /

ヘッダー画像の設定(ビフォー)PC
ヘッダー画像がない状態(PC)

\ ビフォー /

ヘッダー画像の設定(ビフォー)スマホ
ヘッダー画像がない状態(スマホ)

\ アフター /

ヘッダー画像の設定(アフター)PC
ヘッダー画像を設定した状態(PC)

\ アフター /

ヘッダー画像の設定(アフター)スマホ
ヘッダー画像を設定した状態(スマホ)

画像を準備する

まずは、ヘッダーに表示したい画像を探しましょう。フリー素材サービスなどを活用ください。幅は2200px以上あるような大きな画像が推奨されています。(個人的には最低1920pxあればよいと思います。)

今回はフリー画像サービス"pixabay"からこの画像を借りてきました。

https://pixabay.com/ja/illustrations/%E9%9B%B2-%E5%A4%AA%E9%99%BD-%E7%A9%BA-%E7%B4%99-%E6%97%A5%E5%85%89-%E6%97%A5-5880610/
https://pixabay.com/get/g2edb8f95508f835cd4b77b5bb5193b5ecf1207cedea782f0bf22d77d211bfd694c681ed7c9c44efb75cdca26bf39fce0_1920.png?attachment=
Syaibatul HamdiによるPixabayからの画像 

画像を試しにあげてみる(仮アップロード)

選んだ画像をひとまずそのままサイトに表示してみます。【カスタマイズ画面】【ヘッダー画像】へ移動してください。

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

"現在のヘッダー"の箇所の"新規画像を追加"ボタンから画像をアップロードします。そして"選択して切り抜く"ボタンを押します。画像をお好みの位置で切り抜いてください。位置が決まったら"画像切り抜き"ボタンを押しましょう。最後に"公開"ボタンを押します。

これで一応、画像は表示されました。

ヘッダー画像切り抜き画面1
ヘッダー画像仮適応

画像のサイズを調整する

さきほど切り抜いた画像のサイズは"2200px×500px"になっています(初期設定が"2200px×500px"のため)。多くの人にとってこのサイズはちょっと窮屈ではないでしょうか。なので、縦のサイズを広げてみましょう。

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

"ヘッダー画像"の箇所の"ヘッダー画像トリミングの高さ(デフォルトは500)"の値を変更します。600、700、800、など最適だと思う数値を入れてください。入力したら"Save"ボタンを押します。

ヘッダー画像設定画面

確認

もう一度"手順2"へ戻り画像をアップロード→切り抜きます。先ほどより切り抜きサイズが大きくなっているはずです。

もし、切り抜きサイズに納得いかない場合は"手順3"に戻り切り抜きサイズを調節します。調節が終わり納得いく画像が表示できたら出来上がりです。

"ヘッダー画像の横幅を100%にする"にチェックを入れると画像がブラウザいっぱいに広がります。画像1枚の場合はこちらを推奨。

【ダッシュボード】→【外観】→【カスタマイズ】 > 【 ヘッダー画像】> "ヘッダー画像の横幅を100%にする"

ヘッダー画像切り抜き画面2

\ 完成1 /

ヘッダー画像完成1
"ヘッダー画像の横幅を100%にする"にチェックを入れない状態

\ 完成 2/

ヘッダー画像完成2
"ヘッダー画像の横幅を100%にする"にチェックを入れた状態

もう一手間

画像にリンクを貼ることも可能です。"ヘッダー画像" > "ヘッダー画像のリンク先URL"でリンクを設定できます。

【ダッシュボード】→【AFFINGER管理】→【ヘッダー】 > "ヘッダー画像" > "ヘッダー画像のリンク先URL"

画像スライダー(フェードイン画像)の設定

ここでは画像スライダーの設定方法をご紹介します。ヘッダー画像を複数に増やしてそれらをスライドショーで動かします。

画像を準備する

追加する画像を探します。

先ほどと同様pixabayからこの2枚を探してきました。

Syaibatul HamdiによるPixabayからの画像
Syaibatul HamdiによるPixabayからの画像
Syaibatul HamdiによるPixabayからの画像 

画像をあげる

"手順2"の要領でもう一度画像を追加します。【カスタマイズ画面】の【ヘッダー画像】へ移動してください。

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

"現在のヘッダー"の箇所の"新規画像を追加"ボタンから画像をアップロードします。そして"選択して切り抜く"ボタンを押します。画像をお好みの位置で切り抜いてください。位置が決まったら"画像切り抜き"ボタンを押しましょう。最後に"公開"ボタンを押します。

動かす設定をする

画像をアップロードしただけではスライドしません。動く設定をオンにしましょう。"画像スライドショー設定"へ移動します。

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

"ヘッダー画像をスライドショーで表示する"にチェックを入れます。

スライドショーの表示方法は3種類の中から選ぶことができます。表示速度はミリ秒単位で設定できます。例えば5000ミリ秒は5秒です。

"横並びにする"にチェックを入れると順番待ちの画像が横に表示されます。("ヘッダー画像の横幅を100%にする"にチェックを入れると効きません。)

ヘッダー画像スライドショー設定

\ 完成 /

ヘッダー画像のスライドショー

以上、"ヘッダー画像"と"画像スライドショー"の設定方法についてでした!次はロゴ部分の設定を行います。

ロゴ部分の設定はこちら

AFFINGERを購入する

詳細はこちら

-ヘッダー