先日導入した『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用に手を加えた方が良いかもしれませんね。
その辺も追々変更したいと思います。
あまり手を加えすぎると重くなるかもしれないので、デザインが崩れない程度に程々にですね。