2008/7/4 金曜日

ヘッダー部分

カテゴリー: テーマのカスタマイズ — admin @ 12:13:43

A・タイトル表示部分の変更

・背景色の変更

緑色の部分を変更する場合はテーマファイル内の”style.css”を編集します。

”style.css”
40行目

#header {
background-color: #009900; ←緑色になっている部分の色番号を変更します。
width: 760px;
height: 30px; ←高さの設定を変更する場合はここです。
margin: 0;
padding: 0;
border-bottom:1px #CCCCCC solid; ←下部(タイトル表示の下)のアンダーラインです。1pxはラインの幅、#CCCCCCはラインの色です。

・文字の変更

白抜きでワードプレスでホームページ作成とテーマ販売になっている部分

”style.css”
55行目

#headerimg a {
position: relative;
top: 0px; ←数字を大きくすると文字が下に下がります。
left: 10px; ←数字を大きくすると文字が右に移動します。
font-size: 12px; ←文字のサイズです。
background: transparent;
padding: 2px;
color: #ffffff;  ←文字色の設定です。
text-decoration: none;
}

#headerimg a:hover {
position: relative;
top: 0px; ←数字を大きくするとマウスが上に来た時の文字表示位置が下に下がります。
left: 10px; ←数字を大きくするとマウスが上に来た時の文字表示が右に移動します。
font-size: 12px; ←マウスが上に来た時の文字の大きさです、通常表示と合わせます。
background: transparent;
padding: 2px;
color: #dcdcdc; ←マウスが上に来た時の文字色です。
text-decoration: none;
}

白抜きで新規顧客開拓・集客・売り上げアップは、あなたでも出来る!になっている部分

”style.css”
77行目

#description {
position: relative;
float: right;
top: 0px; ←数字を大きくすると文字が下に下がります。
right: 10px; ←数字を大きくすると文字が左に移動します。
font-size: 12px; ←文字サイズです。
background: transparent;
color: #FFFFFF; ←文字色の設定です。
text-decoration: none;
}
B・ヘッダー画像の変更

画像ファイルの変更

使用しているヘッダー画像はthemes/wdtkihon/images/に保存されている
header.jpg をお好みの画像に変更します。

使われている画像の大きさは 760×136です。

これ以外の大きさの画像を使用したい場合は、”style.css”の設定を変更しますが幅を変更する場合は、他の部分も幅を変更しませんと表示がおかしくなりますので高さだけの変更をお勧めします。

”style.css” 2か所変更
89行目

#banner {
clear: both;
background: url(images/header.jpg);
width: 760px;
height: 136px; ←使用するヘッダー画像の高さに合わせて数字を変更します。
margin: 0;
padding: 0;

}

#banner a {
width: 760px;
height: 136px; ←使用するヘッダー画像の高さに合わせて数字を変更します。
display: block;

}

コメントはまだありません

コメントはまだありません。

このコメント欄の RSS フィード

コメントフォームは現在閉鎖中です。

Powered by Word Press de Homepage