バズログ BUZZLOG

MENU

ホームページ制作

WordPressのヘッダー画像を設定する方法と2つの応用術

かまとりーぬ 2

目次

WordPressのヘッダー画像を設定したい!

サイトの顔ともなるヘッダー画像を設定してオリジナリティ溢れるサイトを作成しましょう。

ヘッダー画像はサイトのタイトルを入れたものや画像など、好きなものに設定する事が出来ます。

今回はヘッダーに関する3つの事について詳しく紹介していきましょう。

  • 基本的なヘッダー画像の設定方法
  • サイトタイトルを非表示にする方法
  • 複数のヘッダー画像をランダムに表示する方法

上記3つの設定方法について詳しく紹介していきます。

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

基本的なヘッダー画像を設定する方法について紹介しましょう。

ヘッダー画像を設定する前に、まずは画像を用意する必要があります。

ヘッダー画像のサイズはテーマにより異なる為、事前に確認しておきましょう。

今回は「Twenty Twelve」というテーマでヘッダー画像を設定していきます。

Twenty Twelveのヘッダー画像サイズは「960×250です。

ぜひ参考にしてみて下さい。

1-1:Twenty Twelveでヘッダー画像を設定する全手順

ヘッダー画像を設定するまでの全手順を詳しく紹介していきます。

まずはWordPressにログインしておきましょう。

(1) 外観→「ヘッダー」クリック

ヘッダー画像 設定

(2) ヘッダー画像の設定画面になる

ヘッダー画像 設定

(3) 「新規画像を追加」クリック

ヘッダー画像 設定

(4) ヘッダー画像に設定する画像をアップロードする

ヘッダー画像 設定

(5) 画像を選択して、画面右下の「選択して切り抜く」をクリック

ヘッダー画像 設定

(6) 画像の切り抜き

選択した画像の切り抜き画面になります。

画像を切り抜く必要がない場合には、何もせず画面右下の「切り抜かない」をクリックしましょう。

ヘッダー画像 設定

(7) ヘッダー画像が表示される

選択した画像がプレビューで表示されます。

サイズ感等に問題がないか確認しましょう。

ヘッダー画像 設定

(8) 「公開」をクリックして変更を保存する

画面左上の「公開」をクリックして変更を保存し完了です。

公開ボタン

サイトを表示してヘッダー画像がきちんと保存されているか確認しましょう。

WordPress ヘッダー画像

上記の様にきちんと表示されていたら、設定は完了です。

2:WordPressのサイトタイトルを非表示にする方法

WordPressのサイトタイトルとヘッダー画像の表記が、かぶっちゃってるなあ…。

ヘッダー画像にサイトタイトル名を表示させた場合、サイトの表記のタイトルがかぶってしまっていると見栄えが悪いですよね。

WordPress ヘッダー

例えば上記画像の様に、サイトタイトルとヘッダー画像の表記がかぶってしまっている場合には、サイトタイトルを非表示にする事で改善する事が出来ます。サイトタイトルを非表示にする方法を紹介しましょう。

2-1:サイトタイトルを非表示にする全手順

サイトタイトルを非表示にする詳しい手順について紹介します。

(1) 外観→「カスタマイズ」クリック

サイトタイトル 非表示

(2) 「サイトのタイトルとキャッチフレーズを表示」のクリックを外す

サイトタイトル 非表示

(3) 「公開」をクリックし変更を保存

チェックを外したら画面左上の「公開」をクリックして変更を保存します。

サイトタイトル 非表示

(4) プレビューでサイトタイトルが非表示になっているか確認し完了。

WordPress ヘッダー

以上の手順で設定すれば、上記画像の様にサイトタイトルは非表示になります。

以上でサイトタイトルの非表示設定は完了です。

3:複数のヘッダー画像をランダムに表示する方法

複数のヘッダー画像をランダムに表示させる方法は無いかな?

ヘッダー画像をいくつか表示させたい場合、ランダム設定を行う事でページが開かれる度にランダムにヘッダー画像を表示させる事が可能です。ランダム表示させたい場合にはぜひ参考にしてみて下さい。

3-1:ランダム表示の設定手順

複数のヘッダー画像をランダムに表示させる方法について紹介します。

(1) 外観→「ヘッダー」クリック

ヘッダー画像 ランダム

(2) ヘッダー画像に追加したい画像を「新規画像を追加」から追加していく

ヘッダー画像 ランダム

画像を追加していくと、下のアップロード済みに表示されていきます。

ヘッダー画像 ランダム

(3) 「アップロード済みヘッダーをランダムに表示」をクリック

アップロード済みの画像の下にある「アップロード済みヘッダーをランダムに表示」をクリックしましょう。

ヘッダー画像 ランダム

(4) 現在のヘッダー「アップロード済みヘッダーをランダム表示中」を確認

現在のヘッダーが「アップロード済みヘッダーをランダム表示中」となっていればランダムに表示する設定が出来ています。

ヘッダー画像 ランダム

(5) 画面左上の「公開」をクリックし変更内容を保存する

公開ボタン

変更内容を保存し設定は完了です。設定完了後、設定したヘッダー画像がランダムに表示されます。

ヘッダー画像 ランダム

まとめ

WordPressのヘッダー画像について詳しく解説してきました。

ヘッダー画像は好きな画像をヘッダーに設定する事ができます。

クリックするだけで簡単に設定する事ができるので、ヘッダー画像を設定してよりオリジナリティ溢れるサイトにしてみましょう。

ヘッダー画像のサイズは利用しているテーマ毎に異なるので、事前に確認する必要があります。

ぜひ参考にしてみて下さい。

会社案内から初心者向け解説資料まで幅広く資料をご用意しております!

ダウンロードはこちら ▷
  • このエントリーをはてなブックマークに追加

  • 2

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

    関連記事