WordPressのヘッダーとは？ 画像を設定する方法や注意点も解説

まずは、WordPressの管理画面を開きます。

左サイドメニューにある「外観」を選択します。

サブメニューの中から「ヘッダー」を選択し、ヘッダー画像の編集画面を開きます。

ヘッダー画像の編集画面が表示されました。

WordPressのヘッダー画像をアップロードする方法を説明します。

事前にヘッダー画像として使用する画像ファイルを用意しておきましょう。

ヘッダーの編集画面で「新規画像を追加」ボタンを押下します。

「画像を選択」の画面に切り替わります。

タブが「ファイルをアップロード」であることを確認してください。

事前に用意しておいた画像ファイルをドラッグ・アンド・ドロップするか、または「ファイルを選択」ボタンを押下し、該当ファイルを選択しアップロードしてください。

「メディアライブラリ」タブに切り替わり、画像がアップロードされたことを確認できます。

画像全体を使わない場合は、画像の必要な部分だけを切り抜く（トリミングする）ことができます。

ヘッダー画像に使用する画像を選択してください。

選択すると、画像の右上のチェックボックスにチェックが入った状態になるので、その状態で画面右下にある「選択して切り抜く」ボタンを押下します。

「画面切り抜き」の画面に切り替わります。

切り抜きたいサイズに調整してください。

調整後、画面右下の「画像切り抜き」ボタンを押下し、トリミングを実行します。

ここでは、横幅を小さくしてみました。

ヘッダー画像のトリミングが完了しました。

WordPressのヘッダー画像を設定するには、「カスタマイザー」を使う方法もあります。

WordPressの管理画面で左サイドメニューの「外観」を選択します。

サブメニューから「カスタマイズ」を選択します。

さらに「ヘッダー画像」を選択します。

ヘッダー画像の編集画面で「新規画像を追加」ボタンを押下します。

「画像を選択」画面に切り替わるので、タブが「ファイルをアップロード」であることを確認しましょう。

ヘッダー画像に使う画像ファイルをドラッグ・アンド・ドロップ、もしくは「ファイルを選択」ボタンを押下し、画像をアップロードしてください。

タブが「メディアライブラリ」に切り替わり、アップロードされた画像が確認できます。

ヘッダー画像に使用する画像ファイルを選択したことを確認して、画面左下の「選択して切り抜く」ボタンを押下してください。

「画面切り抜き」画面に切り替わります。

切り抜きたいサイズに調整し、右下の「画像切り抜き」ボタンを押下して、トリミングを実行します。

WordPressにヘッダー画像が表示されました。

最後に、公開前のチェックをします。

画面左上の「公開」の横にある「歯車」アイコンを押下してください。

サブメニューが開くので、「下書き保存」を選択してください。

歯車アイコンの横にある「公開」が「下書き保存」に変更されるので、「下書き保存」ボタンを押下します。

サブメニューの「プレビューリンクの共有」の下に表示されているURLを押下します。

プレビュー画面が表示されます。

プレビュー画面で確認して問題がなければ、操作の「公開」を選択します。

歯車アイコンの横にある「下書き保存」が「公開」に戻るので、「歯車」アイコン横の「公開」ボタンを押下します。

WordPressにヘッダー画像を複数設定した場合、ページが切り替わるごとにランダム表示させることができます。

WordPress管理画面の左サイドメニュー「外観」の中の「ヘッダー」を選択すると、上記の画面が表示されます。

「新規画像を追加」ボタンを押下し、ヘッダー画像を追加します。

「画像を選択」画面で「ファイルをアップロード」タブを選びます。

ファイルをドラッグ・アンド・ドロップ、もしくは「ファイルを選択」で画像をアップロードします。

ヘッダー画像にしたい画像を選択し、「選択して切り抜く」ボタンを押下します。

切り抜きたいサイズを調整し、「画像切り抜き」ボタンを押下します。

新しいヘッダー画像が追加されました。

「アップロード済みヘッダーをランダム表示」を押下すると、ページが切り替わるごとに、ヘッダー画像がランダム表示されます。

WordPressのヘッダー画像を増やしたい場合は、ここで説明した作業を繰り返してください。

「Meta Slider」というプラグインを使えば、WordPressのヘッダー画像をスライド表示させることができます。

視覚効果のあるスライドエフェクトが複数用意されていて、スライド時間やナビゲーショの有無も指定可能です。

操作はかんたんで、スライドショーに使う画像を選び、エフェクトやスライド時間を設定すると、ショートコードが作成されます。

作成されたショートコードをコピー＆ペーストすれば、スライド表示することができます。

ただしテーマによっては、ヘッダーでショートコードを使うにはPHPファイルを編集する必要があるので注意が必要です。

WordPressのヘッダー画像は、利用するテーマごとに推奨の画像サイズが違います。

「Twenty Sixteen」では1200×280ピクセルですが、「Twenty Minutes」では1400×280ピクセルです。

このように、テーマによって推奨サイズが違うので、前もって確認しておきましょう。

また、WordPress内で画像をトリミングすると、ピクセル数を細かく調整することができません。

きっちりと推奨サイズに合わせたい場合は、あらかじめペイントソフトなどで切り抜いてからアップロードしましょう。

WordPressにヘッダー画像を設定した後はすぐにでも公開したくなりますが、公開する前には必ずプレビュー画面でチェックしましょう。

画像の表示に不具合が生じたまま公開することがないよう、事前の確認は必須です。

指定した画像がきちんとヘッダーに設定できているか、画像の表示位置や幅や高さなどが思いどおりになっているかを確認します。

ランダム表示やスライド表示をしている場合は、より念入りに公開前の動作チェックが必要です。

WordPressのヘッダー画像の編集はパソコンを使っている人が多いでしょう。

しかし、ほとんどのユーザーはスマホであなたのWebサイトを見ているので、スマホでの見え方にも注意する必要があります。

WordPressのカスタマイザー機能を使えば、パソコン・タブレット・スマホでの見え方を確認することができます。

さらに、パソコンやスマホでの見え方を自動で調整してくれるレスポンシブデザイン対応のテーマであれば、端末に合わせてヘッダー画像のサイズが変更されるため便利です。

Webにくわしくない初心者でもたった10分で始められるレンタルサーバー「ConoHa WING」。

とっても簡単だから今すぐ始めちゃいましょう。

また下記の記事では、ConoHa WINGを使ってWordPressを開設する方法を、画像付きでくわしく解説しています。

他社のレンタルサーバーをご利用中で、ConoHa WINGにお乗り換えを検討されている方も安心です！

煩雑なレンタルサーバーの移行もかんたんにお乗換えいただけるよう、いくつかのサポートを用意しています。