次男が生まれてもそのままだった自己紹介のページをアップデート、ついでにこっ恥ずかしいくらい詳しくしてみたりもしました。

前にも少し触れてますが、自己紹介は詳しく書くことをおすすめしてます。

今でしたら、mixi / Twitter / Facebookなどの自己紹介欄も、たまに見返したほうがいいかもしれませんね。

時系列のほうがいいかもとちょっとなやみましたが、項目別にもどりました。

どうぞこれからもよろしくお願いします。

• ホームページ、見てますよ
• 自己紹介が少ないのはもったいないですよ
• UNIQLOCKの次はカレンダー！　UNIQLO CALENDAR
• buslog の Facebook ページを作ってみました
• ケータイ版buslogのURLが変わりました

ブログの記事の下に表示してる関連項目にサムネイルも表示したかったのですが、LinkWithin では精度が物足りませんでした。

Similar Posts でのサムネイルの入れ方がわからずテキストのみで放置だったところ、ウェビメモさんの記事でみごと解決させていただきましたのでそのメモです。

いま製作中の別サイトで、関連記事を各投稿の下にサムネイル付きで表示させたかったんですが、 Similar Postsの設定でいくら{image}と書いてもまったく全然サムネイルを取得してくれなかったので phpを使って表示させてやりましたよ！！！！同じ現象で困ってる人はこの方法を試してみてください！！
　
関連記事のプラグインSimilar Postsでサムネイル表示がうまくいく方法 | ウェビメモ

サムネイルを表示

設定 > Similar Posts > Output > Output template で、

{php:  echo get_the_post_thumbnail( {postid} ); }

と記述。簡単にできました、感謝！

概要も表示

ついでに概要を四苦八苦して挿入できました。

わざわざ毎回抜粋を書いてないので {excerpt } で出力される内容が多すぎ！　と悩んでたのも解決です。

{excerpt:100}といったような単語数の指定に日本語などのマルチバイトが対応してないようですので、その代替として用意されてる snippet で出力。

また、途中でカットされた場合のことも考えて最後に “…” を付けて出力するようにしました。

最終的には Output template で、

<div class="similar-posts">
	<div class="similar-img">
		<a href="{url}">
		{php: echo get_the_post_thumbnail( {postid} ); }
		</a>
	</div>
	<div class="similar-title">
		<dl>
		<dt><a href="{url}">{title}</a></dt>
		<dd class="clearfix">
		{snippet:120}...
		</dd>
		</dl>
	</div>
</div>

という記述になってます。CSS は

.similar-posts {
	border-top: dotted 1px #CECECE;
	overflow: hidden;
	width: 580px;
	margin-bottom: 6px;
}
.similar-img {
	float: left;
	clear: both;
	padding: 8px;
	width: 70px;
	height: 70px;
}
.entry .textBody .similar-img a img {
	border: none;
}

.entry .textBody .similar-posts dl {
	float: left;
	width: 480px;
	border: none;
	margin: 4px 0 0 10px;
}
.similar-posts dl dt {
	margin: 0;
	padding: 0;
	width: 480px;
}
.similar-posts dl dt a {
	font-size: 17px;
	font-weight: bold;
}
.similar-posts dl dd {
	clear: both;
	font-size: 93%;
	margin-right: 0;
	margin-left: 0;
	width: 480px;
}

にしました。サムネイルは 70px です。

WPtouch Pro では関連記事数や概要の文字数を変更

スマートフォンで表示すると、今まではテキストだけだったのでよかったのですが、サムネイルや概要が入るとさすがに5つは多い感じがしました。

公式サイトによると、オプションを上書きできるようですので、関連記事を3つに、概要を50文字に変更し、

<?php similar_posts('limit=3&output_template=<div class="similar-posts"><div class="similar-img"><a href="{url}">{php: echo get_the_post_thumbnail( {postid} ); }</a></div><div class="similar-title"><dl><dt><a href="{url}">{title}</a></dt><dd class="clearfix">{snippet:50}...</dd></dl></div></div>'); ?>

としました。

出力内容をキャッシュしてくれるプラグイン

Similar Posts と同じ作者さんが提供されてる Plugin Output Cache プラグインもインストール。

出力内容をキャッシュしてくれますので、WPtouch Pro での読み込みが速くなりました。感謝！

• WPtouch Pro のトップページをカスタマイズ　サムネイルを大きくする
• コメント欄にも彩りを
• WPtouch Pro のテーマを少しカスタマイズ
• トラックバックに彩りを
• WordPress の有料プラグイン、WPtouch Pro を買ってみました

スマートフォンからのアクセスを多くいただくようになりまして、勢いで買った WPtouch Pro もおかげさまで活躍中です。

同梱されてるテーマそのままでも全く十分なのですが、写真好きの僕ですので、トップページに表示されるサムネイルのサイズを少しだけ大きくしてます。

デフォルトは 46px なのを 70px にしましたのでそのメモです。

WPtouch Pro 側の設定

デフォルトではカレンダーアイコンで記事の投稿日が表示されてます。

Active Theme > Style / Appearance > Calendar/Thumbnail Icons から 『WordPress Thumbnails/Featured Image』を選ぶことで、サムネイルが表示されるようになります。

またその下、Thumbnail Icons から Classic thumbnails を希望のサイズへ、僕の場合は 70px へ変更しました。

