Ktai Styleをカスタマイズするのに役に立った情報のプチまとめ

ktai-style

福山です。

WordPressの有名なプラグイン「Ktai Style」を使ってみました。

基礎知識

まずは携帯サイトの基本を調べました。

携帯サイトの作り方 第1回 作成方法の基礎| All About

 

携帯(モバイル)サイトを作る時に役立ちそうな情報まとめ| KACHIBITO.net

実践カスタマイズ編

どや!?KtaiStyleをカスタマイズするときのポイントと注意点| デザインどや!?

ほとんどこちらを見ればカスタマイズできます。

WordPressで企業向けの携帯サイトを作る。| TRANS

インラインでしかスタイル変更できないので、コード全体をごっそり書き換えてしまえというものです。少し補足&アレンジします。
ktai-style/themes/[使用しているテーマ]/functions.phpに以下を記入します。functions.phpが無かったら新たに作成。


<?php
function html_replace_s() {
      // 最後の引数falseにしないと2回出力される。
     $cont = ks_content('(more…)',0,'',0,false);
     $html_r = array('<h2>', '<h3>', '<h4>'); // 対象の文字列
     $html_k = array('<h2 style="font-size:x-large;">','<h3 style="font-size:medium;color:#333333;">','<h4 style="background-color:#ffffff;">'); // 変更後の文字列
     // <h2>を<h2 style=…に変換。<h3>を<h3 style…に変換。
     echo str_replace($html_r, $html_k, $cont);
}
?>

page.phpやsingle.phpのks_content(__('(more...)'));部分を html_relplase_s();に置き換えます。あとは表示を確認しながら置き換えるスタイルを調整します。

そういえばガラケー持ってなかった...

garapa browser

GalapaBrowser
カテゴリ: ユーティリティ
価格: 無料

iPhoneから携帯サイトを見ることができる無料アプリです。
3キャリアはもちろん、すごいのは1998年から2011年の3キャリアそれぞれの携帯機種も選べること。ざっと見て500種以上あります。本当に実機通りの表示なのかはわかりません。ソースコードを見れないのは残念。

gooモバイルサイトビューア

こちらも無料でパソコンのブラウザから確認できます。FirebugやChromeのDeveloperツールを使えばソースコードも見れます。

WordPressの他プラグインと喧嘩しないように!

WordPress高速化!プラグイン「WP Super Cache」(日本語)導入しリソース制限回避、Ktai Styleとの相性OK!

散々悩んでたどりついた答え。以前はもっと特別な作業が必要だったようですが、今は簡単でした。

Ktai Style と WPtouch が Opera を奪い合わないように| タメハ

少ないとは思いますが、一応。