賢威ヘッダーを画像に変える－背景画像挿入・文字と画像の入れ替え

賢威のヘッダーを画像にする方法として
①文字（テキスト）の後ろに背景画像を設置する方法と
②文字（テキスト）をなくしてヘッダー画像を設置する方法があります。

この2つの方法をご紹介します。

ヘッダーの位置はここです。

 

文字の後ろに背景画像を設置する

ヘッダーの背景画像は『design.css』で設置します。

文字の後ろに背景画像を設置する場合 画像は『テクスチャ』を使用します。
こんな正方形のものや長方形のものを使います。

　

 

 

 

まずはテクスチャを準備します。

『テクスチャ　フリー』などのキーワードで検索すれば
無料でテクスチャを提供してくれているサイトがたくさん出てきます。

ちなみに上のテクスチヤは下記のサイトから頂いてきました。
フリーテクスチャ素材館

テクスチャを準備できたらその画像をメディアライブラリに保存します。

 

WordPress管理画面＞メディア＞新規追加をクリックします。

 

準備したテクスチャをドラッグ&ドロップします。

 

「編集」をクリックします。

 

右上に画像のURLが出てきますので
このURLをコピーするなどして控えておいてください。

http://〇〇〇.com/wp-content/uploads/2014/09/headerg01.png

 

テクスチャをヘッダーの背景に設置します。 WordPress管理画面＞外観＞テーマ編集をクリックします。

 

右のメニューの下の方の『design.css』をクリックします。

 

「テーマの編集画面」の少し下にさがったところに
/*--------------------------------------------------------
ヘッダー
--------------------------------------------------------*/
と、あります。

すぐ下の赤字部分を変更します。

＜変更前＞

#header{ background-color: #fff; font-size: 1.2em; }

 

＜変更後＞

#header{ background:url(画像のURL)center top repeat #fff; font-size: 1.2em; }

 

記述を変更したら一番下の「ファイルを更新する」をクリックします。
以下も同様に、記述を変更した場合はファイルを更新します。

 

画像のURLは先ほど控えたテクスチャのURLです。
ちなみにrepeatは画像を繰り返し表示するという意味です。

repeatをrepeat-xに変更すると横方向に繰り返します。

 

repeat-yに変更すると縦方向に繰り返します。

 

repeatのままですと横と縦に繰り返します。

 

 

文字（テキスト）をなくして画像を入れる

まずはヘッダー画像を準備します。

PhotoScapeなどの画像編集ソフトでヘッダー画像を作ります。
サイズは賢威の横幅が950pxなので、横950px×縦150～200pxぐらいがいいと思います。
PhotoScapeの基本的な使い方はこちらの記事を参考にしてください。

こんなのを作りました。

 

ヘッダー画像の準備ができたらその画像をメディアライブラリに保存します。

WordPress管理画面＞メディア＞新規追加をクリックします。
準備したヘッダー画像をドラッグ&ドロップし、「編集」をクリックします。
背景画像のときと同じ要領です。

右上に画像のURLが出てきますので
このURLをコピーするなどして控えておいてください。
http://〇〇〇.com/wp-content/uploads/2014/09/headerg13.png

 

ヘッダーの文字（テキスト）の代わりに画像を入れます。
WordPress管理画面＞外観＞テーマ編集をクリックします。

右横のメニューの上から5番目の『ヘッダー(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"> <p class="header-logo"><a href="<?php bloginfo(‘url’); ?>"> <img src="ヘッダー画像URL" alt="" /></a></p> <h1><?php h1_keni(); ?></h1> </div> </div> </div> <!–▲ヘッダー–>

 

このようになります。

 

 

ヘッダー画像の上下の余白を調整する

少し上と下の余白が気になりますので
ここを縮めます。

WordPress管理画面＞外観＞テーマ編集をクリックして
『design.css』を選択します。

余白の高さを変更するところは次の通りです。
数字を変えて最適な高さに調整してみてください。

 

 

ヘッダー画像の下の余白（②の部分）だけ縮めました。

 

ヘッダー画像をスマホ用のサイズにする

ヘッダー画像を変更しましたが、スマホではどのように見えているのでしょう？

パソコンでは大きく表示されていましたが
スマホで見るとかなり小さいですね。

 

スマホでも良く見えるようにするには
スマホ用の画像を作って、『ヘッダー(header.php)』を変更する必要があります。

画像のサイズは横320px×縦240pxぐらいがいいでしょう。
スマホ用のヘッダー画像の準備ができたら先に画像をメディアライブラリに保存してください。

この画像をスマホ用のヘッダーとして挿入します。

 

 

WordPress管理画面＞外観＞テーマ編集＞『ヘッダー(header.php)』で
先ほど変更したコードをさらに下記のように変更します。 

＜変更前＞ 

<!–▼ヘッダー–> <div id="header"> <div id="header-in"> <div id="header-title"> <p class="header-logo"><a href="<?php bloginfo(‘url’); ?>"> <img src="ヘッダー画像URL" alt="" /></a></p> <h1><?php h1_keni(); ?></h1> </div> </div> </div> <!–▲ヘッダー–>

 

＜変更後＞

<!–▼ヘッダー–> <div id="header"> <div id="header-in"> <div id="header-title"> <p class="header-logo"><a href="<?php bloginfo(‘url’); ?>"> <?php if (wp_is_mobile()) :?><img src="スマホ用のヘッダー画像URL" alt=""> <?php else : ?><img src="パソコン用のヘッダー画像URL" alt=""> <?php endif; ?></a></p> <h1><?php h1_keni(); ?></h1> </div> </div> </div> <!–▲ヘッダー–>

 

 このようになりました。