前回「WP-Galleryをスマートフォン対応にしました。」でjQuery Mobileとwordpressのテーマを使用してスマートフォン対応にしてみました。

そこでjQuery Mobileの「data-role=”listview”」で定義される
リストのデザイン変更について若干調べてみました。

今回は「data-role=”listview”」のリストに内包されるコンテンツの＜width＞横幅の設定変更（デフォでは右側①の空きが気になります）と右側に用意されるマーク②の色の変更、「data-role=”listview”」のリストの外側③のmarginの変更をしてみました。

①＜width＞横幅の設定変更

【html】
<ul data-role=”listview” data-inset=”true”>
<li>□□□□□</li>
</ul>

「data-role=”listview”」のリストに内包されるコンテンツ<li>□□□□□</li>のデフォルト設定では右側①の部分に間の抜けた空きが出来てしまうので、その部分をCSSで変更します。

jQuery Mobileのサイトよりダウンロードした元CSS「jquery.mobile-1.0b1.css」1411行目あたりにある

【CSS】
.ui-btn-icon-right .ui-btn-inner { padding-right: 33px; }

を今回作成したテーマのstyle.cssにコピーします。

②「data-role=”listview”」のリストに生成されるマークの色の変更

jQuery Mobileのサイトよりダウンロードした元CSS「jquery.mobile-1.0b1.css」697行目あたりにある

/* —Icons—*/

.ui-icon-arrow-r {
background:#FF9933;
background-image: url(images/icons-18-white.png);
background-position: -108px 50%;
}

.ui-icon-arrow-u {
background: #FF9933;
background-image: url(images/icons-18-white.png);
background-position: -180px 50%;
}

を今回作成したテーマのstyle.cssにコピーします。
赤文字部分を任意の色に設定変更します。
それだけではアイコン画像がなぜかリンク切れで非表示になるのでjQuery Mobileのサイトよりダウンロードしたアイコン画像の入った「images」フォルダーをサーバーにアップします。

すると下の写真のように丁度良い具合の見た目に変化しました。

③「data-role=”listview”」のリストの外側のmarginの変更をする。

style.cssに下記のコードを記して赤文字部分で任意のmarginに変更します。

.ui-content{ margin: -5px; position: relative; }

丁度良い具合に変更できたのではないでしょうか？