賢威テンプレート テキストヘッダーを画像に変える方法

賢威テンプレート プリティ版テキストヘッダーを画像に変える方法を説明いたします。

 

賢威テンプレートのヘッダー画像をテキストヘッダーに設定しているサイトを見てプリティ版

ユーザーも変更したいけれど難しそうだからあきらめている方も多かったので一度挑戦してみては^^

変更する前に バックアップは忘れずにとっておいてくださいね!!

 

方法「その1」

(レスポンシブデザイン対応編)

 

変更箇所は header.phpを編集します。

      「外観」→「テーマの編集」→「ヘッダー(header.php)」を開きます。
      header.phpの以下記述部分を変更します。
変更前記述

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

<div id=”header-title”>
<p><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>
<!–▲ヘッダー–>


 

以上の作業でテキスト部が画像に変更されています。

 

 

方法その2

(レスポンシブデザイン非対応編)

ワードプレス管理画面から

外観>テーマ編集>design.css と進みます。
/*——————————————————–
ヘッダー
——————————————————–*/

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

#header-in{ padding: 1em 0; }

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の<h1>の1行の幅はこちらのwidthの値を変更*/
}

という所に 必要なコードを追加します

主に下記4つで大丈夫です。

画像の追加

background:url(画像URL);

画像の中央寄せ

background-position: center;

このままでは 画像が繰り返し設定のままですので繰り返したくない場合は
background-repeat: no-repeat;

画像の高さ調整は
height:147px; /の数字を変えてください。

 

/*——————————————————–
ヘッダー

——————————————————–*/

#header{

background:url(画像URL); 
background-position: center; 
background-repeat: no-repeat; 
height:147px; /

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

のように記述しましたら テキストヘッダーを画像に変えることができます。

このままでは画像にテキストヘッダーの文字とタイトルの文字が被さってしまってますので

関連記事

賢威テンプレート プリティ版テキストヘッダーの文字を消す方法

賢威テンプレート プリティ版タイトル文字を消す方法

をご参考ください。

             夢実現プロジェクト・メールマガジン講座

AYUMI&HIROの夢実現プロジェクト始動
あなたは現状に満足されてますか?


magajin

本気で稼ぐ気があるのならご参加下さい。
アフィリエイトで稼ぐためのメールマガジン講座

btn043

この記事はお役に立てましたでしょうか? また他の誰かの役に立ちそうだと思っていただけたら、下のボタンから共有をいただけましたら運営者のモチベーション維持にもつながります。

ブログランキング・にほんブログ村へ
にほんブログ村

コメントを残す

サブコンテンツ

このページの先頭へ