about

sogo  
fukidasi

  social

Count per Day

  • 10271現在の記事:
  • 435今日の閲覧数:
  • 4現在オンライン中の人数:

WPtouchをちょっとだけ自分色にカスタマイズしてみる

iPhoneやAndroid搭載のスマートフォンの目覚しい普及に伴い、自分のブログがスマートフォンから訪問された場合の見た目について、重い腰を上げて少し考えて見ました。



本当ならば、スマホ用のテーマを一から作成すればいいのでしょうが、正直そのような気力も体力も時間もありませんので、WordPressのスマホ用テーマプラグインとしてあまりにも有名なWPtouchをお借りして、少しだけ自分色にしてみたいと思います。

実は、このプラグインは1年以上前から利用していて、iPhoneやAndroidから訪問された場合にも対応していたのですが、全くのデフォルト状態で表示されていました。そもそもWPtouchは、iPhone寄りの洗練されたUIでデフォルトの状態でも充分に見た目が綺麗なのですが、スマートフォンの普及と相成ってWPtouchの利用者も多くなっているせいか、同じUIのブログによく遭遇するのです。そこで、自分なりのオリジナリティを少しだけ出してみようかなと思いました。

やってみたカスタマイズメニュー



背景(壁紙)の変更

メニューボタンの変更

CSS編集だけで変更出来るetc

SyntaxHighlighter Evolvedを適応させる、その他PHP編集による設定


背景の変更(既存の壁紙画像ファイル名をそのままで画像を置き換える)


WPtouchにはデフォルトで何種類かの壁紙が用意されていて選択できるようにオプション設定で変更が可能になっていますが、これを上手く利用してしまうという、邪道とも言える方法です。


壁紙に設定する画像ファイルを用意する

Web上に多数のフリー素材が公開されておりますので、それらを用意するも自分で作成するも良しです。ちなみに、デフォルトでは128×128pxになっていますが、特にサイズを同じにする必要はありませんが、壁紙は縦も横もbackground-repeatで表示されますので、上下左右が対象になるように注意が必要です。

自分でデザインをしながら壁紙が作成できるジェネレータ「bgpatterns.com」が直感的に簡単操作でお洒落なデザインで作成出来ますのでお奨めです。




要らないファイルを決め、作成した壁紙画像をアップロードする

デフォルトの画像は、以下の場所に格納されていますが、ダッシュボードからはアクセス出来ないようですのでFTPを使ってアクセスします。
/wp-content/plugins/wptouch/themes/core/core-images

上記フォルダの中に数枚の壁紙がありますので、自分が使わないと思う画像ファイルを決め、そのファイル名で自分で用意したファイルと置き換えてアップロードします。
たとえば、私は「skated-concrete.gif」というデフォルト画像は使わないので、自分で用意した画像を同じファイル名にしてアップロード(上書き)します。(拡張子もGIFに合わせます)

こうする事によって、ダッシュボード内から自分の用意した画像を選択する事が可能となります。



本来は、このようなやり方は、ある意味邪道とも言える方法かとは思いますが、置き換えではなく画像を単に増やすという方法では、PHPを何ヶ所も書き加える必要がありますので、誰でも簡単に出来る方法の一つとして紹介しました。


メニューボタンの変更


WPtouchのデザインは洗練されていて、デフォルトでも充分に素敵なのですが、正直、あのメニューボタンはいただけません…..初めてサイトを訪れた方は、あれがメニューボタンである事に気づかない方もいると思います。



そこで、もっと誰でもわかりやすいようにMENUボタンを変更する事にしました。

画像を用意しFTPでアップロードする

私は、以下のような85px×95pxの画像を画像を用意し、ファイル名を「menu_image.png」としました。



透過PNGになっておりますのでサイズが判りにくいかと思いますが、透過にしたのはどんなカラーにも対応させる為ですので、メニューバーが黒でも白でも対応するようにしてあります。

(画像を作成するのはちょっと・・・・という方は上の画像で宜しければご自由にお使い下さい)

デフォルトのMENUボタンのファイル名は「wptouch-menu-dropper.png」となっており、
前出の壁紙と同じフォルダ格納されていますので、今回用意した画像も同じフォルダ内にアップロードしておきます。
/wp-content/plugins/wptouch/themes/core/core-images


CSSでファイルを変更する

/wp-content/plugins/wptouch/themes/default/style.css
へアクセスし、
#headerbar-menu a {
	height: 45px;
	display: block;
	background: url(../core/core-images/wptouch-menu-dropper.png) 0 0;
	width: 30px;
	margin: 0;
	padding: 0;
}
wptouchバージョンにより異なりますが、224行目あたりにある
「wptouch-menu-dropper.png」
を→「menu_image.png」に変更します。
(※自分で作成したMENU画像ファイル名を「menu_image.png」にした場合です)


CSSを編集してMENUボタンの表示されるサイズを変更する

作成したMENU画像が85px/95pxですので、同じ箇所のwidthを30px→85pxに変更。
(※heightは変わりませんので、45pxのまま変更しません)

