WordPressでカスタムヘッダーを設定する方法【初心者向け】

WordPressでテーマによってはヘッダーに画像を設定することができます。

サイトのヘッダー画像は、そのページの印象を決める大切な部分ですので、印象的な画像を配置したいですよね。

 

このヘッダー部分を、WordPressではカスタムヘッダーと言います。今回は、初心者向けにWordPressのカスタムヘッダー設定方法をご紹介します。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

 

目次

本記事では下記の流れで紹介していきます。

1. ヘッダー管理画面を開く
2. ヘッダー画像を用意する
3. ヘッダー画像をアップロードする

最後に応用として、「ヘッダー画像をランダムに表示する方法」も合わせて紹介します。

 

 

１.ヘッダー管理画面を開く

まずはヘッダー画像の管理画面を開きます。

ダッシュボード>外観>ヘッダー　をクリックします。

管理画面を確認すると、推奨画像ピクセルが記載されています。

今回使うテーマのTwenty Twelveの場合は、960 px×250 pxです。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

２.ヘッダー画像を用意する

任意のヘッダー画像を準備しましょう。

ヘッダーのサイズは、960px × 250pxに設定すると、そのままのサイズでページに反映されます。

 

また、多少サイズが異なっても、アップロード後に好きな範囲を指定できるので、安心してください。

今回は、この画像をヘッダーに設定してみます。

 

 

３.ヘッダー画像をアップロードする

ヘッダー管理画面の「ファイルを選択」「アップロード」ボタンを使って、先ほど作成した画像をアップロードします。

 

アップロード後、画像のトリミング画面になります。

暗くなっているところは、表示されないので、枠のサイズをドラッグして好きなサイズに調整し、「切り取って公開する」をクリックしてください。

 

アップロードが完了したら、ページ下部の「変更を保存」をクリックすると、サイトに反映されます。

 

サイトを確認すると、反映されましたことがわかります。

カスタムヘッダーの設定方法は以上です。

 

 

応用：ヘッダー画像をランダムに表示する

最後に応用編として紹介します。

ヘッダー画像をいくつか表示した場合は、サイトのトップページが表示されるごとにヘッダー画像をランダムに表示することもできます。

 

先ほど紹介した手順2と3を繰り返しヘッダー画像が複数になると、「ランダム」というラジオボタンが選べるようになります。

ここをクリックすると、アップロードしたヘッダー画像がランダムに表示されます。

 

無事に設定できましたか？

カスタムヘッダーはWordPressのテーマごとに大きさなどが異なるので、いくつかのテーマで試してみてください。

 

WordPressのカスタマイズをもっとしたい場合は、WordPressでカスタムフィールドを設定する方法の記事も合わせてご覧ください。

 

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。