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

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

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

１．ヘッダー画像を設定する

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

１－１．ヘッダー画像の設定画面にアクセス

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

１－２．ヘッダー画像を選択する

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

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

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

１－３．ヘッダー画像を設定する

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

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

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

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

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

２．ヘッダーロゴを設定する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

４．まとめ

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

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

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

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