以上のCSS編集作業でMENUボタンは変更となりました。

▲ 目次へ戻る


CSS編集だけで変更出来るetc



タイトル周りの変更
/wp-content/plugins/wptouch/themes/default/style.css
の169行目あたりからの以下の箇所で変更が出来ます。
#headerbar {
	width: 100%;
	background-position: 0 0;
	background-repeat: repeat-x;
	height: 45px;
	border-bottom: 1px solid #1e1e1e;
	font-size: 19px;
		-webkit-touch-callout: none;
}

#headerbar-title {
	text-shadow: #242424 -1px -1px 1px;
	padding-top: 10px;
	padding-left: 10px;
	display: block;
	margin: 0;
	border-style: none;
	padding-bottom: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 85%;
	font-weight: bold;
	height: 29px;
}

#headerbar-title a {
	text-decoration: none;
	letter-spacing: -1px;
	position: relative;
	font-family: HelveticaNeue-Bold, sans-serif;
}
私は、壁紙に合わせ
headerbar-titleのtext-shadow
のカラーや度合いを変更しています。

タイトルとタイトル左のアイコンの間隔が狭いような感じがするので、少し広げる場合は、
headerbar-titleのpadding-left
の数値を大きくすれば間隔も広がります。

ちなみに、タイトルのバックカラーはデフォルトでは黒ですが、これら大まかな箇所をを変更するのは、CSSからではなく、ダッシュボード内の設定変更から行います。




タイトルアイコンのサイズを変更する

先ほどのタイトル部分の直ぐ下(213行目)にある
#headerbar-title img#logo-icon {
	position: relative;
	margin-right: 7px;
	max-width: 30px;
	float: left;
	width: 28px;
	height: 28px;
	padding: 0;
	bottom: 1px;
}
widthとheight
の数値を変更すればサイズが反映されますが、正しく表示するためには変更した数値と同じ数値のアイコン画像をダッシュボードからアップロードする必要があります。


記事投稿部分背景色を変更する

デフォルトでは「白」(FFF)に設定されていますが、この部分はダッシュボードでは変更できないのでCSSで変更します。760行目あたりからのbackground-colorのカラー番号を編集でOK
/* @group Index Page */

.post {
	background-color: #fff;
	padding: 10px;
	margin-bottom: 12px;
	margin-right: 10px;
	margin-left: 10px;
	border: 1px solid #b1b1b1;
	-webkit-border-radius: 8px;
	position: relative;
	z-index: 0;
		box-shadow: rgba(255,255,255,.8) 0px 1px 0px;
}

他にも、ダッシュボードから変更できない箇所でもCSS編集によって、ここには書き切れないくらいの変更は可能ですので、いろいろ挑戦してみるのも面白いかなと思います。

で、いろいろやって出来上がったのがこちら

  


尚、WPtouchはバージョンによってCSSやPHPが大幅に変更になっているようですので、ここで紹介している○○○行目というのは、現時点での最新バージョン(1.9.35)での場合ですのでご注意下さい。



その他PHP編集による設定



*12/05追記 SyntaxHighlighter Evolvedを適応させる為の修正

WordPress で記事内に美しくソースコードを掲載させる為のプラグインSyntaxHighlighter Evolvedを利用している方も多いようです。私も以前から利用させてもらっていますが、私の環境では、WPtouch上でうまく反映されていない事に最近になって気づきました。

これはおそらく、SyntaxHighlighterのバージョンによる互換の問題かと思いますが、私の場合、思うところもあって古いバージョン2を使っています。以前も通常のテーマで正しく表示されないという事があり、もしやそれと同じか?と思い、WPtouch側のfooter.phpに以下のコードを記述してみました。

/wp-content/plugins/wptouch/themes/default/footer.php

の最後のほうにある/bodyの直上に
<?php wp_footer(); ?>
を追加で記述してみました。
<?php wptouch_get_stats();
// WPtouch theme designed and developed by Dale Mugford and Duane Storey @ BraveNewCode.com
// If you modify it for yourself, please keep the link credit *visible* in the footer (and keep the WordPress credit, too!) that's all we ask.
?>
<?php wp_footer(); ?>
</body>
</html>

すると、WPtouch内でもSyntaxHighlighterが正しく表示されるようになりました。
この対策が正しいのか否かは微妙ですが、とりあえずは他に支障はないようですので、このまま使用してみたいと思います。


ソーシャルボタンを設置する

WPtouchのオプション設定にはありませんが、各ソーシャルボタンや「はてぶ数」等をトップページや個別ページにそれぞれ設置する事も可能です。

私も参考にさせて頂きましたが、こちらで書くよりも「けんけん.com」さんの記事で、わかりやすく丁寧に解説されていますので、とても参考になると思います。

私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと
私流WPtouchカスタマイズ術(単一記事編)








Pocket

Trackback URL


この記事を共有していただければ嬉しく思います。コメントもお待ちしておりますのでお気軽にどうぞ!
※ドメインを移行しましたら共有数が0にリセットされてしまいましたので、ご協力お願い致します。