賢威6.1ヘッダーテキストを画像に変更する設定

賢威6.1Wordpress版で、最初にヘッダーをテキスト形式でダウンロードした後、
ヘッダー画像を別で設定したい時の方法を解説していきます。

賢威6.1のヘッダー変更は、「外観」→「テーマの編集」より行います。
（グローバルメニュー下にあるイメージ画像ではなく、ヘッダー画像です）

ヘッダーテキストを画像に変更する設定方法

まず、ヘッダーテキストから画像に変更する「画像」を用意します。

1. 画像をWordpressにアップロードします。

先にヘッダー画像をアップロードしておきます。

画像は「メディア」→「新規追加」よりアップロードします。

上記の赤枠部分の画像URLを利用します。

2. header.phpを編集します。

「外観」→「テーマの編集」→「ヘッダー（header.php）」より記述を変更していきます。

header.phpの以下記述部分を変更します。

変更前記述

<!–▼ヘッダー–>
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p>

<h1><?php h1_keni(); ?></h1>
</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!–▲ヘッダー–>

変更後の記述

<!–▼ヘッダー–>
<div id="header">
<div id="header-in">

<div id="header-title">
<h1><a href="<?php bloginfo('url'); ?>"><img src="" alt="<?php bloginfo('name'); ?>"></a></h1>
</div>

</div>
</div>
<!–▲ヘッダー–>

3. 変更後記述の画像指定部分にヘッダー画像URLを記述します。

<!–▼ヘッダー–>
<div id="header">
<div id="header-in">

<div id="header-title">
<h1><a href="<?php bloginfo('url'); ?>"><img src="ここにヘッダー画像URLを入れる" alt="<?php bloginfo('name'); ?>"></a></h1>
</div>

</div>
</div>
<!–▲ヘッダー–>

これで設定は完了となります。

賢威ヘッダー画像設定例

上記の設定をテストしてみます。

下記のテストサイトヘッダーテキストを画像に変更します。

1. 予め、ヘッダー画像をアップロードしてURLを記録しておきます。
2. header.phpを編集します。

以下、画像赤枠内を編集していきます。


3. header.phpのヘッド部分記述を変更し、ヘッダー画像URLも記述する

以下、赤枠部分の記述を上記手順どおりに変更していきます。

赤枠内のURLが、テストサイトのヘッダー画像URLとなります。

4. 保存して完了

以下のようにヘッダー画像に変更となります。

賢威カスタム設定関連記事

ヘッダー画像の上下部分を詰めたり、
その他の調整方法などは別記事を参照して下さい。

• 賢威6.1 ヘッダー画像の上下のスペースを詰める設定方法

ヘッダー画像のスペース微調整をする設定です。

• 賢威6.1WordPressテンプレート導入からカスタム設定方法まとめ

賢威6.1カスタム設定記事まとめページです。