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

WordPress(ワードプレス)で【カスタムヘッダーを設定する方法】を初心者向けに解説した記事です。WordPressのテーマによって異なりますが、ヘッダーに画像を入れることができます。応用編としてランダム表示方法も合わせて解説。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

 

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

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

 

大石ゆかり

田島メンター!!今使っているテーマがヘッダーを変更できるようなんですけど、どうやったらいいんですか?

田島悠介

カスタムヘッダーが対応しているんだね。それなら、ダッシュボードから設定できるよ。ちょっとやってみようか。

大石ゆかり

はい、お願いします♪

 

目次

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

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

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

 

 

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

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

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

header1

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

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

 

 

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

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

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

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

 

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

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

 

 

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

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

header2

 

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

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

header22

 

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

header3

 

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

header4

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

 

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

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

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

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

 

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

header5

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

 

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

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

 

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

 

大石ゆかり

ヘッダーを変更するとかなりサイトの印象って変わりますね♪

田島悠介

そうだね。カスタムヘッダーが対応のテーマなら手軽に変更できるから、オリジナリティを出すためにもこだわったほうが良いね!

大石ゆかり

はい♪

 

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する