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

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

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

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


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

まずは、Wordpressのヘッダー画面を設定する方法を解説する。

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

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

ヘッダーを選択

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

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

新規画像を追加

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

ファイルを選択

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

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

画像を選択

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

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

ヘッダー画像を選択

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

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

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

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

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

①左上の「歯車」のアイコンを選択する
②「下書きとして保存」にチェックを入れる
③「下書きとして保存」を選択する
④プレビューリンクのURLの選択をクリック

プレビュー

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

公開


2.ヘッダーロゴを設定する

次に、ヘッダーロゴの設定方法を解説する。ヘッダーロゴとは、会社やサイトのイメージロゴを表示させることである。ヘッダーロゴを設定することで、サイトや商品をより印象付けられるためおすすめだ。

ヘッダーロゴの設定方法は使用するデザインテーマにより異なる。ここでは、最も一般的な設定方法を解説していこう。

WordPressの管理画面の左メニューの「外観」から「カスタマイズ」にアクセスする。

「サイト基本情報」の「ロゴを選択」をクリックする。

「ファイルをアップロード」をクリックする。

ダイアログ画面から、「ファイルを選択」をクリックし、用意しておいたヘッダーロゴ画像を選択する。ここでも、サイズは使用するデザインテーマにより異なるため、事前に確認しておこう。

メディアライブラリにヘッダーロゴ画像が保存される。ヘッダーロゴ画像にチェックが入っていることを確認し、右下の「選択」をクリックする。

画像を切り抜きする画面にアクセスできる。ヘッダー画像の項目でも解説した通り、ここでサイズなどを細かく設定することは難しいため、編集しなくても良いようにあらかじめヘッダーロゴは完成させて読み込もう。

ここでも、切り抜きは行わないため「切り抜かない」をクリックする。

これでヘッダーロゴの設定は完了だ。

デザインテーマによってはロゴのサイズや位置などを細かく設定できるものもある。各々で調整してみてほしい。


3.グローバルナビゲーションを設定する

ここでは、グローバルナビゲーションの設定方法を解説する。グローバルナビゲーションとは、誘導させたい固定ページやカテゴリーなどをサイト内で見やすく表示させるメニューのことだ。

例えばバズ部のサイトでいうと、以下のようなものがグローバルナビゲーションである。

これを設定することで回遊率が上がるため、ぜひ設定することをおすすめする。

グローバルナビゲーションの設定方法は至ってシンプルだ。まず、Wordpress管理画面の「外観」から「メニュー」を選択する。

すると、メニューの設定画面が表示される。

今回は新しいメニューを作成するため、「新しいメニューを作成しましょう」をクリックする。

「メニュー構造」の「メニュー名」に任意の名前を入力し、「メニューを作成」をクリックする。今回は「テスト」で作成した。

「メニュー項目を追加」の「すべてを表示」タブをクリックし、入れたい項目をチェックして「メニューに追加をクリックする。

すると「メニュー構造」に選択した項目が表示される。ここで、それぞれの項目を細かく設定することができる。順番を変えたい場合はドラッグ&ドロップで編集可能だ。

最後に、「メニュー設定」で「グローバルナビ」のチェック欄にチェックを入れて「メニューを保存」して完了だ。

実際にグローバルナビゲーションが設定されているか確認してみよう。

ちなみに、グローバルナビゲーションのデザインの変更などについては使用するデザインテーマにより大きく異なる。さらに細かく設定したい場合はデザインテーマを確認してみよう。


4.まとめ

以上、この記事では以下の設定方法について詳しく解説してきた。

  • ヘッダー画像の設定方法
  • ヘッダーロゴの設定方法
  • グローバルナビゲーションの設定方法

いずれも簡単に設定できるため、ぜひ試してみてもらいたい。ただし、細かな設定方法に関しては、使うデザインテーマによっても若干操作方法が異なるため注意が必要だ。

ヘッダーの設定によってサイトの印象は大きく変わってくるため、ぜひ自分好みにカスタマイズしてみてもらいたい。

無料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と言った見出しについて
     デザイン変更はどこで行えば良いのでしょうか?
     例えば御社のサイトの様な見出しにするには何を変更や追記をすれば良いでしょうか?

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

コメントは停止中です。