AFFINGER

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

2022-01-04

ヘッダーデザインの設定方法|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 バナー

 

  • この記事を書いた人
ucozi

ucozi(うこじ)

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

-AFFINGER
-,

Copyright © ucozi.com , All Rights Reserved.