※ 当サイトではアフィリエイト広告を利用しています

AFFINGER

ヘッダーデザインの設定方法|AFFINGER(アフィンガー)を使えば簡単

ヘッダーデザインの設定方法|AFFINGER(アフィンガー)を使えばかんたん
affingerのトップページの作り方を教えて!

本日はこんなお悩みにお答えします。

 

本記事ではWordPress有料テーマ「AFFINGER6」を使ったサイトトップのヘッダーデザインの作り方について解説します。

 

完成系はこんな感じ。

 

画像固定のver.

デザインサンプル

 

画像スライドショーver.

 

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

今回の方法を使えば、10分程度で設定できます!
うこじ
うこじ

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

>> さらに詳しいプロフィールはこちら

 

ヘッダー画像の設定

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

手順は全部で3ステップです。

  1. 画像を準備する
  2. ヘッダー画像を設定する
  3. 画像サイズを調整する

順番に解説します。

 

【ステップ①】画像を準備する

まずは、ヘッダーに使用する画像を準備します。

左右幅2200px以上の画像が推奨されています。

画像素材については、ご自身の手持ち素材を使うか、下記を参照に用意してください。

 

 

今回は「Pexles」からこちらの画像を使用します。

ネットで勝手に捕ってくるのは、著作権の観点からナシですよ。
うこじ
うこじ

 

【ステップ②】ヘッダー画像を設定する

選んだ画像をアップロードします。

WordPressにログインし、「外観」から「カスタマイズ」を選択。

WordPressにログインし、「外観」から「カスタマイズ」を選択

 

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

「ヘッダー画像」を選択

 

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

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

 

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

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

 

画像をお好みの範囲で切り抜きます。

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

範囲が決まったら「画像切り抜き」ボタンわクリック

 

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

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

 

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

これでOKの場合は完成です。
うこじ
うこじ

 

【ステップ③】画像サイズを調整する

AFFINGER では「2200px×500px」がデフォルトのサイズとして設定されています。

ここから上下のサイズを調整したい場合は、以下の手順で設定できます。

 

「AFFINGER 管理」から「AFFINGER 管理」をクリック。

「AFFINGER 管理」から「AFFINGER 管理」をクリック

 

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

「ヘッダー」をクリック

 

「ヘッダー画像エリア」の「トリミング」の値を変更します。

任意の数値を入力したら、下部にある「Save」ボタンをクリック。

「ヘッダー画像」箇所の「ヘッダー画像トリミングの高さ(デフォルトは500)」の値を変更

 

ここでは「2200px×1000px」で設定しました。
うこじ
うこじ

 

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

「2200px×500px」サイズ

「2200px×1000px」サイズ

ヘッダー画像が拡大される感じですね。

 

納得いく画像が表示されたら、左上の「公開」ボタンをクリックして完成です。

もし、サイズがイマイチなときは、再びサイズ調節しましょう。
うこじ
うこじ

 

ヘッダー画像の横幅を100%にする

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

ヘッダー画像の横幅を100%にする」にチェック

 

チェックなし

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

チェックあり

「ヘッダー画像の横幅を100%にする」にチェックを入れた状態

 

ヘッダー画像のリンク先

ヘッダー画像にリンクを設定することも可能です。

「ヘッダー画像エリア」内の「ヘッダー画像のリンク先URL」でリンクを設定できます。

「ヘッダー画像エリア」内の「ヘッダー画像のリンク先URL」でリンクを設定

 

画像スライドショーの設定

これより画像スライドショー設定の方法を紹介します。

スライドショーはヘッダー画像を複数に増やし、それらをスライドショー形式で動かす方法です。

 

手順は全部で4ステップです。

  1. 追加画像を準備する
  2. 追加画像をアップロードする
  3. 画像サイズを調整する
  4. スライドショー設定をする

順番に解説します。

 

【ステップ①】追加画像を準備する

追加する画像を準備します。

先ほどと同じように、左右幅2200px以上の画像を準備します。

ここでは「Pexles」より2枚の追加画像を使用します。

スライドショー用の画像
スライドショー用の画像

 

【ステップ②】追加画像をアップロードする

「外観」から「カスタマイズ」を選択。

「外観」から「カスタマイズ」を選択

 

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

「ヘッダー画像」を選択

 

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

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

 

【ステップ③】画像サイズを調整する

先ほどと同様、「選択して切り抜く」ボタンを押し、画像を好みの範囲で切り抜きます。

 

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

「公開」ボタンを押して確定

 

【ステップ④】スライドショー設定をする

つづいてスライドショー設定です。

「AFFINGER管理」から「AFFINGER管理」を選択。

「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設定マニュアル」では、デモサイトの設定について、テーマのインストールから細かい設定まで、全ての手順について解説しています。

 

  • この記事を書いた人
この記事を書いた人

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-AFFINGER
-,