賢威6.1ヘッダー画像（トップ画像）に変更する方法

• Tweet
• 

賢威6.1テンプレートで、ヘッダーテキスト部分をヘッダー画像に差し替える方法を説明します。

サイト・ブログ作成開始の時にヘッダー画像が完成していれば、賢威テンプレートダウンロード時に画像をあらかじめ挿入出来ます。

しかしテンプレートをダウンロードする段階では、「ヘッダー画像は後で作ろう」と思い、テキストタイプでダウンロードする人が多いのではないでしょうか。

でもご安心。ヘッダーをテキストタイプでインストールしても、カスタマイズすることで後からでもヘッダー画像に差し替えることが出来ます。

【賢威6.1】ヘッダー画像に変更するカスタマイズ

メディア　→　新規追加で、ヘッダー画像をアップロードしておきます。

メディア　→編集を選択。



画像の右側に、画像のURLが表示されますので、メモ帳等にコピーしておきます。


次に、ダッシュボード　→外観　→テーマ編集　→header.phpを選択。

以下の記述部分を変更します。
「ここにヘッダーのURL」の部分に、先ほどコピーしておいたヘッダー画像のURLを貼り付けて更新しましょう。

【変更前】

<!--▼ヘッダー-->
<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="ここにヘッダーのURL" alt="<?php bloginfo('name'); ?>"></a></h1>
</div>

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

これでヘッダー画像に変更出来ました。高さは自動調節されます。

今回は間に合わせの画像で説明しましたが、背景色やサイト全体のテーマカラーに合わせると良いと思います。

以上、ヘッダーテキストからヘッダー画像に変更する方法でした。