ヨガスクールの中の人が教える、ブログのつくり方

AFFINGER5

ヘッダー画像を設定しよう|AFFINGER5(アフィンガー5)デザイン済みデータの設定

2020-12-26

ヘッダー画像を設定しよう|AFFINGER5(アフィンガー5)デザイン済みデータの設定

AFFINGER5(アフィンガー5)のデザイン済みデータをインストールしたけど、ヘッダー画像が表示されてない!

この続きの設定方法を教えて!

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

 

記事の内容

  • デザイン済みデータをインストールしてもヘッダー画像は反映されない
  • 手順1:背景用の画像を用意する
  • 手順2:デザイン済みデータのヘッダー部分を設定しよう
  • おまけ:ヘッダー部分のテキストを変更するには?

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

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

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

 

AFFINGER5(アフィンガー5)のデザイン済みデータを導入しただけでは、サンプルのようなおしゃれなサイトはできあがりません。

自分でカスタマイズをする必要があります。

 

※デザイン済みデータ配布サイトで表示されているサンプルデータ

 

※デザイン済みデータインストール直後

AFFINGER5デザイン済みデータインストール直後

 

そこで今回はヘッダー画像の設定について解説します。

ちなみに、本記事は前回記事の続きとなります。

まだAFFINGER5(アフィンガー5)のデザイン済みデータをインストールしてないという方は、以下の記事からご覧ください。

 

デザイン済みデータをインストールしても画像は反映されない

冒頭にも書きましたが、AFFINGER5(アフィンガー5)のデザイン済みデータを導入しても、ヘッダー部分の画像は反映されません。

これは公式サイトにもしっかり記載がありました。

当データはデモサイトと完全同一のデザインになることを保証するものではございません。また、画像及びイラストなどの素材データは含まれておりません。(画像サンプルやダミーリンクは適宜変更して下さい)

無料の画像素材でも、再配布は禁止されていることが多いのでそのせいかもしれません。

ということで、ヘッダー部分の設定を行っていきましょう。

 

手順は下記の通りです。

  1. 背景用の画像を用意する
  2. ヘッダー画像を設定する

 

完成すると下記のようになります。

AFFINGER5デザイン済みデータのヘッダー画像設定後

 

手順1:背景用の画像を用意する

まずはヘッダー部分の画像を用意しましょう。

AFFINGER5(アフィンガー5)のカスタマイザーでは「2200×500」ピクセルの画像を推奨しています。

AFFINGER5(アフィンガー5)のカスタマイザーでは「2200×500」ピクセルの画像を推奨

 

ちなみに上記サイズはPCを基準に考えられた横長画像です。

タブレットやスマホなど画面幅の狭い端末では、思ったように表示されません。

なので、どこで切り取られてもよい画像を選ぶと悩まなくていいです。

 

今回はこんな感じの画像を用意しました。

サンプルデータ

 

「2200×500」ピクセルの画像と言いましたが、指定サイズに画像を調整する方法が分からなくても今回は問題ありません。

ひとまずは画像サイズの大きなものを用意してください。

 

手順2:デザイン済みデータのヘッダー部分を設定しよう

続いてヘッダー部分の画像の設定です。

ヘッダー画像を設定するには、WordPress管理画面の左メニューより「外観」→「カスタマイズ」へと進みます。

WordPress管理画面の左メニューより「外観」→「カスタマイズ」へと進みます

 

続いて、「ヘッダー画像」をクリックします。

「ヘッダー画像」をクリック

 

ヘッダー画像エリア内の「画像を選択」をクリックします。

ヘッダー画像エリア内の「画像を選択」をクリック

 

メディアライブラリに新しい画像をアップロードします

ドラック&ドロップか、「ファイルを選択」から任意の画像ファイルを選択します。

「ファイルを選択」から任意の画像ファイルを選択

 

先にも述べましたが、私は何となくサンプルに近いピンクの羽の画像を選びました。

画像サイズが「1920×1280」ピクセルなので、推奨サイズ「2200×500」ピクセルと比べると左右幅が足りませんが、まぁ良しとします。

アップロードが完了したら「画像を選択」をクリックします。

アップロードが完了したら「画像を選択」をクリック

 

右側のイメージが更新されます。

 

下部のボタンでデバイスごとの表示が切り替えられます。

それぞれ確認してみましょう。

※タブレットで表示した場合

タブレットで表示した場合

 

※スマホで表示した場合

スマホで表示した場合

 

問題なさそうなら左上の「公開」をクリックして完了です。

左上の「公開」をクリックして完了

 

ヘッダー画像の高さや写真位置を変えたいときは

画像によっては、表示したいモチーフがうまく表示されなかったり、ヘッダーエリアの高さを変えたいこともあるかと思います。

そんなときは下記の箇所を調整してみてください。

 

ヘッダー画像の高さを変える

  • ヘッダー画像エリア最低高さ(px)
  • スマホ用(599px以下)※高さを分ける場合

上記ではヘッダー画像の高さを変えられます。

数値を大きくするほど高くなります。

 

モチーフが入りきらない場合

  • 背景画像の横位置
  • 背景画像の縦位置
  • 背景画像を幅100%のレスポンシブにする

画像サイズの大きなものを使用する場合、上記を調整することで画面に収まるよう調整できます。

 

おまけ:ヘッダー部分のテキストを変更するには?

デザイン済みデータにはデフォルトでヘッダー部分にロゴマークが配置されています。

ここを変更したい場は以下の手順で変更できます。

「AFFINGER5 管理」→「ヘッダー」へと進み、ヘッダーコンテンツ設定にて任意のテキスト・画像に変更できます。

 

まとめ|ヘッダー画像が入ると急におしゃれサイトに変身

いかがでしたでしょうか。

この記事では、ヘッダー画像の設定について解説しました。

 

この設定にたどり着くまで、私自身かなりの時間を費やしましたが、ふたを開けてみればとても簡単。

この記事に記載の通りに進めていただければ、5分とかからず設定できます。

ぜひ皆さんもヘッダーエリアのデザイン設定にご興味をお持ちいただければ幸いです。

 

本日はこのあたりで。

今回の記事が、皆さまのお役に立てれば嬉しいです。

最後までお読みいただきまして、誠にありがとうございました。

  • この記事を書いた人
ucozi

ucozi(うこじ)

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

-AFFINGER5
-, ,

Copyright © ucozi.com , All Rights Reserved.