GoogleAnalysticsを導入して、モバイル端末のアクセス数が相当多いことに気づいた@MasterPeace_21です。
これは、PCのデザインだけで無く、モバイル用も見やすくしなくちゃと思いwptouchをちょっくらいじってみる事にしました。
とは、言っても何箇所かいじっていたので今回は少し足しただけです。
でも、一応いじっている所を全部紹介したいと思います。
はてブカウンター
これは、「けんけん.com」さんを参考にさせていただきました。
私流WPtouchカスタマイズ術（単一記事編） | けんけん.com
以前WPtouchのカスタマイズ（トップページ編）ということで記事を書きました。 すぐに記事画面編を書くつもりでしたが、なかなかまとまらず、ものすごく間が空いてしまいました。 ようやくひと区切りついた …
なんか、けんけんさんのサイトを見てくださいｗ
凄く分かりやすく書かれているので。
ソーシャルボタン
Twitter / ツイートボタン
以前から、twitterのtweetボタンとFacebookのLikeボタンをつけています。
私は記事の内の枠の一番上と一番下に同じ物をつけています。
問題なのが、書く記事毎に設置する時のポイントとして、各記事に反映させる様にコードを書き換えなきゃいけません。
こちらが凄くわかりやすく参考になります。
WordPressとかで各記事のいいねボタン、Tweetボタンを一覧ページで表示させる簡単な方法まとめた-がんばるデザイナ tuts!
GoogleAdsense
やっぱり欠かせないですよね。
記事中に3つ置くことが出来るGoogleAdsenseですが、私は・・・
しています。
moreタグの設置には、Master Post Advertというプラグインを使い、そこにAdsenseを挿入出来るようにしています。
WordPress › Master Post Advert « WordPress Plugins
関連する記事
携帯からアクセスする人が多いので、少しでも多くの記事を読んで貰えるようにと思い、PC版と同様にwptouchにも関連する記事を挿入しました。
プラグインはSimilarPostsです。
All Things Seen and Unseen » Similar Posts
プラグインを設定後に
<?php the_content(); ?>
の後に
<?php similar_posts();?>
を付け足すだけで表示できます。
RSS,Twitter,FacebookへのLink
RSS登録や、自分のTwitterアカウント、Facebookページへのリンクをアイコン画像を並べて設置しました。
問題はRSSへのリンクだったのですが、PCではfeedburunerへのLinkへ飛ばしているのですが、iPhoneからだとmac readerで表示されてしまって、登録画面が出てきません。
なので、Linkを直接GoogleReaderの登録画面へ設定しました。
http://www.google.com/ig/add?feedurl=自分のフィードバナーのURL
あとFacebookページのLinkはモバイル用を設置しました。
http://m.facebook.com/***********
LikeBox
こちらも「けんけん.com」さんを参考にさせてもらいました。
私流WPtouchカスタマイズ術（単一記事編） | けんけん.com
以前WPtouchのカスタマイズ（トップページ編）ということで記事を書きました。 すぐに記事画面編を書くつもりでしたが、なかなかまとまらず、ものすごく間が空いてしまいました。 ようやくひと区切りついた …
Like Box - Facebook開発者
背景
画像を見て気づいたかもしれませんが、背景も変えています。
標準で入っている背景は、ちょっとダサいのばかりなので、一番やりたかったんです。
背景に関しては、こちらを参考にさせて頂きました。
WordPressプラグイン「WPtouch」のテーマを少しだけカスタマイズ « Just Another Life
このブログのようにWordPress.comを使用したブログは、設置型のWordPressとは違って、スマートフォンでアクセスした時にスマートフォン向けの表示にしてくれるWPtouchが自動的に有効に …
wptouchのフォルダにでも背景にしたい画像を保存して
header.phpに書かれている
<?php wptouch_core_body_background(); ?>
を削除します。
そしてstyle.cssに下を追記します。
body {
margin: 0;
padding: 0;
font: 12px Helvetica;
-webkit-text-size-adjust: none;
min-height: 460px;
background-image:url('./画像までのパス');
background-repeat: repeat;
background-position: 0 0;
}
これで変更可能です。
僕は背景画像にはNotificationCenterで使われている壁紙を使ってみました。
MissionControlやNotificationCenterの隠れ壁紙をiPhoneに設定してみた。
さらに記事中の背景はPCページと同じグレーっぽい色にしました。
/* @group Index Page */
.post {
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 12px;
margin-right: 10px;
margin-left: 10px;
border: 1px solid #b1b1b1;
-webkit-border-radius: 8px;
position: relative;
z-index: 0;
}
総括
いろいろ、付け足しましたが結局は背景を変えたことで見栄えが大分変わったのが大きく感じます。
それだけで、他のwptouchユーザーと差別化出来る感じがありますので、結構おすすめです。
wptouchを使っている人は背景画像を変えるのオススメです(´・ω・｀)
