icon
icon

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

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

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

監修してくれたメンター

吉﨑 智正

トゥービーコンティニュード合同会社代表。1995年ぐらいからHTMLを生業としており、ここ7年はWordPressを中心に仕事をしています。直近2年半は神奈川と広島で2拠点生活をおくっています。

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

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

 

このヘッダー部分を、WordPressではカスタムヘッダーと言います。

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

目次

 

大石ゆかり

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

田島悠介

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

大石ゆかり

はい、お願いします♪

 

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

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

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

 

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

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

「テーマ」メニューでTwenty Twelveのテーマが見つからない場合には、「新規追加」から検索してインストールできます。

 

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

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

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

 

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

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

 

 

[PR] Webサイト制作で副業する方法とは

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

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

 

アップロード後、「選択して切り抜く」ボタンをクリックすると、画像のトリミング画面になります。

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

 

指定した範囲で画像が切り抜かれ、サイトに反映されます。

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

header4

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

 

 

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

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

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

 

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

 

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

 

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

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

 

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

はい♪

 

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか?

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。