この記事は公開から9年、最終更新日からも6年経過しています。内容が古くなっている可能性があります。

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

概要

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

背景

前回の投稿；Webフォントを使ってみます(1)まずはGoogle Fontsからで　Webフォントを利用できるようになった！と喜んでいたのですが、モバイルでは表示されないことが判明しまして、あわわ！となっております。

冷静に考えると、モバイルは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がバージョンアップした時に、上書きされてしまいます。
そこで、次の方法を適用してみました(これもバージョンアップの際に上書きされるのは変わりないのですが、その際に、１行だけ追加すれば元に戻せるということで直接編集よりは管理が楽かなあと)

モバイルテーマの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)のファイルをインポートさせます。

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

適用結果

注意

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

最後に

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