WordPress 側の設定

WordPress の使用テーマ内、functions.php に以下を追記します。

set_post_thumbnail_size( 70, 70, true );

幅 70px、高さ 70px、切り抜きモードです。この設定で、次回の画像のアップロードから指定したサイズのサムネイルが自動で作られます。

過去の画像のサムネイルを作成

では過去の画像は・・・となりますが、ここはプラグイン、Regenerate Thumbnails に助けてもらいました。

名前通り、設定したサイズで新たにサムネイルを作ってくれます。

CSSの変更

まずはサムネイル自身を 70px にします。

.post img.attachment-post-thumbnail{
/* width:46px; */
/* height:46px; */
width:70px;
height:70px;
border:2px #FFF
}

次はその周りの部分。70-46=24。それぞれに24px足していくだけ・・・ではありませんでした。

コメント数をあらわすバブルがサムネイルの角に来てませんし、タイトルが長いとタグやカテゴリーがズレてしまいますので微調整。

またタイトルの右側に不自然なスペースができましたので、それも微調整しました。

.generic .comment-bubble {
/* left:37px */
left:66px
}

.generic .comment-bubble.double {
/* left:32px */
left:60px
}

.post h2 {
/* margin-right: 9%; */
/* margin-left: 50px; */
margin-left: 78px;
}

.date-author-wrap .date,
.date-author-wrap .post-author {
/* margin-left:54px */
margin-left:78px
}

.post .tags-and-categories {
/* margin-left:54px */
margin-left:78px
}

こうして編集した style.css をサイズを圧縮し、style.min.css としてアップロードして完了です。

CSS圧縮のウェブサービスでは webkit系のプロパティが削除されてしまいますので、自前で圧縮してアップロードしました。

• WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する
• コメント欄にも彩りを
• webkit系のプロパティを残したままCSSを圧縮するメモ
• WPtouch Pro の、ライセンス購入、インストールから有効化まで
• WPtouch Pro のテーマを少しカスタマイズ

CSS の最適化で有名なCSS Optimizerでは webkit 系独自のプロパティの -webkit-border-radius などが消されてしまいます。その他の CSS最適化系ウェブサービスでも同じ結果でした。

style.css を style.min.css にリネームするだけでも十分かもしれませんが、テキストエディタを使ってかんたんに自前で圧縮するメモです。

style.css で書かれてる、

