[WordPress]WPtouch mobile pluginのCSSカスタマイズ

  • スポンサーリンク

  • スポンサーリンク

[WordPress]WPtouch mobile pluginのCSSカスタマイズ

スクリーンショット 2014-10-22 17.20.29

概要

WPtouch mobile pluginのCSSをカスタマイズする方法をまとめます。

背景

前回の投稿;Webフォントを使ってみます(1)まずはGoogle Fontsからで Webフォントを利用できるようになった!と喜んでいたのですが、モバイルでは表示されないことが判明しまして、あわわ!となっております。
スクリーンショット 2014-10-22 15.58.42
冷静に考えると、モバイルはWPtouch Mobile Plugin([WordPress]WPtouch Mobile Pluginを設定してみる #WordPress)を使用していて、おそらくそのモバイルテーマのCSSがあって、それが、本来のPC用テーマのCSSより優先しているんだろうなあ、ということは簡単に推測されます。
というわけでそれほど難しくなかったのでモバイル表示でも、前回投稿で適用したWebフォントを使用可能とさせてみました。

前提条件、備考

・WPtouch Mobile Pluginは2014/10/22現在の最新版(バージョン 3.5.3)を用いています。
・本投稿では、モバイルでWebフォントを表示させる例を示しましたが、Webフォントにかぎらず、モバイルでのCSSカスタマイズの方法も同時に理解できるかと思います。

モバイルテーマのCSSの場所

WordPressインストールされたディレクトリ/wp-content/plugins/wptouch/themes/bauhaus/default にある style.css が該当します。
※「bauhaus」がモバイルテーマの名称となりますので、WPtouch Mobile Pluginの有料版を使用するなどしてモバイルテーマをbauhaus以外に変更している方は、適宜、読み替えて下さい。

モバイルテーマのCSSの編集方法1〜CSS直接編集

/wp-content/plugins/wptouch/themes/bauhaus/default にある style.css を直接編集すればモバイルテーマのCSSが書き換わります。

しかし、これでは、WPtouch Mobile Pluginがバージョンアップした時に、上書きされてしまいます。
そこで、次の方法を適用してみました(これもバージョンアップの際に上書きされるのは変わりないのですが、その際に、1行だけ追加すれば元に戻せるということで直接編集よりは管理が楽かなあと)

モバイルテーマのCSSの編集方法2〜変更点だけを記述したCSSをインポートする方法

(1)任意のフォルダに、モバイルテーマのCSSに対して、カスタマイズしたい内容だけを記述したCSSファイルを準備します。
筆者は /wp-content/themes/bauhaus_child というフォルダを作成し、そこに、以下のように記述した style.css を準備しました。

@import url(‘http://fonts.googleapis.com/css?family=Cherry+Cream+Soda’);
.gfont1 {
   font-family: ‘Cherry Cream Soda’, cursive;
   color:black;
   font-size:150%;
}
.gfont2 {
   font-family: ‘Cherry Cream Soda’, cursive;
   color:red;
   font-size:200%;
}
.gfont3 {
   font-family: ‘Cherry Cream Soda’, cursive;
   color:blue;
   font-size:250%;
}
.bgcolor1 {
   background:#cccccc;
   border:solid 1px blue;
}

(2)モバイルテーマ用のCSSの中で(1)のファイルをインポートさせます。
スクリーンショット 2014-10-22 17.10.12

@import url(‘../../../../../themes/bauhaus_child/style.css’);

適用結果

スクリーンショット 2014-10-22 17.20.29

注意

・上でも述べましたが、元々のモバイルテーマ用のCSSは、WPtouch Mobile Pluginがバージョンアップした時に、上書きされてしまいます。
・従いまして、上記「モバイルテーマのCSSの編集方法2〜変更点だけを記述したCSSをインポートする方法」(2)で追加記述したコードは、バージョンアップされるたびに、1行、追加する必要があります。
※直接編集した場合は、バージョンアップの際に、カスタマイズした内容を全て追加記述することを考えれば管理は楽ではあります。

最後に

・これで、WPtouch Mobile Pluginを使用した際に、どうやればモバイルの表示をカスタマイズできるのか、わかりました。
・PC用のテーマのCSSをカスタマイズした際は、合わせてモバイル用のCSSもカスタマイズ必要かどうか判断する必要がありますね。※PCテーマとモバイルテーマのCSSを一括管理したいところですがいまのところ勉強不足です。


  • スポンサーリンク

[WordPress]WPtouch mobile pluginのCSSカスタマイズ” への1件のフィードバック

  1. はじめまして。
    いつも参考にさせていただいてます。
    wptouchのことでお聞きしたいのですが
    記事中の画像を携帯で縦から横にしたときに画面いっぱいに表示されるようにする方法はどうしたらいいのでしょか?
    ネットで書かれてるやり方を試してもならなかったので質問させていただきました。
    よろしければ返答頂けたら助かります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA