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

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

次に「画像を選択」にある「選択」をクリックする。メディアライブラリを使って設定したい場合は「画像の選択」をクリックすると良い。

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

次のダイアログ画面が表示されるので、用意したヘッダー画像をクリックしよう。

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

すると選択した画像のファイル名が表示されるので、「アップロード」をクリックしよう。

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

下図のように「ヘッダーを更新しました。」と表示されたらヘッダー画像のアップは完了だ。

実際にヘッダー画像がどのように表示されるかをプレビューで確認しよう。

5.サイトタイトルを非表示にする設定方法

ここでヘッダーのサイトタイトルを非表示にすることもできる。これはヘッダー画像にタイトルが挿入された場合、タイトル表示がかぶるのを防ぐ役割がある。設定は図の通りチェックを外すだけだ。

設定内容を保存するために「変更を保存」を忘れずにクリックしよう。

その他の操作方法について

テーマのカスタマイズに関しては、ヘッダー画像以外にも背景画像を設定することもできる。『WordPress の背景画像を設定する方法』を確認しておこう。

  • このエントリーをはてなブックマークに追加

コンテンツ制作に集中するだけで圧倒的な成果を上げる
『 bazubu-shiki 』

cta_bazubushiki“ bazubu-shiki(バズブシキ)” とは、バズ部の運営ノウハウを凝縮した
クラウド型コンテンツマーケティング専用CMSです。

  • ・検索エンジンを徹底的に意識したサイト構造
  • ・誰でも簡単にコンテンツが作れる
  • ・コンバージョンを獲得するための機能も完備
  • ・外部連携も安心!SNS、GAとの連携も万全サポート
  • ・常に最新機能が使える!クラウドを活かしたシステム

専門知識がない方でもコンテンツ制作にのみ集中することができます。
100万PVを超えるメディアを作るために、ぜひ導入してみてください。


" bazubu-shiki " について詳しく見る

最新の記事情報が取得できます

Facebook

「いいね!」ボタンを押すと、最新情報がすぐに確認できるようになります。

Twitter

「フォローする」ボタンを押すと、最新情報がすぐにツイート上で確認できるようになります。

コメントはこちらから

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

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

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

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

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

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

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

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

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

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

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

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

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

  2. 中村 様

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

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

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

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

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

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

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

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