
本日はこんなお悩みにお答えします。
本記事ではWordPress有料テーマ「AFFINGER6」を使ったサイトトップのヘッダーデザインの作り方について解説します。
完成系はこんな感じ。
画像固定のver.

画像スライドショーver.

「AFFINGER」を使えば、上記のようなおしゃれな設定も、かんたんに作成できます。

✔本記事を書いた人
ucozi(@ucozi_ikeda)
ヘッダー画像の設定
まずは「ヘッダー画像」の設定をしていきます。
手順は全部で3ステップです。
- 画像を準備する
- ヘッダー画像を設定する
- 画像サイズを調整する
順番に解説します。
【ステップ①】画像を準備する
まずは、ヘッダーに使用する画像を準備します。
左右幅2200px以上の画像が推奨されています。
画像素材については、ご自身の手持ち素材を使うか、下記を参照に用意してください。
今回は「Pexles」からこちらの画像を使用します。


【ステップ②】ヘッダー画像を設定する
選んだ画像をアップロードします。
WordPressにログインし、「外観」から「カスタマイズ」を選択。

続いて「ヘッダー画像」を選択します。

「現在のヘッダー」箇所の「新規画像を追加」ボタンをクリックして、画像をアップロードします。

つづいて「選択して切り抜く」ボタンをクリック。

画像をお好みの範囲で切り抜きます。
範囲が決まったら「画像切り抜き」ボタンをクリック。

最後に「公開」ボタンを押して確定します。

これでトップページのヘッダーに画像が表示されました。

【ステップ③】画像サイズを調整する
AFFINGER では「2200px×500px」がデフォルトのサイズとして設定されています。
ここから上下のサイズを調整したい場合は、以下の手順で設定できます。
「AFFINGER 管理」から「AFFINGER 管理」をクリック。

続いて、「ヘッダー」をクリック。

「ヘッダー画像エリア」の「トリミング」の値を変更します。
任意の数値を入力したら、下部にある「Save」ボタンをクリック。


再び【ステップ②】を繰り返すと、先ほどより切り抜きサイズが大きくなっていることご確認できます。
「2200px×500px」サイズ

「2200px×1000px」サイズ

ヘッダー画像が拡大される感じですね。
納得いく画像が表示されたら、左上の「公開」ボタンをクリックして完成です。

ヘッダー画像の横幅を100%にする
「ヘッダー画像の横幅を100%にする」にチェックを入れると画像がブラウザいっぱいに広がります。

チェックなし

チェックあり

ヘッダー画像のリンク先
ヘッダー画像にリンクを設定することも可能です。
「ヘッダー画像エリア」内の「ヘッダー画像のリンク先URL」でリンクを設定できます。

画像スライドショーの設定
これより画像スライドショー設定の方法を紹介します。
スライドショーはヘッダー画像を複数に増やし、それらをスライドショー形式で動かす方法です。
手順は全部で4ステップです。
- 追加画像を準備する
- 追加画像をアップロードする
- 画像サイズを調整する
- スライドショー設定をする
順番に解説します。
【ステップ①】追加画像を準備する
追加する画像を準備します。
先ほどと同じように、左右幅2200px以上の画像を準備します。
ここでは「Pexles」より2枚の追加画像を使用します。


【ステップ②】追加画像をアップロードする
「外観」から「カスタマイズ」を選択。

「ヘッダー画像」を選択。

「現在のヘッダー」の「新規画像を追加」ボタンをクリックし、追加画像をアップロードします。

【ステップ③】画像サイズを調整する
先ほどと同様、「選択して切り抜く」ボタンを押し、画像を好みの範囲で切り抜きます。

最後に「公開」ボタンを押して確定します。
【ステップ④】スライドショー設定をする
つづいてスライドショー設定です。
「AFFINGER管理」から「AFFINGER管理」を選択。

続いて「ヘッダー」を選択。

「ヘッダー画像をスライドショーで表示する(※記事スライドショー有効化時は選択できません)」にチェック。

スライドショーの表示方法は3つの中から選べます。
フェードイン・アウト
右から左
左から右
表示速度はミリ秒単位で設定できます。
例えば、3000ミリ秒は約3秒です。

横並びにする
「横並びにする(※表示方法がスライド時のみ)」にチェックを入れると、次の画像が横に表示されます。
※「ヘッダー画像の横幅を100%にする」にチェックが入っていると実行されません。


「AFFINGER6」を使えば、ヘッダーデザインはかんたん
WordPress有料テーマ「AFFINGER6」を使えば、かんたんにサイトトップのヘッダーデザインをおしゃれにアレンジすることができます。
今回紹介した設定のほかにも、以下のようなデザインが可能。
- YouTube背景
- 記事スライドショー
- コンテンツ作成タイプ
気になる方は、AFFINGER公式サイトでチェックしてみてください。
また、AFFINGER を用いた自分ブログ・ホームページの作り方は、以下の記事で詳しく解説しています。
本日は以上です。
この記事がどなたかのお役に立てたら嬉しいです。
最後までお読みいただき、ありがとうございました。
ホームページの始め方を知りたい方へ
当ブログでは、「ヨガインストラクターのためのホームページの始め方」を紹介しています!
ヨガスクールの中の人が確実で信頼性の高い情報をお届けしていますので、これから始める方は、こちらの完全ガイドをぜひご覧ください!
また、AFFINGER(アフィンガー)というWordPressテーマの購入特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」という独自のプレゼントもご用意しています(※単体での購入も可)。
ホームページの始め方・立ち上げに関する、ご質問・ご相談はボクのInstagramのDM(@ucozi_ikeda)までお気軽にどうぞ!
WordPressのテーマ
『AFFINGER 6(アフィンガー)』
購入をご検討の方へ。
当サイトから『AFFINGER 6(アフィンガー)』をご購入いただいた方の特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」を提供しております。
※すでに『AFFINGER 6(アフィンガー)』を購入済みの方には、有料でも販売しています。
「ヨガインストラクターのためのAFFINGER設定マニュアル」では、デモサイトの設定について、テーマのインストールから細かい設定まで、全ての手順について解説しています。