米が好き

ブログのテーマをiPhone用にしてくれるプラグイン『WPtouch』ですが、初めてバージョンアップして判明した事がありました。
以前書いた記事の通りオリジナルテーマを使用してるんですが、何とバージョンアップすると自分で作ったテーマのフォルダが消える事が判明。
バージョンアップした後、iPhoneで見たら真っ白だったので分かりました。

ローカルのファイルをアップすれば良いだけの話なんですが、これは気を付けなければいけませんね。
例によってバージョンアップ後の『wptouch.php』の書き換えも勿論ですが。
プラグイン側で何とかしてくれないものでしょうか。

以前パパ（@donpy）と飲んでる時、WPtouchを完全カスタマイズすると面白いとの会話もありました。
暇が出来たらいっちょやってみるかな。

YouTubeが1080p対応になり盛り上がっております。
『&hd=1』になったのが7月頃なので、4ヶ月ちょっとでまたレベルアップしましたね。

9/24に紹介したYouTubeのコードをXHTMLにするジェネレーターを紹介して以来そのコード形式で書いていましたが、何とこのコードではWPtouchで表示されない事が判明しました。

本来ならこのように表示されます。


しかし、XHTMLのコードだと表示されません。
PC表示にしても同じです。


以前紹介したプラグイン『mmyYouTubeHQ』はちゃんと表示されます。
が、いかんせん動画の下に意図しないテキストが入るのであんまり好きくない。
仕方が無いので、元のYouTube自体に書かれている埋め込みコードに戻しました。

現デザインの右上に表示させている動画ですが、今まではYouTubeのお気に入りに入れた動画をRSSで読み込んでいましたが、1記事で書いた動画を表示するようにしました。
記事内の動画と右上の動画のサイズが違うので、少々技（と言うまでもないですが）がいります。

まずYouTubeの埋め込みコード

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/OLeZAGLEzcU&hl=ja_JP&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OLeZAGLEzcU&hl=ja_JP&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

この中に書かれた『width（幅）』と『height（高さ）』を削除。
あと動画のコードも削除します。

『hd=1』と『fmt=37』を付け足す。
（fmt=37 だけで良いかもしれませんが）

<object><param name="movie" value="http://www.youtube.com/v/●&hl=ja_JP&fs=1&hd=1&fmt=37"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/●&hl=ja_JP&fs=1&hd=1&fmt=37" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed></object>

このコードを『AddQuicktag（過去記事）』で追加します。
これでYouTubeの動画を貼る時はボタン1つで、元動画のアドレス部を●位置に追加すれば表示する事が出来ます。

最後に動画のサイズはCSSで調整します。
記事内のCSS

.entry object,
.entry embed {
  width: 425px;
  height: 344px;
}

サイドのCSS

#sidebar object,
#sidebar embed {
  width: 300px;
  height: 246px;
}

便利な事でも全てに対応してないと、やっぱ使えませんね。
デフォルトが基本って言った所でしょうか。

過去2回に渡り紹介してきた『WPtouch』ですが、やっぱり自分で色々カスタマイズしないと気がすまないってんで、調べて色々触ってみました。
（過去記事：1回目、2回目）

私が今回試みた事。
1テーマを分ける。
2ファビコン付ける。
3トップページの表示をタイトルだけでなく、内容も見えるようにする。
4一部のカテゴリーを違う表示にする。
5PCと同じようなCSSにする。

元々の完成度が高い『WPtouch』なので、そんなに変更する箇所はありませんね。
要は自分好みの表示設定にしたいって事で。
文中に出てくる行番号などは、最新バージョンの『1.9.5』の場合です。
続きを読む

先日導入した『WPtouch』ですが、CSSを何とかいじれないかと調べた所、簡単に見つかりました。

PCで表示しているCSSを読み込むと、とんでもない事になります。
これはまぁ、想像出来ますよね。
なもんで、自分で手を加えたい箇所だけ書き足すような感じになります。

