【WordPress】モバイル用テーマ「WPtap」をカスタマイズ　～その１～

まぁ大したことはしてないのですが、何回かにわけてカスタマイズした場所を書いてみようと思いますので宜しければお付き合いくださいませ。

では早速・・・

ヘッダーを画像に変える

ヘッダー部分がごちゃごちゃしていて更にダサいのでガッツリ削りました。

9行目にある

<div id="home_title" style="margin-left:6px;">

ここから20行目の

</div>

までがっつりコメントアウト、または削除します。

その後に自分で用意した画像を任意の場所にアップロードします。

僕は「wptap/themes/News Press/images」に放り込んで置きました。

そして8行目の

<div id="header">

この部分の下に

<a href="ここにサイトのTOPページのURL"><img src="ここにアップロードした場所を記入" alt="header画像" /></a>

こんな感じで入れます。

ちなみに僕はロゴのみの透過画像を使っています。

理由はスマホを横回転した時にヘッダー画像が拡大されて劣化するのが嫌なのと、ページの背景色とヘッダー画像の背景色を同じにするつもりだったからです。

画像の背景をページの背景と合わせておくとスマホを横回転させた時に画像だけ分離して見えるのを防げて良いかもしれません。

ページ背景のカスタムは次で説明します。

 ページの背景色を変更する

これはとても簡単でした。

style.cssの93行目付近にある

/* Containers */
#page {
}

この部分に

/* Containers */
#page {
background-color: #FF0000;
}

背景色を指定するだけです。

 ダサいタブの見た目を変える

ヘッダー下部にある「Home」「Category」「Page」「検索」「Login」というタブがあるのですが、これがまたダサい。

いっそのこと消えてしまえ！！と思い削除しようと思ったのですが、まぁ見た目さえまともになればあってもいいかということで見た目だけの修正にしました。

（ただ、うちのサイトの構成上「Page」タブだけは削除しました）

style.cssの

#header .nav li a,#header .nav li a:visited{
 display:inline-block;
 width:57px;
 background:url(images/bg-icons.png) no-repeat 0 0;
 height:21px;
 line-height:21px;
 text-align:center;
 color:#fff;
}

この部分の「background:url」の行を削除するだけでOKです。