今回はWordPressテーマ賢威の
ヘッダーをテキストから画像へ変更
するカスタマイズ方法を紹介します。

↓このサイトでいうと以下がヘッダー画像です。

 

ヘッダーをオリジナル画像に設定し、
他のサイトとの差別化をしましょう。

賢威のヘッダーを画像へ変更するための画像の準備

まず、
ヘッダー画像を変更する前に
画像を準備する必要があります。

画像サイズは、
サイトの横幅に合わせると良いでしょう。

サイトの横幅は以下から
確認することができます。
 

WordPressのダッシュボードにある
「外観」→「テーマエディター」をクリックします。

 

「layout.css」は賢威サイトのレイアウト
を管理するためのCSSで、このファイルで
サイトの横幅を設定しています。

参考→賢威6.2のテンプレート一覧（phpとcss）

「layout.css」を開いたら、
「px」で検索してみてください。

※検索はショートカットキー「CTRL + F」
 

サイト横幅は
1～3カラムごとに設定されていますが、
デフォルトの状態から変更していなければ
全て同じサイズのはずです。

以下のように「950px」などと
表示されているのではないでしょうか？

これがサイトの横幅ですので、
このサイズに合わせて画像を
準備しましょう。
 

縦のサイズは任意です。
他のサイトを参考にすると良いでしょう。

参考にしたい賢威のサイトを開いて、
そのサイトのヘッダー画像の上で
「右クリック」
→「名前をつけて画像を保存」
をクリックします。

そうすると、
他サイトのヘッダー画像を
ダウンロードすることができますので、
そのサイズを確認します。

画像の「プロパティ」→「詳細」
で確認できます。
 

画像が準備できたら、
ダッシュボードの「メディア」から
「新規追加」でアップロードします。

アップロードした画像のURLは
後で使用しますので、メモ帳などに
コピーしておいてください。

賢威のヘッダーを画像へ変更するカスタマイズ方法

ダッシュボードの「外観」→「テーマ編集」
→「ヘッダー(header.php)」をクリック。

 

「header.php」内の
「<!–▼ヘッダー–>」～
「<!–▲ヘッダー–>」間を編集します。

編集する部分は以下です。

■編集前

↓
■編集後

「画像URL」はメモ帳などにコピーした
ヘッダー画像のURLです。

編集したら、
【ファイルを更新】をクリックします。

 

以上で
ヘッダー画像の設定は完了です。
 

ヘッダーはオリジナル画像を設定し、
他サイトとの差別化していきましょう。