こんにちは、セイタです。
今回は、AFFINGER7のヘッダー画像について解説していきたいと思います。
ヘッダー画像の適切なサイズや設定方法、カスタマイズからQ&Aまでを記載し、適切にAFFINGER7のヘッダー画像を設定する方法について解説します。
\ 当サイトも使ってるWPテーマ『AFFINGER7』/
AFFINGER7のヘッダー画像に最適なサイズは？
AFFINGER7のヘッダーに最適なサイズはありません。
どういうことかというと、画像に対してどれくらい範囲を広くするか設定が可能となっているからです。
とはいえ、画像が大きすぎると視認性が悪くなり、ユーザー体験を損なう可能性があるため、自分のサイトの横幅がどれくらいなのかを確認して画像を用意・リサイズするようにしましょう。
PC表示での推奨ピクセルサイズ
PC表示での推奨ピクセルサイズでいうと、個人的にはmacbookを参考にしていて、ノートPCでよくある13インチを使用しているため、横幅1,470pxを基準として考えます。
問題は縦幅をどれくらいのサイズにするか、という部分を考えなければいけないのですが、サイズ感の参考方法としてはAFFINGER7のデザイン済みテンプレートのサイトを参考にするとイメージを付けやすいです。
ページを開くとサンプルがいくつかあり、TOPページの全体に表示されるパターンや半分程度に抑えるパターンなど、確認することが出来ます。イメージを確認後に具体的な画像サイズをどうするかと言った点については、デモサイトのヘッダー画像の部分で右クリックをして「検証」という項目をクリック選択してください。
すると、サイトのHTMLが表示されます。検証を選択した段階でヘッダー画像がハイライト表示されるため、以下の画像の左上のようにサイズが表示されます。このサイズを参考に画像を用意していただければ、想定した画像サイズと表示両方を実装することが可能です。
スマホ表示での推奨サイズと注意点
スマホ表示での画像サイズについては、先ほど紹介したデザイン済みテンプレートのサイトで確認を行いましょう。手順は同じですが、画面のサイズを変更する必要があります。
検証ツールを開いたら、検証ツール左側にPCマークのようなものがあるので、その部分を選択します。
すると画像のようにスマートフォンの画面サイズに画面幅が変更されるため、画面上部のレスポンシブという部分を選択。レスポンシブボタンをクリックするとスマホの名称が出てくるため、指標にしたいスマホを選択します。
すると選択したスマホの画面比率に自動変更してくれるため、スマホでの表示状態がどのような状態になるのかを確認しながら画像サイズを検討しましょう。 また、画像の表示サイズについてはカスタマイザーから変更することが可能となっていて、任意の表示範囲を選択することも可能となっているため、この点については設定後に適宜調整をしてユーザーにとって不便を感じない設定になっているかを考慮しつつ設定しましょう。
デバイスに合わせて画像が切り替わるレスポンシブ対応の基本
基本的にはAFFINGER7はレスポンシブ対応しているWordPressテーマなので、PCで使用した画像で画面が小さくなった場合に自動的にリサイズしてくれる仕組みになっています。
記事投稿内の画面ではそれで良いかもしれませんが、ヘッダー画像などに関しては極端に小さくなったり、意図しない表示になったりするためPC画面用の画像とスマホ用の画像と2点に分けて用意しましょう。
そうすることで、画面表示が整った状態となり、とても整理された見た目のサイトという印象を与えることが可能です。
AFFINGER7のヘッダー画像を設定・変更する手順
それでは、実際にAFFINGER7のヘッダー画像を設定・変更する手順について確認していきましょう。
ステップ1：WordPressカスタマイザーから基本設定を開く
まずはWordPress左メニューから「外観」⇒「カスタマイズ」⇒「ヘッダー画像」と進みましょう。
ステップ2：PC用のヘッダー画像をアップロード・切り抜きする
カスタマイザー内で「2,200×500」の画像サイズが適切という1文がありますが、個人的にはPCの場合はその画像サイズを指標にしても問題は無いと思います。
しかし、先程もお伝えしたとおりでスマホのヘッダー画像については想定している画像表示のされ方になっていない可能性がありますので、スマホ用はスマホ用で画像を用意し別途設定・選択することをおすすめします。
PCヘッダー画像は一番最初の「画像の追加」から設定することが可能となっており、横幅を100%に設定すると画面幅いっぱいに表示させることができるため、ご自身のサイトデザインに合った幅で設定してみてください。
ステップ3：スマホ専用ヘッダー画像を設定する（必須級）
スマホ用のヘッダー画像については、もう一つ下の「画像の追加」ボタンから追加をしてください。 一度PC画像のまま設定をしない選択を取っても良いと思いますが、見た目と相談してスマホ用のヘッダー画像を設定するか設定しないかを判断してもらえたらOKです。
ヘッダー画像をより魅力的に見せるカスタマイズのコツ
それでは簡単にヘッダー画像をうまく活かす方法について解説します。
サイトロゴ画像と背景画像を上手く組み合わせる
まずは、自分のサイト名を全面に出して認知度を上げたいという場合は、ヘッダー画像にキャッチフレーズとサイト名、自分のアイコン画像3点を追加した画像を用意して設定すると良いです。
人間の第一印象と同じで、ヘッダー画像にサイト名・キャッチフレーズ・アイコンがあることで、サイトに対しての印象がヘッダー画像の印象で記憶されます。
そのため、今後YouTubeに横展開していきたいといった場合などでもこの方法は有効で、「Webで見たことがあるアイコンの人がYouTubeをやっている」という発見のきっかけにもなります。その他、XやTikTokでも同じですね。
ヘッダーエリアの高さと余白を微調整する
ヘッダーエリアの高さと余白を微調整するのも大切です。例えば、先程から何回も伝えてきていますが、PCヘッダー画像をそのまま適用している場合や、スマホ用のヘッダー画像を用意しても見た目が想定通りになっていないこともあるでしょう。
そのため、必ずヘッダー画像を設定した際には見た目が適切に表示されているか確認を行い、想定通りの表示になっていない場合は先程のカスタマイザー項目からヘッダーエリアの高さや余白を調整して見た目を整えるようにしましょう。
ヘッダーカードと並べた際のバランスを取る
もし当ブログのようにヘッダーカードをTOPページに表示している場合は、ヘッダーカードとのバランスも重要になってきます。
例えば、ヘッダー画像はヘッダー画像、ヘッダーカードはヘッダーカードとして、個別にサイズを決めて設定した場合、TOPページ上部の画像占有度はかなり広い状態になってしまいます。
そのため、ヘッダーカードを並べた際のバランスとしては、デザイン済みテンプレートのページを例にするなら、「（現在確認しているヘッダー画像のサイズ）ー（ヘッダーカードのサイズ）」でヘッダー画像を作成・調整する必要があります。 個々のサイズを固定的に考えて設定をするというよりかは、全体を見てサイズを決めていくという逆算式で作成していったほうが、全体の見栄えが整いやすくなるので、おすすめです。
AFFINGER7でヘッダー画像が反映されない・見切れる時の対処法
それでは、最後にQ&Aを確認していきましょう
スマホで見ると画像が見切れてしまう原因
スマホで見ると画像が見切れてしまう原因としては、先程お伝えしたとおりでPCのヘッダー画像として設定したものが、レスポンシブ変化したことによって意図しない表示状態になってしまっている可能性が非常に高いです。
もしくはスマホ用のヘッダー画像は設定していないけど、ヘッダーの可視範囲は設定しているなどといった場合に、表示がうまくいかない状態になりがちです。
そのため、もしスマホで見ると画像が見切れてしまったり、意図しない表示状態になってしまっている場合はスマホ用のヘッダー画像を別途用意して設定するようにしましょう。
画像がぼやける・画質が落ちる場合のチェックポイント
画像がぼやけたり、画質が落ちる場合のチェックポイントとしては、使用している画像のサイズが極端に小さいサイズを使用していないか確認してください。
例えば、使用している画像が100px ×25pxで、PCヘッダー画像もしくはスマホヘッダー画像の表示基準サイズが1000px × 250pxだった場合、使おうと思っている画像を10倍に拡大した状態で設定することになります（引き伸ばされるイメージ）。
そのため、画像がぼやける場合や画質が落ちる場合には、WordPressに追加した画像のプロパティを開いて、画像の解像度が何×何の画像を使用しているのか、そして画像の解像度が適切なサイズになっているのかを確認してください。
変更したのに変わらない時はキャッシュをクリアする
WordPress特有の仕様で、これはメディアを追加部分でも発生することがありますが、同じ画像名称だった場合に違う画像を選択したとしても変更されない場合があります。
これは、WordPressのデータベース上に登録されている画像名称を認識している状態ゆえ起こる事象かと思いますが。別の画像名に変更して再度追加するか、ブラウザのキャッシュをクリアすることで解決できる可能性があります。
いずれかを試してもらって、画像の変更が正常に反映されるかどうか確認をしてみてください。
適切なヘッダー設定でブログの第一印象をアップしよう
今回はAFFINGER7のヘッダー画像の設定や注意点、カスタマイズ方法について解説しましたが、いかがだったでしょうか。
当ブログではヘッダーをあえて設定せず、記事タイトルに目がすぐ向くようにしていますが、ヘッダ画像を設定することはとても大切な要素になります。家で言うところの表札や玄関ですね。
もしヘッダー画像を作成したい場合は、知人がいるのであれば知人にお願いしてPhotoshopなどで作成してもらうのも良いと思いますし、知人が居ない場合はココナラなどで依頼をすると、クリエイターとメッセージで色々と調整をして自分好みのヘッダーを作成してもらえます。各クリエイターの今までの制作物を確認して、イメージに近いものを作成出来そうな人を選べるといった点も良いポイントですね。