WordPressでカスタムヘッダーを設定する方法【初心者向け】
WordPress（ワードプレス）で【カスタムヘッダーを設定する方法】を初心者向けに解説した記事です。WordPressのテーマによって異なりますが、ヘッダーに画像を入れることができます。応用編としてランダム表示方法も合わせて解説。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
吉﨑 智正
WordPressでテーマによってはヘッダーに画像を設定できます。
サイトのヘッダー画像は、そのページの印象を決める大切な部分ですので、印象的な画像を配置したいですよね。
このヘッダー部分を、WordPressではカスタムヘッダーと言います。
今回は、初心者向けにWordPressのカスタムヘッダー設定方法をご紹介します。
目次
田島メンター！！今使っているテーマがヘッダーを変更できるようなんですけど、どうやったらいいんですか？
カスタムヘッダーが対応しているんだね。それなら、ダッシュボードから設定できるよ。ちょっとやってみようか。
はい、お願いします♪
1.ヘッダー管理画面を開く
まずはヘッダー画像の管理画面を開きます。
ダッシュボード>外観>ヘッダー をクリックします。
管理画面を確認すると、推奨画像ピクセルが記載されています。
今回使うテーマのTwenty Twelveの場合は、960 px×250 pxです。
「テーマ」メニューでTwenty Twelveのテーマが見つからない場合には、「新規追加」から検索してインストールできます。
2.ヘッダー画像を用意する
任意のヘッダー画像を準備しましょう。
ヘッダーのサイズは、960px × 250pxに設定すると、そのままのサイズでページに反映されます。
また、多少サイズが異なっても、アップロード後に好きな範囲を指定できるので、安心してください。
今回は、この画像をヘッダーに設定してみます。
[PR] WordPressで挫折しない学習方法を動画で公開中
3.ヘッダー画像をアップロードする
ヘッダー管理画面の「ファイルを選択」で、先ほど作成した画像をアップロードします。
アップロード後、「選択して切り抜く」ボタンをクリックすると、画像のトリミング画面になります。
暗くなっているところは、表示されないので、枠のサイズをドラッグして好きなサイズに調整し、「画像切り抜き」をクリックしてください。
指定した範囲で画像が切り抜かれ、サイトに反映されます。
サイトを確認すると、反映されたことがわかります。
カスタムヘッダーの設定方法は以上です。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
応用：ヘッダー画像をランダムに表示する
最後に応用編として紹介します。
ヘッダー画像をいくつか表示したい場合は、サイトのトップページが表示されるごとにヘッダー画像をランダムに表示もできます。
先ほど紹介した手順2と3を繰り返しヘッダー画像が複数になると、「アップロード済みヘッダーをランダム表示」というラジオボタンが選べるようになります。
ここをクリックすると、アップロードしたヘッダー画像がランダムに表示されます。
無事に設定できましたか？
カスタムヘッダーはWordPressのテーマごとに大きさなどが異なるので、いくつかのテーマで試してみてください。
WordPressのカスタマイズをもっとしたい場合は、WordPressでカスタムフィールドを設定する方法の記事もあわせてご覧ください。
ヘッダーを変更すると、かなりサイトの印象って変わりますね♪
そうだね。カスタムヘッダーが対応のテーマなら手軽に変更できるから、オリジナリティを出すためにもこだわったほうが良いね！
はい♪
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