エントリー内に書かれた自分で作ったクラスとかはそのまま生きているので、そのクラスに対してのコードを付け足すってな具合です。
では、その方法は以下より。

Firefoxのアドオンの『FireMobileSimulator』を導入して、『iPhone 3G』表示にしてソースを読んだ所、以下のCSSが読み込まれておりました。

<link rel="stylesheet" href="http://kome-suki.net/wp-content/plugins/wptouch/themes/default/style-compressed.css" type="text/css" media="screen" />

CSSファイルが見つかればこっちのもんです。
この『style-compressed.css』に自分のコードを付け足していけばよいのです。

同階層に『style.css』がありますが、内容は『style-compressed.css』と一緒です。
『style.css』の余分なスペース等を無くし、軽量化したのが『style-compressed.css』です。
なので、手を加えるのは『style-compressed.css』の方です。

私が一番気に入らなかったのはコレ。


最初のサムネ画像はポジションで設定しているので、それが生きず続くテキストが横にきてしまいます。
これを画像の下にしたかっただけ。
で、修正したのがこちら。


見事成功。

お次はリンク表示とPRE内に書いたコード表示です。
通常の場合はこちら。


CSSを書き加えたのがこちら。


PCのコードそのままコピペしているので、iPhone用に手を加えた方が良いかもしれませんね。
その辺も追々変更したいと思います。
あまり手を加えすぎると重くなるかもしれないので、デザインが崩れない程度に程々にですね。

今まで面倒だなぁと思いつつも入れてなかったプラグインの『WPtouch』。
しかし、「え、これだけ？」ってな具合に簡単に導入する事が出来ます。

1．プラグインを配布しているサイトでダウンロード。
2．解凍。
3．サーバーにアップ。
4．管理画面のプラグインページで『使用する』をクリック。
以上。

なんつー簡単さ。
『WPtouch』の設定ページもありますが、全部英語。
しかし、何も触らなくても全く問題なく作動します。
『Google AdSense』の設定とかあるみたいですけど、iPhoneに広告出るのは自分が嫌いなんで何も表示させないようにします。
以下はSafariで見たスクリーンショット。

標準だと、PCのまんま表示されます。


『WPtouch』を入れると、以下のような表示になります。


ページ下にWEB表示とMobile表示をON・OFF出来るボタンがあります。
WEB表示した時にも、サイト下部にちゃんとあります。

1記事表示した場合、『関連する記事』や『コメント欄』もしっかり表示されています。
『関連する記事』は『Simple Tags』等を使用してるのが前提となるようです。
他のプラグインもしっかり認識してるのも良いですよね。
Twitterへつぶやけるリンクが付いてるのも素晴らしい。


更には、タグやカテゴリー表示が出来たりと、何から何まで備わっており落ち度が見つかりません。
強いて要望を言うのであれば・・・。

■スタイルシートが読み込まれない
記事内に『style』で書いたコードは問題ありませんが、別ファイルのCSSを読み込んでくれません。
『WP CSS』とか使わないとダメなんでしょうか。
この辺は、追々調べてみたいと思います。
<pre>～～～</pre>の中に書いたコードとかが改行されずに表示されてしまうんですよね。

■拡大・縮小が出来ない
通称『くぱぁ』で拡大したり出来ないようです。
別に拡大しなくても見れるんですけどって、それなら問題ありませんね。ｗ

■タグが全て表示されない
先にも書いたとおり、タグとカテゴリーで検索出来るようですが、全て表示されません。
現在タグが300以上あるんですけど、『WPtouch』で表示されるのは50個。
投稿数の多い順に50個選んでいるような感じです。（ハッキリ分かっていません）
管理画面上にも数値を入力する所が無かったので、50と言う絶対値で設定されているのかもしれません。
PHP内を探せば何か見つかるかもしれませんね。
しかし、頭文字の『ひらがな』『カタカナ』『漢字』『数字』『英語』と順に並んでるのは偉いと思いました。

とまぁ、最近はiPhone所持者も増えてきている事だし、WordPressを使っている人は是非とも入れておいて損は無いプラグインだと思います。