WordPressのヘッダー画像を設定する方法

WordPress のメリットの一つには、デザインを自分好みに合わせて簡単に設定・変更ができることだ。ここでは、ヘッダー画像の設定方法をご紹介する。

ヘッダー画像は事前に用意する必要があるが、サイトロゴの入ったものや、サイトのイメージに合った写真を挿入したものなど、あなたの気に入ったオリジナル画像が設定できる。設定方法はとても簡単なので安心してほしい。

注:まずはローカル環境で確認しよう!
ヘッダー画像を設定すると、いきなり本番で公開されてしまう。ローカル環境でテストするようにしよう。ローカル環境の作り方は『WordPress のローカル環境の作り方』を一読して設定しよう。


1.ヘッダー画像の設定画面にアクセス

WordPress の管理画面の左メニューより「外観 → ヘッダー」とクリックしよう。

ヘッダーを選択


2.ヘッダー画像を選択する

下図は画面左上を拡大したものだ。ヘッダー画像を選択するために「新規画像を追加」をクリックしよう。

新規画像を追加

「ファイルをアップロード→ファイルを選択」の順に進み、ヘッダー画像を追加しよう。

ファイルを選択

画像サイズについて
上図に記載があるように、ここでは「縦 960px × 横 250px 以上」のヘッダー画像を推奨している。これはテーマ” Twenty Twelve “の場合だが、テーマによって推奨画像サイズは異なるので、事前に確認しておこう。

ダイアログ画面が表示されるので、用意したヘッダー画像をクリックしよう。これでメディアライブラリに画像が追加された。

画像を選択


3.ヘッダー画像を設定する

メディアライブラリに追加された画像を、ヘッダーに設定しよう。画像を選択して右下の「選択して切り抜く」をクリックする。

ヘッダー画像を選択

続いてヘッダー画像をトリミング(画像の余分な部分の削除)できる画面にアクセスする。ここでのトリミングはサイズをピクセル数値で細かく調整できないため使いづらい。あらかじめサイズを調整していれば特に使用する必要はない。

ヘッダー画像をトリミング

下図のようにこれでヘッダー画像のアップロードは完了だ。

ヘッダー画像のアップロード

実際にヘッダー画像がどのように表示されるかをプレビューで確認しよう。
①左上の「歯車」のアイコンを選択する。
②「下書きとして保存」にチェックを入れる。
③「下書きとして保存」を選択する
④プレビューリンクのURLの選択をクリックしよう。

プレビュー

プレビューが確認できたはずだ。現状は「下書きとして保存」の状態だ。プレビューをみて問題がなければ「公開」をしよう。

公開


4.まとめ

いかがだっただろうか。ここまでの説明でヘッダー画像が設定できただろう。
テーマによって推奨しているサイズが異なるため、そこだけは事前に確認しよう。テーマのカスタマイズに関しては、ヘッダー画像以外にも背景画像を設定することもできる。『
WordPress の背景画像を設定する方法』を確認しておこう。

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

コメントはこちらから

  1. 仲村 様
    お世話になります。

    いつもこちらを参考にさせていただいております。
    ありがとうございます。

    今回サイトのタイトルを非表示にする事につきまして
    ご指導を仰ぎたく質問させていただきます。

    テーマはMont Blanc というマイナーなテーマを
    使用しています。

    カスタムヘッダーよりヘッダー画像を作成した
    ものに変更しました。

    サイトには、
    【サイトタイトル】
    【キャッチフレーズ】
    【作成ヘッダー画像】
    上下に並んで表示されています。

    作成画像にサイトタイトルを入れるつもりなので
    画像上に表示されているサイトタイトルとキャッチ
    フレーズを非表示にしたいです。

    カスタムヘッダーには非表示にするところがなくphp
    を触るしかなさそうです。こちらのテーマに関する
    事を色々調べてみましたがまったくわからずうまく
    いきそうもありません。

    お忙しいところ大変恐れ入ります。
    ご指導いただければ幸いでございます。
    よろしくお願いします。

    1. Ryu様、コメントありがとうございます。

      当記事に関するご質問にはお答えしていますが、
      オリジナルで開発された製品の機能やカスタマイズに関するご質問等は
      直接開発元にご確認いただいています。

      また、WordPress本体や公式プラグイン、テーマなどの使用方法などは、
      本家サイトの http://ja.forums.wordpress.org/ でご質問いただく方法もあります。

      WordPressはオープンソースで開発が進められています。
      ご質問することでWordPress開発に貢献できるかと思います。

  2. 中村 様

    お忙しい中ご指導ありがとうございます。
    フォーラムの方にも質問してみました。
    回答は得られたのですが、とても専門的な
    回答だったので…。

    もう少し頑張ってみます。
    お手数おかけいたしました。

  3. 仲村 様
    お忙しいところ失礼します。
    いつも沢山の情報を提供していただきありがとうございます。
    ワードプレスを始めてからはずっと参考にさせてもらっています。

    2点、どうしても気になった・解決ができない悩みがあり
    ご質問をさせていただきます。

    ①先日、Xeoryを使ってみたのですが、ヘッダー・背景の項目が無いので
     どうするべきか悩んでいます。
     
     こちらの記事のヘッダー画像追加の説明では「外観⇒ヘッダー」があるようなので
     どのように問題を解決されたのかとても気になります。

     私の今の現状では、外観の欄にヘッダーの項目自体が無い状態にあるため
     ヘッダーの追加ができません。
     どのように対処をすれば良いでしょうか?

    ②記事の記入時のh1やh2と言った見出しについて
     デザイン変更はどこで行えば良いのでしょうか?
     例えば御社のサイトの様な見出しにするには何を変更や追記をすれば良いでしょうか?

    お忙しいところ恐縮ですが、お返事をいただけたら幸いです。
    よろしくお願いいたします。

コメントは停止中です。