とっても簡単！？アフィンガーでヘッダー画像を設置する方法

ヘッダー画像をサイトに設置したいけど、どうやってやるのかが分からないといった事はありませんか？

いろんなサイトを見ているとおしゃれなヘッダーを使っているサイト様が非常に多く、自分のサイトはヘッダー画像を設置していないとどうしても殺風景なサイトになってしまいます。

どうせ長く運用していくのであれば、ヘッダー画像の一つや二つは使いたいですよね。
アフィンガーではヘッダー画像も簡単に設置することができます。

ヘッダーエリアのカスタマイズは以前の記事を参考にしてください。

アフィンガーでヘッダー画像を設置してサイトのイメージアップ！

ヘッダーは最初に訪問者が訪れた際に初めて見る部分です。

このヘッダーの見た目が悪いと訪問者は興味をなくし、すぐに帰ってしまったりするのでサイト全体のイメージをよくするためにヘッダー画像を使ってサイトのイメージをあがるのは今では当たり前になってきています。

とはいってもヘッダー画像ってどうやって設置すればいいの？と悩んでいるアフィンガーユーザーのために基本的な使い方について学んでいきましょう。

ヘッダー画像を用意しよう

まず始めにヘッダー画像を用意しておきましょう。
設置方法が分かっても設置するヘッダー画像がないと話になりません。

自分が運営していくサイトイメージに近い画像を使うといいでしょう。

無料でダウンロードができるサイト様が増えてきているので、これらのサイトを利用するのも一つの手です。

用意した画像を編集

フリー素材サイトからサイトに使う画像をダウンロードしヘッダー画像として使う前にやっておくべき作業があります。

アフィンガーで使用するヘッダー画像は2200×500が適正サイズなので、指定のサイズにする必要があります。

サイズの合わない画像をそのまま貼りつけてしまうとサイト全体のレイアウトが崩れてしまい、不格好なサイトになってしまうので、画像サイズを変更（リサイズ）しておきましょう。

画像編集が使いやすいソフト「Photo Scape」

Windowsに標準搭載されているペイントを使ってもいいのですが、ヘッダー用の画像にリサイズやトリミングをするのは難しく、思い描いたカットができません。

フォトショップやイラストレーターなどの高機能なものはお値段が高く、使いこなすだけでも大変です。

そこで私がおすすめしている画像編集ソフトがPhoto Scape（フォトスケープ）です。
画像に文字をいれるのであればPhoto Spaceという画像編集ソフトがとても使いやすいです。

窓の杜：Photo Scape

ここでは詳しい使い方は省略しますので、機会があれば後日紹介します。

編集した画像をヘッダー画像エリアに設置

それではヘッダー画像を設置してみましょう。

【外観】→【ヘッダー画像】で設置ができます。
先ほど用意した画像を現在のヘッダーの新規画像を追加で選ぶだけです。

これでヘッダー画像を設置することができました。

基本的な操作方法はこれだけです。
次からはヘッダー画像エリアの応用編として細かなカスタマイズに絞ったやり方について説明します。

ヘッダー画像エリアをカスタマイズしたいなら

アイナ

ここから紹介する方法は、ある程度アフィンガーの操作に慣れてから手を付けるようにしておきましょう。

ウィジェットを使用したカスタマイズ

通常のカスタマイズ方法とは別にウィジェットを使用したカスタマイズを使ってヘッダー画像エリアを編集することだってできちゃうんです。

【外観】→【ウィジェット】でウィジェットを設定できます。

ヘッダー画像エリアウィジェット

ヘッダー画像をカスタマイズできます。
ボタンや文字などを表示させたい場合に使うのに重宝します。

ここでカスタマイズしたタグが優先して表示され、通常のカスタマイズで編集したヘッダー画像は表示されなくなります。

ヘッダー画像エリア下ウィジェット

ヘッダー画像の下に設置できます。

ヘッダーとコンテンツの間に表示させることができるので、スライドショーなどを設置しておくといいでしょう。