アクセス数: | 今日: | 昨日:   記事数:2,090

HOMESITE MAPBOOKMARKTAG CLOUD

【WordPress】WPtouchのCSSを自分好みにカスタマイズする

『【WordPress】WPtouchのCSSを自分好みにカスタマイズする』をはてなブックマーク

WordPress & iPhone先日導入した『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』の方です。

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

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

見事成功。

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

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

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

Trackback URL

リンク先が18禁サイトの場合は削除しています。
当ブログにリンクが貼られていない場合は削除しています。
Tag : ,

コメントを書く

必須です。

必須です。(公開されません)
GRAVATARに登録していると、アイコンが表示されます。

リンク先が18禁サイトの場合は削除しています。

以下のタグが利用出来ます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType