iPhone・Android等のスマートフォンに対応させるWordPress用のプラグインWordpress PDA & iPhone（wp-pda）はベースにJquery mobileを使用している。
そのためwp-pdaの配布ファイルでは、ウェブサイトを高速化するため、jquery、jquery mobileの各javascriptおよびスタイルシートcssはCDNで直接呼び出しており、CSSを使ったカスタマイズが分かりにくいという難点がある。
デフォルトでは黒いタイトルラインとブルー系のナビボタン、日付になっているが、これを変更したいと思うことは多いはず。
色の変更であれば、意外なほど簡単に配色をカスタマイズしてサイトのデザインを変えることが可能なので紹介。
修正するのは以下のファイル
wp-content/plugins/wp-pda/style.css
ファイルを開き、最後に以下のスタイルシートを追加する
.ui-btn-active,
.ui-bar-b,
.ui-bar-c {
background: #fff;
color: #fff;
font-weight: bold;
border: 1px solid #bf0059;
text-shadow: 0 -1px 1px #bf0059;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffbbca), to( #ff90a7));
background-image: -webkit-linear-gradient(#ffbbca, #ff90a7);
background-image: -moz-linear-gradient(#ffbbca, #ff90a7);
background-image: -ms-linear-gradient(#ffbbca, #ff90a7);
background-image: -o-linear-gradient(#ffbbca, #ff90a7);
background-image: linear-gradient(#ffbbca, #ff90a7);
}
各項目の解説
background:
ヘッダ、タイトル、ナビ選択状態の背景色
color:
ヘッダ、タイトル、ナビ選択状態の文字色
border:
回りのラインの色（同系色の濃いめにすると良い）
text-shadow:
タイトル文字の影（同系色の濃いめにすると良い）
background-image:
複数あるが、多くのブラウザに対応させるためのもの（同じ色で指定していく）