またまたWPtouch

今日はヘッダーと背景の変更。

カスタマイズするにあたって、wp-content/plugins/wptouch/themes/defaultを複製して変更を加えていっています。

まずヘッダー画像

またも下手くそ&ひねりなし・・・

wp-content/plugins/wptouch/themes/defaultの複製/header.phpに変更を加えます。

まず既存のヘッダーの背景が要らないので

<body class="<?php wptouch_core_body_background(); ?> <?php wptouch_idevice_classes(); ?>">

<body class="<?php wptouch_idevice_classes(); ?>">

に変更。

次にstyle.css

#headerbarに

background-color:#FFF !important;

#headerbar-title aを

#headerbar-title a {
	letter-spacing: -1px;
	position: relative;
	display: block;
	width: 150px;
	height: 34px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../../images/sptitle1.gif) no-repeat 0 0;
}

これだけだと、下の画像の1の部分の画像が残ってしまいます。

画像は先日の使い回しなので1以外は気にしないでください。

これを消す為にCSSをさらに

#headerbar-title img#logo-icon {
	display: none;
}

メニューボタンも大きくわかりやすく

90×90で画像を作りました。
青文字良くないな・・・

#headerbar-menu a {
	height: 45px;
	display: block;
	background: url(../../images/spmenu.gif) 0 0;
	width: 90px;
	margin: 0;
	padding: 0;
}

こんな感じです。

あとはSEARCHの部分を消して、CSSのbodyにbackground:url(背景画像)を入れて終わりにしました。

こんな感じ。

デザインセンスが全くないphotoshopやIllustratorのスキルが全くないというダメっぷりなので見栄えが悪いです・・・

明日は休みなので一日photoshopで素材作りをやってみようかなと思ってます。

カスタマイズにあたってCREATIVEMEMOMEMOさんを参考にさせて頂きました。

とてもわかり易く説明されているので助かりました。
眠気眼で記事を書いているので何を言ってるのかわからない事が多いと思いますので、イレギュラーで当サイトに来てしまった方はCREATIVEMEMOMEMOを参考にしてください(笑

それと、先日Google Adsenseの二次審査が通り無事に広告が表示されました。

特にお金が欲しいとかいうわけでなく、広告を載せたことがないって事が嫌だったから試しただけですがw

一段落ついたら、どうやったら広告収入を増やす事ができるのかを勉強してみようかなとか思います。

関連記事