WPtouch Pro4 のモバイルモード - [Custom CSS]でデザインを変更する

環境: WPtouch Pro4.3.11

デスクトップ(PC)上でモバイルモードを起動する

WPtouch のオフィシャルサイト にある “Identifying targets for custom CSS” に、CSSをカスタマイズしようとするエレメントをどうやって確認するかの方法が紹介されています。

どのブラウザにも何らかの形で用意されている応用的な機能ですが、使ってみるとそれだけで興味深くて結構おもしろいです!^^

URLの後ろに/?wptouch_preview_theme=enabledをつけるとそのページをWPtouchのモバイルモードで開くことができます。私のサイトで言えば…

http://diyonline.info/?wptouch_preview_theme=enabled

wptouch-mobile-mode-page-on-desktop

デスクトップに呼び出したWPtouchのページ

このページ、第1行目と2行目の2つの見出しを覚えておいてください。この2つのデザインを変えてみます。

ブラウザの機能を使ってCCS変更のシミュレーション

ここでの例はFirefox ですが - ウィンドウ右上隅にある機能ボタンから[開発ツール][インスペクター]を呼び出すと、ページを表示しているHTMLと選択している場所にどんなルールが適用されているか、どんなフォント設定が行われているかといった確認をすることができます。

calling-inspection-function

Firefoxのインスペクター

  1. WPtouch モバイルモードで表示されているページの上で、確認しようとするもの - たとえば見出しなどの上でマウスの右ボタンをクリック
  2. フローティングメニューの一番下[要素を調査]をクリックしてやると
  3. インスペクター上、HTMLの対応する行が選択状態になり、
  4. たとえば、[フォント]タブを表示にしておけば、そこで使われているフォントや書式の設定状態を見ることができます

この機能、特にCSSの実際を見ると言う意味で、直感的でとても勉強になります。

このあと、WPtouch Pro4 でフォントのサイズや設定を変更しようと思うのですが、このインスペクター上で変更の前と後を比べるなど、シミュレーションができるのも便利かも知れません。

WPtouch Pro4 のモバイルモード - フォントの書式・設定を変更する

フォントに限りませんが、CSSはページをどう見せるかを設定するもの - そう捉えると分かりやすいかも知れませんね。

WPtouch Pro4のテーマで使われている見出しはとても地味で、通常文字との見極めがむずかしく、私はあまり好きではありません。そこで見出し - H3, H4, H5 の3つの見出しで使う文字のフォントをちょっといじってみます。

WPtouch Pro4 テーマのカスタマイズ

wptouch-customize

WPtouch Pro4 テーマのカスタマイズ

WPtouch Pro4 のメニュー[テーマのカスタマイズ]から[カスタマイザに移動]を選択。

さらに[Custom CSS]をクリックすると目指す設定用のウィンドウです。

スポンサードリンク

wptouch-custom-css

設定メニュー[Custom CSS]

Firefox のインスペクターで修正したい見出しがWordPressによるソースデータのH3, H4に確かに対応していることを確認しましたので、[Custom CSS]への新しい設定の定義として、h3, h4 それぞれのフォントのサイズを少し大きめに、スタイルを太字に変更しました。

H4には、ちょっと装飾を!^^

wptouch-change-font-setting

WPtouch Pro4 のフォント設定を変更する

MEMO:
CSSは縮小しなさいね… とPage Speed Insights から警告が出るくらいですから、このスナップショットの例のように改行したレイアウトはない方がベターだろうなと思います。

この備忘録の一番最初のスナップショットと見比べてください。2つの見出し、存在感が増したと思うのですが^^