html, body, div, span, applet, h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, strike, strong, sub, sup, var, b, u, i, center, ol, ul, li, caption {
	border: 0;
	outline: 0;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

といった内容を、style.min.css に書かれてるような一行だけのものに近づけます。

正規表現で置換、削除するもの

• コメントを削除 /¥*.*?¥*/
• 改行を削除 ¥n
• タブを削除 ¥t

テキストの置換だけで削除できるもの

• 最後の属性値のセミコロンを省略。セミコロンと右中括弧を、右中括弧のみへ： ;} → }
• 左中括弧の前の半角スペースを省略、左中括弧のみへ： { → {
• グルーピングに用いてる、カンマの後の半角スペースを省略：, →,
• コロンの後の半角スペースを省略: : → :

これらでサイズを圧縮し、style.min.css としてアップロード、使用してます。

46,679バイトの style.css が 38,980バイトの style.min.css になりました。

• WPtouch Pro のトップページをカスタマイズ　サムネイルを大きくする
• WPtouch Pro の、ライセンス購入、インストールから有効化まで
• WordPress の有料プラグイン、WPtouch Pro を買ってみました
• WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する
• WPtouch Pro のテーマを少しカスタマイズ

大流行し始めた感のある Facebook、もう登録されてますか？

少し前に buslog の『Facebookページ』を作ってみました。

↑　ブログのサイドバーに置いてみたところさっそくたくさんのかたに「いいね！」してもらえてて嬉しいです。ありがとうございます。

『いいね！』していただくと、あなたのウォールに buslog の更新通知が表示されます(笑)

Facebook？

Facebook への登録がまだのかた、なかなか面白いですよ。最初は複雑でとっつきにくいかもしれませんが、実名なだけあって友人・知人を見つけやすく、コミュニケーションもとりやすいです。

mixi や twitter のゆるいつながりも心地よいですが、アップされた画像やちょっとした一言にポチっとする『いいね！』は魔法の言葉。つながった人とは、今までとちがう圧倒的な親近感を感じてしまいます。

よろしければぜひどうぞ。

>> Facebook

• つながるって面白い、buslogとAircooled-Searchをちょこっと連動
• 自己紹介のページをアップデートしました
• buslog をスマートフォン対応にしました
• ケータイ版buslogのURLが変わりました
• 空冷ワーゲンブログをまとめてチェック！　buslog Antenna 動き出しました

WPtouch Pro を提供してる BraveNewCode はカナダにあるらしく、サイトも当然英語です。

購入手続きとライセンス登録をしましたので、覚え書きついでにシェアしたいと思います。

購入手続き

WPtouch Pro 公式ページ、WPtouch Pro の紹介ページの『BUY NOW』から購入手続きスタートです。

『BUY NOW』をクリックするとライセンス選択画面が出てきます。

『ADD TO CART』で買い物かごに入れ、支払い手続きへすすみます。

アカウント登録

アカウントを登録します。

• Fist Name：名　(太郎、花子)
• Last Name：姓　(佐藤、鈴木)
• Country：Japan
• Email：メールアドレス
• Email(Veryfy)：確認のためメールアドレスをもう一度入力

支払い手続きはクレジットカードと PayPal のどちらかを選べます。

CVV は、クレジットカードの裏面に印刷されてい3ケタの数字です。

利用規約を読み、同意できたら『FINISH PURCHASE』で購入手続き終了です。

メールが届きます

登録したメールアドレスに、BraveNewCode からメールが届きます。

• Name：登録した名前
• BCNID：BraveNewCodeのサイトにログインするID
• BCNID Password：ログインするパスワード
• Transaction ID：購入手続きID
• License：ライセンスの種類
• Key：WPtouch Pro のライセンスキー

が記載されてます。

中ほどのリンクから WPtouch Pro がダウンロードできます。

WPtouch Pro のダウンロード

先ほどのメールに記載されていた BCNID と BCNID Password でログインします。

サポートページにログインできます。右サイドバーの My Plugins をクリック。

ここから WPtouch Pro をダウンロードします。

ダウンロード、解凍したあとは通常の WordPress のプラグインと同じように、wp/wp-content/plugins/ ディレクトリにアップロードします。

有効化。

WordPress のダッシュボード左サイドバーに、WPtouch Pro の項目が追加されます。こちらから各種設定ができます。

ライセンスキーとドメインの登録

一番右のタブ、License から、登録したメールアドレスと、メールで届いたライセンスキーを入力、‘Save Changes’ を押します。

サイトのドメインを登録して手続き終了です。Enjoy！

>> 公式サイト

• WPtouch Pro のテーマを少しカスタマイズ
• WordPress の有料プラグイン、WPtouch Pro を買ってみました
• いくつになってもオマケにつられて
• WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する
• 電子政府が使いにくい件

実は今年に入ってから少しずつ運動してます。ウォーキングから始めて、最近はゆっくりですが走れるようになってきました。

au ではそんな僕にぴったりのサービス、au Smart Sports Run&Walk を提供されてるのでご紹介。

僕もケータイを持って走ってますが、au Smart Sports Run&Walk はまさにそれ。GPSを利用して現在地を計測し、ランニングやウォーキング、サイクリングを行なった時の距離、時間、消費カロリー、現在地の地図を確認できちゃいます。

記録はサイトで確認できるのですが、この『見える化』が運動を続けられるコツの一つだと思います。

たった数kmでも、しんどいところをがんばった日などもありますので、後から見てニヤニヤできるんですよね。

記録だけでなく走ってる最中にもいいパートナーとなってくれるようです。

例えばこれ。ペースメーカーになってくれるそうです。

女性には Run&Walk の歩行距離に応じて付与されるポイントから賞品が当たる『恋する女子のしあわせカラダづくりキャンペーン』が8月31日まで、また Run&Walk ユーザーの総走行距離1㎞につき1円相当の金額が基金として積み上がり、1ヶ月の期間中の総額が24時間テレビ「愛は地球を救う」に寄付される『24時間テレビx Run&Walk キャンペーン』も同じく8月31日まで開催中です。

毎年夏に後悔されてるなら、今が運動の始めどきかもしれませんよ。

[PR by ブログタイムズ]

• 秋の夕暮れと息子の後ろ姿
• 別所ミーティングに初参加
• バグダッシュ観戦、急遽不参加へ
• 平成20年秋の全国交通安全運動は9月21日（日）から
• 最近あらためてブログの良さを感じます

東日本大震災以降の旅行の自粛ムード、まだ続いてますか？

旅行を通じた被災地域復興支援と、それ以外の地域への旅行振興を図るために、観光庁が観光・交通関係業界と連携して官民合同による国内旅行振興キャンペーンを展開しています。

その一環がユーザー参加型のWEBサイト『日本再発見。～もう一度日本を見つけよう～』。サイト訪問者が日本の魅力的な場所を見つけて投稿しあえるそうです。

3週間ごとに設定されるテーマの初回が『「私、リピーターです。」やみつきスポット』ということで、僕も投稿してきました。

僕のやみつきスポットといえば、やっぱりさぬき！

今年も家族3人で行ってきました。

思えば独身のころに3回、結婚して子供がうまれてからも2回行ってることになります。

まさしくやみつき(笑)

サイトでの投稿は80文字以内のしばりがあるのでさらさらと書いてしまえます。で、こんな風に表示されて、ほかの訪問者さんとも共有できちゃいます。

同じようにほかの投稿も見てると、まだまだ足を踏み入れてないところがあってワクワクしてきます。

投稿やアンケートにこたえると抽選で旅行券などが当たるチャンスもあるそうですよ。どんどん投稿、コメントして、日本をもりあげていきましょう！

このもりあげから、復興支援や地域振興につながると思います。

僕の投稿はこちらで見ることができます。「いいね！」や「行きたい！」してくださいね。

>> 日本再発見。～もう一度日本を見つけよう～

[PR by ブログタイムズ]

• ワーゲンバスでの世界一周の旅をまとめてみました
• Let’s Play VWs28、出てますね
• コメントスパム対策その２
• 赤いボンボリを見つけてください
• ワーゲンバスで世界一周中のカップルが日本に！

初めて購入した WordPress のプラグイン、WPtouch Pro は、テーマを少しだけカスタマイズして使ってます。

せっかくですのでその方法をメモ。

知ってると便利な WPtouch Pro の機能

テーマをカスタマイズする際に便利な機能が2つあります。

まずはデベロッパーモード。General → Tools and Debug → General → Developer mode で、「admin には PCのブラウザでも WPtouch Pro の画面を表示させる」といったことができます。

そしてロギング機能。General → Tools and Debug → Debugging にてデバッグログファイルを5段階のレベルで取れる機能もあります。

このあたりはさすが Pro といった感じでしょうか。

まずは独自テーマを作成

テーマをカスタマイズする際は必ず独自テーマを作成します。

wp-content/plugins/wptouch-pro/themes/ にあるデフォルトのテーマを改造しても、プラグインやテーマのアップデートで上書きされてしまいます。

WPtouch Pro の管理画面 → Theme Browser から Copy As Child (子テーマとしてコピー) するのが公式に推奨されてる方法です。WordPress の子テーマを作るのと同じ要領だそうです。

僕が借りてる coreserver だとセーフモードで動いてるせいか Theme Browser からうまくコピーできませんでしたので、手動コピーでクリア。

wp-content/wptouch-data/themes/ ディレクトリを作り、カスタマイズ元とするデフォルトテーマを丸ごと手動でコピーしました。

コピーした先、wp-content/wptouch-data/themes/my-theme/ 内の readme.txt は、Theme Name を編集して自分のテーマ名にしておきます。ここに書いた情報が、 Theme Browser で表示されるようです。

以下、デフォルトテーマの classic 2.2.2 を元にカスタマイズしたメモです。

日付表示を日本向けに

テーマの日付表記のデフォルトは英語向けです。

<?php wptouch_the_time( 'F jS, Y' ); ?>

このままだと January 1st 2011 といかにも海外のような表示なので日本語表記へ。

<?php wptouch_the_time( 'Y-m-d (D)' ); ?>

ipad / iphone ともに blog-loop.php 、single.php 内にある数カ所を変更しました。

includes/theme.php は、

	} elseif ( is_day() ) {
		echo sprintf( __( "Archives › %s", "wptouch-pro" ),  get_the_time( 'F jS, Y' ) );
	} elseif ( is_month() ) {
		echo sprintf( __( "Archives › %s", "wptouch-pro" ),  get_the_time( 'F, Y' ) );
	} elseif ( is_year() ) {
		echo sprintf( __( "Archives › %s", "wptouch-pro" ),  get_the_time( 'Y' ) );

を、

	} elseif ( is_day() ) {
		echo sprintf( __( "Archives › %s", "wptouch-pro" ),  get_the_time( 'Y年n月j日' ) );
	} elseif ( is_month() ) {
		echo sprintf( __( "Archives › %s", "wptouch-pro" ),  get_the_time( 'Y年n月' ) );
	} elseif ( is_year() ) {
		echo sprintf( __( "Archives › %s", "wptouch-pro" ),  get_the_time( 'Y年' ) );

へ変更してます。

いただいたコメントの日付も日本語化。functions.php で、

    	<div class="comment-meta">
	    	<?php printf( __( '%1$s - %2$s <span class="meta-sep"></span>'),
				get_comment_date( 'M d' ),
				get_comment_time() );
			?>
    	</div>

から

    	<div class="comment-meta">
	    	<?php printf( __( '%1$s - %2$s <span class="meta-sep"></span>'),
				get_comment_date( 'Md日' ),
				get_comment_time() );
			?>
    	</div>

へ変更しました。

WPtouch Settings → General → Global General → Regionalization にある、
Respect WordPress setting for date format in themes
にチェックを入れると、WordPressの
設定 → 一般 → 日付フォーマット
の設定通りになるようですが、WPtouch Pro 全体が日本語に、それもあまり素敵でない日本語になってしまうので上記の処置をしてます。

月別アーカイブの12ヶ月しばりを無くす

wptouch-archives.php にて表示される過去の月別アーカイブを最近12ヶ月から無制限に変更しました。

	<h2 class="wptouch-archives"><?php _e( 'Browse Last 12 Months', 'wptouch-pro' ); ?></h2>
		<ul class="wptouch-archives">
			<?php wp_get_archives( 'type=monthly&limit=12' ); ?>
		</ul>

表記とともに変更しておきます。

	<h2 class="wptouch-archives"><?php _e( 'Browse Monthly Archives', 'wptouch-pro' ); ?></h2>
		<ul class="wptouch-archives">
			<?php wp_get_archives( 'type=monthly' ); ?>
		</ul>

関連エントリーを表示する

関連エントリーを表示するプラグイン、Similar Postsを使ってるので、WPtouch Pro のテーマにもコードを足しておきます。

			<div class="<?php wptouch_content_classes(); ?>">
				<?php wptouch_the_content(); ?>
			<h3>こちらもどうぞ！</h3>
				<?php similar_posts(); ?>

としました。

前後のエントリーのタイトルを表示する

デフォルトでは矢印で前後のエントリーへのリンクが作られてますが、テキストでタイトルを表示したいので、single.php 内にて

<div class="post-page-cats"><?php previous_post_link(); ?></div>
<div class="post-page-cats"><?php next_post_link(); ?></div>

を足しました。

表記が気になった細かいところ

『テーマ』と言って通じるのは WordPress ユーザーくらいなものだと思うので、footer.php の切り替えスイッチから Theme を削除。

						<div id="switch">
							<?php _e( "Mobile Theme", "wptouch-pro" ); ?> | <a href="<?php wptouch_the_mobile_switch_link(); ?>"><?php _e( "Switch To Regular Theme", "wptouch-pro" ); ?></a>
						</div>

Regular Theme というのもしっくり来ないので、PC Version にしました。

						<div id="switch">
							<?php _e( "Mobile", "wptouch-pro" ); ?> | <a href="<?php wptouch_the_mobile_switch_link(); ?>"><?php _e( "Switch To PC Version", "wptouch-pro" ); ?></a>
						</div>

コメントを頂いたかたにはお礼を言いたいので、includes/theme.php の文言を変更しました。

	$localize_info['comment_success'] = __( 'Your comment was published.', 'wptouch-pro' );

	$localize_info['comment_success'] = __( 'Thanks! Your comment was published.', 'wptouch-pro' );

どれもかんたんです。

無料版とちがい、テーマをカスタマイズできるのが有料版 WPtouch Pro のいいところ。自分好みにかえられるのは嬉しいですね。

WPtouch Pro の特徴はライセンス購入時にもふれてますのでよろしければどうぞ。

• WPtouch Pro のトップページをカスタマイズ　サムネイルを大きくする
• WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する
• WordPress の有料プラグイン、WPtouch Pro を買ってみました
• WPtouch Pro の、ライセンス購入、インストールから有効化まで
• 最近のコメントを表示

2008年に登録したブログタイムズよりQUOカードをもらいました。なんでも『3,000円分QUOカードプレゼントキャンペーン』とのことで、新規登録ブログも募集中です。

ブログタイムズは、ブログで広告主企業の商品・サービスの記事を書いていただくサービスです。
　
キャンペーン告知、商品サンプリング、Webサービス体験、イベント参加など、種類はさまざま。
掲載条件に沿って記事を掲載頂いた方に、その報酬として掲載料1,000～10,000円、広告主の商品、イベントへの参加機会の全て、もしくはいずれかを必ずご提供しています。
　
会員ブロガーは、気に入った案件にだけ申し込めばOK。ご自身のブログテイストに合わない案件に無理に参加いただく必要はありません。申込みに対して広告主から掲載OKの判定を受け取ったら、実際に記事をアップして報告します。ブログテイストや更新タイミングなどを邪魔することなく、特別で新鮮なネタと媒体価値に見合う報酬を提供するのが、ブログタイムズです。
　
引用：ブログタイムズ

上記でも触れられてるとおり、好きな案件だけでいいので気楽、それなのに掲載料は良いのがブログタイムズです。

『3,000円分QUOカードプレゼントキャンペーン』を2月28日までしてるそうで、会員マイページからこのキャンペーンに申込み、運営元の PR TIMES による審査を通過した場合、3,000円分QUOカードを受け取ることができます。

僕自身、過去にもたくさん書かせていただきました。

『世界初、動画を合成できるデジタルカメラ「カシオ EX-Z400」』では実際にカメラを貸していただき、楽しく撮影したあと返却するというまさにモニター体験をさせていただきました。

会員登録にあたっては審査を設けており、「多くの読者に支持されている」かどうかを基準に判断しています。目安は1日300PV以上。それ以外にも記事内容や読者との関係、更新スタイルなどを確認しており、1日300PV未満であっても審査通過することも、またその逆もあります。

とのことなので、まずは登録申請してみてはいかがでしょうか。

>> http://blogtimes.jp/

• ブログタイムズに登録しました
• ブログの記事広告サービス、ブログタイムズが新規会員募集中です
• ケータイ版 Antenna、稼動しました
• Let’s Play VWs主催、空冷VW生息調査
• 最近あらためてブログの良さを感じます

自分のケータイを Xperia にしたのを機に、スマートファンからのアクセスを Ktai Style から WPtouch に任せることを検討しました。画像を大きいサイズで表示できるのが個人的には WPtouch の最大の魅力。

無料版でもホントに十分なんですが、円高を理由に有料版の WPtouch Pro をえいやと購入。29カナダドルは購入時日本円にして2,411円を PayPal にて支払い、導入してみましたところ大満足でしたので、メモしておきます。

WPtouch / WPtouch Pro を導入されてるサイト

無料版の WPtouch は、WordPress を使ってるサイトならほぼ導入されてるプラグインだと思います。なんといっても無料な上に、yamk blog さんによる日本語化ファイルがあります。

対して WPtouch Pro を使ってるのは

• yomogi★log
• アスキー
• 週アスPLUS

等が見つかりました。yomogi★log さんはがっつりカスタマイズされてますね。Firefox + FireMobileSimulator で動きを確認させていただいたりしました。

また Flickr にも公式の画面デモがたくさんアップされてます。

以下、WPtouch Pro の特徴を挙げておきます。

長くなりましたので目次です。

1. 無料版 WPtouch の長所はもちろんそのまま
2. やっぱり専用設計は軽い
3. クリックだけで終わる設定とその変更
4. メニューに表示できる内容が段違い
5. iPad に完全対応
6. カスタム投稿タイプに対応
7. 広告は Adsense と AdMob、カスタムタイプを選べる
8. 設定のバックアップを取れる
9. 独自テーマを作れる
10. デベロッパーモードで確認が楽々
11. 専用フォーラムがあって、販売元スタッフが迅速に回答してくれる
12. プロデベロッパー版ならさらに充実
13. ライセンス登録もかんたん
14. 購入から7日以内なら返金可能
15. 国際対応と謳ってますが日本語は全然ダメ
16. 初心者から開発者まで幅広くおすすめ

無料版 WPtouch の長所はもちろんそのまま

デスクトップ用テーマから独立して動作し、プロクシサーバやRSSフィードも使わない、という長所は無料版 WPtouch と同じです。

インストール、有効化するだけでスマートフォンと iPad に対応完了です。

やっぱり専用設計は軽い

スマートフォンや iPad ではPC用サイトも表示できますが、やっぱりスマートフォン向けや iPad 向けに設計されてると軽いです。

また WPtouch Pro では管理画面から選択したプラグインのフックを無効にすることができます。無駄なCSSやJSファイルのダウンロードや動作をカットすることができますので、無料版より速い表示が実現されてます。

クリックだけで終わる設定とその変更

クリックだけで好みの見た目に変更できます。

例えばフォントやフォントサイズ、カラーなどは管理画面から簡単にカスタマイズできます。

たくさんの項目、例えばカテゴリーやタグなどを表示するかしないかも、テーマを編集することなくチェックボックスをオンオフするだけ。

青いドットがついてる項目は、iPad と設定を共有します。

メニューに表示できる内容が段違い

PCに比べるとやっぱり狭いスマートフォンの表示領域、メニューは心強い場所です。

無料版と同じようにメニューのアイコンは選べますが、表示されてる『Classic』という名前のアイコンセットのほかにも9種類揃ってます。

もちろん独自のアイコンをアップロードして使うこともできます。

メニューの項目も設定できます。

無料版と同じ RSS、タグ、カテゴリーに加えて、月別アーカイブ、(WordPressの)ページ、そして WordPress 以外で作ったページを表示できます。

僕のサイトのメニューには現在、

• Home (デフォルト)
• About me (WordPressページ)
• About my bus (WordPressページ)
• About camera (WordPressページ)
• Contact (WordPressページ)
• Archives (デフォルト)
• RSS (デフォルト)
• buslog Antenna (通常のhtml)

を表示してます。

デフォルトで存在している Archives のページは、最近の記事15件と、最近12ヶ月分の月別アーカイブへのリンクがあります。

個人的には月別アーカイブは必須。小さいことかもしれませんが、Proを購入した理由の一つです。

iPad に完全対応

WPtouch Pro 2.1からは iPad をサポート。表示もただ単に横幅を合わせたわけではありません。

画面は、左上ホームアイコン右側の Blog メニューから Tags を表示させたところです。

インターフェースや動きも iPad のスタンダードなものですので、初めて訪問してくれたかたでも迷うことなくサイト内を巡ってもらえそうです。

専用の設定も用意されてます。

テーマファイルも iPad と スマートフォンとは区別されてますので、個別に細かい変更ができますよ。

カスタム投稿タイプに対応

WordPress 3.0 から導入されたカスタム投稿タイプに対応してます。企業サイトなどでは使われてそうなカスタム投稿タイプですが、無料版 WPtouch ではこれに対応していません。

広告は Adsense と AdMob、カスタムタイプを選べる

広告は Adsense だけでなく AdMob、そしてカスタムタイプを選べます。挿入位置もヘッダー下とフッターを選べます。

Adsense なら Publisher ID と Channel ID、AdMob なら Publisher ID を入れるだけ。

カスタムタイプなら HTML や JavaScript のコードを記入するだけでOKです。

設定のバックアップを取れる

設定項目を全部バックアップしておくことができます。

サーバーの引っ越しや他サイトの設定、そして万が一のときにも重宝すると思います。

独自テーマを作れる

デフォルトでは classic、 Skeleton Template の2種類が同梱されてますが、WPtouch Pro では独自テーマを作ることができます。

子テーマにも対応してますので丸々独自のものを作らなくてもだいじょうぶ。WordPress の子テーマの作り方と同じ要領だそうです。

インストールされてるテーマを一覧表示してくれるテーマブラウザーがあり、ここからコピーして子テーマを作ることができます。

また、作ったテーマ内の functions.php を読み込みますので、デスクトップ用テーマに引っ張られず独立した動作をするテーマとなります。

作ったテーマは wp-content/wptouch-data/themes/ 内にアップロードしますので、WPtouch Pro のバージョンアップ時に消えてしまうことはありません。

フッターの “Powered By WPtouch Pro” も表示する必要はありませんので、企業サイトなどにも使いやすいかと思います。

トップページはこんな感じにしてます。

デベロッパーモードで確認が楽々

「admin には PCのブラウザでも WPtouch Pro の画面を表示させる」といったことができます。

スマートフォンだけでなく iPad の画面もパソコンで確認できてしまいますので、テーマのカスタマイズの際の確認作業が簡単です。

またデバッグログファイルを5段階のレベルで取れる機能もあります。

専用フォーラムがあって、販売元スタッフが迅速に回答してくれる

無料版でもサポートはありますが、WPtouch Pro には専用フォーラムがあります。

左の画像はログインする前、つまり無料版のサポートフォーラムです。

有料版のIDでログインすると、同じ URL なのに左の画像のように内容が違います。

またここでの質問なら遅くとも2,3営業日程度で返信するとあります。

While we work hard to ensure our Pro users receive fast responses, our response times are generally within 2-3 business days. We don’t guarantee those times but if you’ve used our forums you’ll see we hold to that 99% of the time.
　
引用元：http://www.bravenewcode.com/support/topic/about-support-response-times#post-1489

実際に僕も Google翻訳を使った下手くそな英語で質問し、回答していただきました。

ソフトウェア料金にサポート料金が含まれてるようなものですので、インストールからテーマのカスタマイズまで、気軽に聞くことができます。

WordPress のダッシュボードから入る WPtouch Pro の管理画面のトップに、サポートフォーラムに投稿できるフォーム( Support Topic QuickPress )があることからも、サポート体制が手厚いことがわかります。

プロデベロッパー版ならさらに充実

開発者用のプロデベロッパー版はさすがの内容です。

ライセンス数無制限のうえに

• 優先サポート
• テーマのカスタマイズに対するサポート
• 開発者用ドキュメントと関数リファレンス
• テンプレートのPSDファイルとリソース

が付いてますので、ウェブ制作会社さんなどはこちらのほうがお得でしょう。

ライセンス登録もかんたん

ライセンス登録は、送られてきたライセンスキーを管理画面から登録するだけです。

とはいえ購入先は英語のサイトです。ライセンス購入の際に訳したものを残してます。→『WPtouch Pro の、ライセンス購入、インストールから有効化まで』

購入から7日以内なら返金可能

利用規約に、購入から7日以内なら返金可能と明記されてます。

REFUND POLICY
All Support and Upgrade License(s) from BraveNewCode Inc. are refundable within 7 days from purchase. Please contact us if you would like to request a refund.
　
キャンセルについて
BraveNewCode社からのすべてのサポートおよびアップグレードライセンスは、ご購入から7日以内に返金できます。払い戻しを希望される場合はこちらまでご連絡ください。

また無料版 WPtouch の使用がまだなら、無料版を先にインストールしてエッセンスを確認してから購入する手もありますね。
(無料版は公式サイトの一番右下、『Try The Free Version』からダウンロードできます)

国際対応と謳ってますが日本語は全然ダメ

唯一がっかりなのはここ。一応日本語ファイルが同梱されてますが、

• トップページの最下部：Load More Entries… → もっとエントリーをロードする・・・
• 記事ページの最上部： Skip to Responses → 応答をスキップする
• コメント数を表す部分、(N) Responses → (N)返事
• Leave a Reply → 返信を残す
• コメントの送信ボタン：Publish → 発行

と微妙にズレてる感じでした。管理画面も変な訳ですので自力で訳した方がわかりやすいと思います。

現在は英語のまま使ってます。

また動作条件として PHP のセーフモードはオフにと書いてありますが、テーマのコピーを管理画面からできないだけで、その他の動作は今のところ問題ありません。(coreserver で運用してます。)

初心者から開発者まで幅広くおすすめ

全体的にテーマやCSSを直接編集することなく設定できるので、僕のような HTML や PHP や CSS などに詳しくなくても管理画面からのクリックだけでかなりカスタマイズできるところがいいですね。

独自テーマを作れば WordPress でないかのようなサイトにもできるでしょう。

ますます普及してくるスマートフォンにさくっと対応でき、カスタマイズも幅広くできる WPtouch Pro。

先月に WPtouch Pro 2.1 がリリースされて39カナダドルになってますが、iPadもサポートされ始めたことですし、一回呑みに行くのをがまんする程度ですのでおすすめです。

↓ ライセンスや機能比較表など、さらに詳しくは下記の公式サイトからもどうぞ。

• WPtouch Pro のテーマを少しカスタマイズ
• WPtouch Pro の、ライセンス購入、インストールから有効化まで
• WPtouch Pro のトップページをカスタマイズ　サムネイルを大きくする
• WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する
• Ktai Style のテーマ作成に使った絵文字一覧

空冷ワーゲンのブログの更新情報をチェックできる buslog Antenna、おかげさまでご好評いただいてます。

この前buslog Antenna をスマートフォンに対応させたときにケータイ版も少しだけ新しくできましたのでご報告です。

ケータイ版は今のところ、

• 『最近の記事100件』のみ
• ブログ記事のタイトルとブログ名のみ表示
• 20分、50分の30分ごとに最近の記事100件を表示

という仕様になってます。

buslog にケータイでアクセスしていただき、最下部の『buslog Antenna』よりお願いします。

URLはhttp://www.buslog.net/antenna/i/recent_entry.html です。

↓　というよりQRコードはこちら！

あまり確認できてませんので、なんか動きが変！という場合や、改善案、改善策等も教えてもらえると嬉しいです。

これで Antenna も PC版、ケータイ版、スマートフォン版が揃いました。空冷ワーゲンブログがますます盛り上がることを願ってます。

• スマートフォン版 Antenna、稼働しました
• ケータイ版buslogのURLが変わりました
• ケータイ版 Antenna、稼動しました
• buslog をスマートフォン対応にしました
• ブログタイムズに登録しました

空冷ワーゲンのブログの更新情報をチェックできる buslog Antenna、おかげさまでご好評いただいてます。

この前サイトをスマートフォンに対応させたときに Antenna もいじったのですが、そのときよりもう少しだけ使いやすくできましたのでご報告です。

スマートフォンで使いやすいように、

• 最初はブログ記事のタイトルとブログ名のみ表示、
• タイトルをタップすることで記事概要が下に表示され、
• 記事概要をタップすることで該当するブログ記事にジャンプする

というふうにできました。PC版 Antenna の最近の記事100件と同じような感じですね。

最近は無料ブログサービスも続々とスマートフォンに対応してるので、ここからのアクセスもしやすいかと思います。PC版と少し違い、今のところ

• 『最近の記事100件』のみ
• 10分、40分の30分ごとに更新
• 記事概要は100文字

という仕様になってます。

buslog にスマートフォンでアクセスしていただき、右上のアイコンをタップして開くメニューの最下部、『buslog Antenna』よりお願いします。

URLはhttp://www.buslog.net/antenna/s/recent_entry.html です。

↓　というよりQRコードはこちら！

Xperia でしか確認してませんので、なんか動きが変！という場合や、改善案、改善策等も教えてもらえると嬉しいです。

2011/02/19 追記：
mixiコミュはタイトルしか取得してなく、空欄の記事概要をタップしにくかったので、記事概要の部分に矢印を追加しました。

• ケータイ版 Antenna、新しくなりました
• buslog をスマートフォン対応にしました
• ケータイ版 Antenna、稼動しました
• 空冷ワーゲンブログをまとめてチェック！　buslog Antenna 動き出しました
• buslogをiPhone対応にしました

いつもbuslogをご訪問いただきましてありがとうございます。

4月に僕がケータイをドコモのXperiaに換えたのもあって、buslog をスマートフォン対応にしてみました。大御所の iPhone をはじめ、iPod touch、Android、BlackBerry など、そして iPad にも対応してます。

URLはそのままでいけますので、PCでご覧の場合は右側サイドバーのQRコードから試してみてください。

空冷ワーゲンサイトを自動巡回する buslog Antenna も、最新の記事100件を表示するページをスマートフォン向けに表示できるようにしました。(右上のボタンから buslog Antenna へ移動してください)

まだ荒削りですが、ちょこちょこ使いやすくしていこうと思ってます。不具合等ありましたら教えていただけると嬉しいです。

そうそう、アンテナの巡回先はいつでも募集中ですよー。こちらからお知らせください。

• スマートフォン版 Antenna、稼働しました
• ケータイ版 Antenna、新しくなりました
• ケータイ版 Antenna、稼動しました
• WordPress の有料プラグイン、WPtouch Pro を買ってみました
• buslogをiPhone対応にしました

Ktai Style にてこのブログをケータイ対応にしています。使用してる独自テーマはデフォルトテーマを少しカスタマイズした程度ですが、ケータイサイトらしくいくつか絵文字を使ったのでメモしておきます。

絵文字の挿入のしかたは、Ktai Style の公式マニュアルに『絵文字の使い方』として掲載されていますが、

• 基本は　<img localsrc=”999″ alt=”代替文字” />　
• 使う絵文字が単なるアイコンで、代替文字が必要ない場合は　<img localsrc=”999″ alt=”" />　

と考えました。また、ドコモやソフトバンク、ウィルコム等では変換されて表示されるため、大きく意味が変わらないものをチョイスしました。

トップページやエントリーで使ってる絵文字

「コメント」を絵文字にすることで文字数が節約できてます。また「関連エントリー」の横に太陽を持ってくることで少しでも目立ち、他のエントリーも読んでもらえたらなと考えました。

↓








«
»

<img localsrc="86" alt="コメント" />
<img localsrc="120" alt="?" />
<img localsrc="334" alt="[new] " />
<img localsrc="30" alt="<?php _e('&darr;', 'ktai_style'); ?>" />
<img localsrc="46" alt=" @ " />
<img localsrc="48" alt="" />
<img localsrc="44" alt="" />
<img localsrc="77" alt="" />
<img localsrc="122" alt="" />
<img localsrc="149" alt="" />
<img localsrc="104" alt="" />
<img localsrc="116" alt="" />
<img localsrc="7" alt="&laquo;">
<img localsrc="8" alt="&raquo;">

フッター部分で使ってる絵文字

フッター部分は完全にアイコンとして使用しました。

<img localsrc="112" alt="" />
<img localsrc="122" alt="" />
<img localsrc="53" alt="" />
<img localsrc="48" alt="" />
<img localsrc="77" alt="" />
<img localsrc="354" alt="" />
<img localsrc="510" alt="" />
<img localsrc="44" alt="" />
<img localsrc="94" alt="" />
<img localsrc="799" alt="" />
<img localsrc="122" alt="" />
<img localsrc="120" alt="" />

やっぱり絵文字が入ってると、ぐっと華やかになりますね。

• Ktai Style のテーマ作成と小技8つ
• 最近のコメントを表示
• WPtouch Pro のテーマを少しカスタマイズ
• 6時間かかるそうです　ワーゲンバスの LEGO の組み立て動画
• パケット代0円でデコメール送受信、PAGMail