WordPressでサイトを運営していて、どんなヘッダー画像にすればいいのか悩んだことのある人も多いのではないでしょうか。どんなサイトであっても、ヘッダー画像はとても重要です。ユーザーがサイトを訪れて最初に目にするものですし、ヘッダー画像で誰にどんな情報を伝えるサイトなのかを判断することもあります。もし、コンテンツの内容とギャップのあるヘッダー画像が設置されていたら、せっかくアクセスしてきたユーザーを失うことにもなりかねません。この記事では、どんなヘッダー画像が良いのか、ヘッダー画像を作る際のポイントや設置方法などについて紹介します。
目次
どんなヘッダーにすれば良い？
ヘッダーで重要になるのが、サイトのテーマやコンセプトが伝わるようにすることです。「3秒ルール」といわれるように、多くのユーザーは一目見ただけで、このサイトの記事を読むかどうかを決めています。スクロールせずにサイトを離脱してしまう人も少なくないのです。そのため、誰に対してどんな情報を提供しているのか、一目でわかるようにできれば、ユーザーに記事をしっかりと読んでもらうことができます。
サイトのタイトルを決める際にも、どうしてもかっこいい言葉を使おうとしがちです。アルファベットや難しい言葉を使うと、かえってわかりにくくなってしまいます。たとえば、「働くママのための時短レシピ100選」のように、ターゲットとコンテンツの内容を明確にすると、ターゲットに「私のための情報」と思ってもらえるようになるでしょう。また、ヘッダーはデザインも重要になります。上記のように「働くママ」のためのサイトであれば、それに合ったデザインにするのがポイントです。
10代の女性を対象にしたようなポップなデザイン、逆に熟年を対象にしたような落ち着いたデザインでは、違和感を与えてしまうでしょう。サイト全体の色使いなども含めて、コンセプトにあったデザインにすることが大切です。どんなヘッダー画像を使用するかも重要なポイントになります。働くママ向けのサイトなら母子が一緒に遊んでいる画像、飲食店のサイトなら美味しそうな料理の画像のように、見た人がどんな印象を持つのかを考えながら、最適な画像を選びましょう。
ヘッダー画像機能がある場合の設定方法
WordPressのテーマのなかには、管理画面で簡単にヘッダー画像を設定できる機能を持ったものもあります。ヘッダー画像機能がある場合の設定手順は次のとおりです。まず、WordPressの管理画面にログインし、「外観」→「カスタマイズ」メニューにアクセスします。次に、左カラムに表示されている「ヘッダー画像」をクリックしましょう。ヘッダーに使用できる画像を用意してあるテーマも多く、その場合は「おすすめ」などとして画像が表示されます。この画像のなかから選ぶ場合は、使用する画像をクリックします。
また、複数枚の画像をランダムに表示させることも可能です。ランダムに表示させたいときは、「ヘッダーをランダム表示」の項目をクリックします。自分で用意した画像を使用する場合の手順は次のとおりです。「新規画像を追加」ボタンをクリックして、表示された画面の「ファイルをアップロード」タブをクリックします。アップロードするには、「ファイルを選択」ボタンをクリックして画像ファイルを選ぶ方法と、この画面に直接ファイルをドラッグ＆ドロップする方法の2通りがあります。
アップロードしたら、「メディアライブラリ」にアップロードした画像が表示されているのを確認しましょう。この画像を選択して、右下に表示されている「選択して切り抜く」ボタンをクリックします。画像切り抜き画面が表示されたら、ドラッグして表示する範囲を決め、「画像切り抜き」ボタンをクリックする手順です。切り抜きが完了したら、「保存して公開」ボタンをクリックすると、ボタンが「保存しました」に切り替わって、選択したヘッダー画像が表示されます。正しく表示されているか、サイトにアクセスして確認しましょう。
ヘッダー画像機能がない場合の対処法
ヘッダー画像機能のないWordPressテーマを使っている場合は、次の手順で設定します。PHPファイルやCSSファイルに手動で追記する手順になりますので、ある程度のスキルが必要になります。また、万が一不具合が出た際にすぐ元に戻せるように、各ファイルは変更する前に必ずバックアップをとっておきましょう。まず、WordPressの管理画面にログインし、「外観」→「テーマの編集」→「テーマのための関数（function.php）」を表示させます。表示されたfunction.phpに下記のコードを追加し、左下の「ファイルを更新」をクリックしましょう。
// カスタムヘッダー
add_theme_support( ‘custom-header’ );
すると、左カラムの「外観」に「ヘッダー」というメニューが追加されます。次は、ヘッダーを表示させるためのカスタムヘッダー機能の設定手順です。「外観」→「テーマの編集」→「テーマヘッダー（header.php）」をクリックしてheader.phpを表示させます。header.phpの＜body＞タグ内に以下のコードを追加します。ヘッダーを入れ込む位置を考えて、「ロゴ」と「メニュー」の間に追加するのがよいでしょう。
＜!– custom header –＞
＜?php ＄header_image = get_header_image();
if ( ! empty( ＄header_image ) ) : ?＞
＜div id=”header_img”＞
＜a href=”＜?php echo home_url(); ?＞”＞＜img src=”＜?php header_image(); ?＞” alt=”＜?php bloginfo(‘name’); ?＞” /＞＜/a＞
＜/div＞
＜?php endif;?＞
これで、カスタムヘッダー画像が機能するようになりました。次は、使用するヘッダー画像をアップロードする手順です。ヘッダー画像の横幅はテーマによって違ってきますので、style.cssで確認しておきましょう。横幅が不明な場合は、1000px程度で作成しておき、後で調整する方法もあります。「外観」→「ヘッダー」を表示させ、「新規画像を追加」ボタンをクリックして、使用したいヘッダー画像をアップロード、またはメディアライブラリから選択します。画像をアップロードする手順は、ヘッダー画像機能がある場合と同様です。設定が完了したら、正しく表示されているか、サイトにアクセスして確認してみましょう。ヘッダー画像の横幅や上下のスペースなど修正したい箇所があったら、style.cssで調整しながら修正します。
【おすすめプラグイン】1.Elementor
WordPressサイトは、プラグインを使ってヘッダーをカスタマイズすることもできます。「Elementor」はトップページや固定ページを簡単にカスタマイズできる無料プラグインです。ヘッダーやメニューなどもドラッグ＆ドロップするだけでカスタマイズできるので、直感的に作業できます。Elementorでヘッダーをカスタマイズする手順は次のとおりです。Elementorをインストールして有効化すると、WordPressの管理画面の左カラム下に「Elementor」と表示されます。固定ページから「新規追加」を選択して、タイトル、パーマリンク、テンプレートを決め、「下書きとして保存」します。
次に、「Elementor」の「マイテンプレート」をクリックし、「新規追加」をクリックしましょう。テンプレートの種類を選択する画面が表示されますので、テンプレートの種類で「Header」を選択し、「テンプレートに名前をつける」欄に任意の名前を入力し、「テンプレートを作成」ボタンをクリックします。ライブラリ画面が表示されたら、右上の×ボタンを選択して編集画面に移動します。ここで「Site Title」などのウィジェットをドラッグして、ヘッダーを編集する手順です。編集が完了したら左下の「公開」ボタンを選択し、さらに「ADD CONDITION」「Entire Site」を選択して「公開」ボタンをクリックします。設定どおりに正しく表示されているか、サイトにアクセスして確認しましょう。
【おすすめプラグイン】3.Anywhere Elementor Pro
「Anywhere Elementor Pro」は、セクションや列に動的背景を追加することができるプラグインです。オンマウスの際に背景が変わるなど、動的背景にするとクリック率を高める効果が期待できますが、設定するのは簡単ではありません。しかし、Anywhere Elementor Proを利用すれば、簡単に動的背景を追加できます。Anywhere Elementor Proは、「投稿画像」「投稿のカスタムフィールド画像」「カテゴリーやタグなどのカスタムフィールド画像」の3種類の動的背景を設定できる機能を持っています。Anywhere Elementor Proで動的背景を設定する手順は次のとおりです。
まず、投稿画像を動的背景として追加する場合は、「Edit Section」の「AE Pro」を選択します。動的背景画像を有効にするために、「Dynamic Background Image」を選択します。「Sourse」で「Post」を選択し、「Image Size」で画像のサイズを決めるなどして詳細を設定しましょう。投稿のカスタムフィールド画像を追加する場合も、「Edit Section」の「AE Pro」を選択したうえで「Dynamic Background Image」を選択します。「Sourse」で「Post Custom Field」を選択し、「Custom Field Key」でカスタムフィールドのキー/スラッグを指定する手順です。カテゴリーやタグなどのカスタムフィールド画像を追加する場合も、同様に「Dynamic Background Image」を選択します。「Sourse」で「Term Custom Field」を選択し、「Custom Field Key」でカスタムフィールドのキー/スラッグを指定します。
ヘッダー画像を無料で作成する方法
ヘッダー画像は、コストをかけずに無料で作成することができます。まず、画像を編集するためのフリーソフト「PhotoScape」をインストールしましょう。PhotoScapeは、画像サイズの変更や切り抜きの他、テキストや他の画像が挿入できるなど、無料とは思えないほどの画像編集ソフトです。次にヘッダーの素材となる画像を用意します。自分で撮影した画像でもかまいませんが、「ぷくっと」や「pixabay」など、無料画像サイトを利用するとイメージにあった画像をみつけやすくなるでしょう。
画像を用意する際は、大きさに注意が必要です。一般的なヘッダーの画像の幅は900～1000ピクセル程度ですが、幅640ピクセルのように小さい画像を拡大して使うと、荒れて汚くみえてしまいます。ヘッダーのサイズよりも大きな画像を選ぶようにしましょう。素材となる画像の準備ができたら、いよいよヘッダー画像の作成です。ここでは、仮にサイズが950×250ピクセルの素材画像を作成するとして説明します。まず、PhotoScapeを起動させ、「画像編集」をクリックします。
次に、素材の画像をドラッグまたは選択して表示させましょう。左下の「オブジェクト」タブをクリックして、「T」をクリックするとテキストボックスが開きます。ここに文字を入力して、フォントやサイズ、文字色を指定したうえで「OK」をクリックすると、画像の上に文字が表示されます。表示された文字にカーソルを合わせると自由に移動することが可能です。また、フォントや文字色は後から変えることもできます。
画像のサイズを変更する場合は、下の「リサイズ」をクリックして、リサイズ画面を表示させます。幅と高さのサイズを指定してサイズ変更もできますし、％指定で拡大・縮小も可能です。トリミングする際は、「トリミング」をクリックして、トリミングする範囲を指定します。下にW1000・H300のように現在のサイズが表示されますので、これを見ながら950×250になるようにトリミングします。ヘッダー画像が完成したらJPEG形式などで保存し、WordPressのヘッダーに反映させましょう。
ヘッダー画像が表示されないときの対処法
ヘッダー画像を設定しても何らかの理由でエラーになってしまい、正しく表示されないことがあります。まず、WordPressにログインした状態でプレビューし、問題なく表示されるか確認しましょう。もし表示されなければ、プレビュー状態できちんと表示されるように修正します。問題は、プレビューでは表示されるのに、公開すると表示されなくなってしまうケースです。このような場合は、インストールした表示高速化プラグインが原因になっていることが考えられます。
対処法としては、まずWordPressからログアウトします。ブラウザを閉じただけではログアウトしないので、右上のアカウントの「ログアウト」をクリックして手動でログアウトしましょう。そのうえで、パソコンやスマホなどのブラウザでヘッダー画面が正しく表示されているか確認します。この際に大切なのが、キャッシュを削除してから確認することです。特に、「Autoptimize」や「WP Fastest Cache」などの高速化プラグインを使用している場合は、必ずキャッシュを削除します。
この状態で確認してヘッダー画像が表示されない場合は、高速化プラグインを停止してから再度確認してみましょう。それでも表示されない場合は、他のプラグインが影響している可能性がありますので、一つ一つ停止しながら確認します。このようにプラグインが原因で不都合がおこることもありますが、プラグインそのものの問題ではなく、テーマや他のプラグインとの相性が影響します。新しいプラグインを追加した場合は、必ずきちんと表示されているか確認することが大切です。
まとめ
サイトに適切なヘッダー画像を設置すると、ターゲットとなるユーザーにどんなコンテンツがあるサイトなのかをアピールできます。サイト内の記事を読んでもらうことができるため、離脱率を下げるだけでなく、コンバージョンアップにもつながるでしょう。WordPressなら、プラグインを活用して簡単にヘッダー画像を追加することができます。
コメントを残す