ホームページ無料作成　WordPressでホームページ

本サイトで使用中のテーマのテンプレート無料配布（ダウンロード）を開始致しました。

そのままご利用頂く場合は無料でお使いいただけます。

またカスタマイズの参考にスタイルシートの編集方法の参考もアップいたしましたのでご利用ください。
（カスタマイズを行う場合は有料3,150円かかります）

背景画像の変更

wp-content/themes/wdtkihon/images/
navi.jpg

を変更しますと背景の画像が変わります。

style.css
510行目

#menu ul li ul li a {
color: #5F5F5F;　←通常表示の文字色
text-decoration: none;
display: block;
}

#menu ul li ul li a:hover {
color: #FFFFFF;　←マウスが上に来た時の文字色
margin: 0;
padding: 0;
background: url(images/navi.jpg) top right no-repeat;
display: block;
}

文字サイズを設定する場合は1行追加して

style.css
510行目

#menu ul li ul li a {
color: #5F5F5F;
font-size: 15px;
text-decoration: none;
display: block;
}

記事関係

・記事の文字

style.css
112行目

#content {
position: relative;
left: 30px;　←文字の左側の余白です。
float: left;
padding: 0;
width: 480px;
color: #666666;　←記事の文字色

文字サイズを変更したい場合は、下記赤字のの1行を追加して文字サイズを指定します。

style.css
112行目

#content {
position: relative;
left: 30px;
float: left;
padding: 0;
width: 480px;
color: #666666;
font-size: 13px;
}

記事のタイトル部分

黄緑の背景でページのタイトルが表示されている部分

背景に使用している画像は
/public_html/wp-content/themes/wdtkihon/images
h3.jpg

style.css
172行目

#content h3 {
width: 480px; ←背景画像の横幅
height: 40px;　←背景画像の高さ
margin: 0;
padding: 3px 0px 0px 20px;　文字の位置　上余白-　-下余白-左余白
}

#content h3.storytitle, #content h3.storytitle a {
font-size: 16px;　←文字サイズ
color: #5F707A;　←通常表示時の文字色
text-decoration: none;
background: url(images/h3.jpg) top left no-repeat;　←背景画像
}

#content h3.storytitle a:hover {
color: #495865;　←マウスが上に来た時の文字色
text-decoration: none;

ホームページのタイトル表示

ワードプレスでホームページ作成とテーマ販売　と表示している部分

style.css
121行目

#content h2 {
border-bottom: 1px solid #6F6F6F;　アンダーラインの幅と色
color: #5F707A;　←文字の色
font-size: 13px;　←文字の大きさ
margin: 20px 0 5px 0;　←上の余白　下の余白
padding: 0 0 3px 0;　←アンダーラインと文字の間隔
text-align: right;
width: 480px;
}

上部に並んでいるメニュー回りのデザインカスタマイズ方法

メニューの背景

メニューの通常表示している時の背景はwp-content/themes/wdtkihon/images/にある
page.jpg　を使用しています。

通常表示している時の背景を変更する場合はpage.jpgを変更します。

style.css
247行目

#navcontainer ul {
padding: 0;
margin: 0;
background: #FFFFFF;
float: left;
width: 760px;
height: 30px;　←メニュー高さ（上下幅）
background:url(images/page.jpg) top left no-repeat;
font: 13px Osaka, Verdana, sans-serif;　←メニューの文字の大きさ

style.css
262行目

#navcontainer ul li.page_item a {
padding: 5px 14px 5px 14px;　←文字の余白　上-右-下-左
color: #666666;　←通常表示での文字色
text-decoration: none;
font-weight: bold;
float: left;
border-right: 1px solid #666666;　←メニュー同士を区切っている線の幅と色
}

#navcontainer ul li.page_item a:hover {
color: #009900;　←マウスが上に来た時のメニューの文字色

style.css
275行目

#navcontainer ul li.current_page_item a {
padding: 5px 14px 5px 14px;　←選択されているページメニュー文字の余白　上-右-下-左
background: #009900;　←選択されているページの背景色
color: #FFFFFF;　←選択されているページメニュー文字の文字色
text-decoration: none;
float: left;
border-right: 1px solid #DFDFDF;　←選択されているページメニューの右区切り線の幅と色
}

#navcontainer ul li.current_page_item a:hover {
background: #ECF3CF;　←選択されたページメニューの上にマウスが来た時の背景色
}

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

・背景色の変更

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

”style.css”
40行目

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

}

■解凍とアップロード

ダウンロードした”wdtkihon.zip”ファイルを解凍します。

<wdtkihon>と名前の付いたフォルダが作成されますのでフォルダごと、サーバーにアップロードします。

アップロードする場所は
wp-content/themes

にアップロードします。

■テーマの切り替え

管理画面にログイン後、メニューよりデザインを選択して＜WdtBuilder 1.1 ＞を選択するとテーマが適用されます。