HOME > 2011 4月 07
つぶやく

2011年7日の記事

スマホ対応

うちのブログは携帯用に mt4i を使ってるんだけど、自分がスマホにしたこともあってスマホ対応を軽くやってみた。
場合分けとかはめんどいからw、単純にスマホ用の mt4i をもう一つ用意して UserAgent で振り分け先を分けるやり方に。

PC → /
携帯 → /m/
スマホ → /sp/

でもって mt4i の改造。
tmpl/mt4i 内のテンプレートファイルですべて管理してるから、これを改造。

header.tmpl にて CSS を読み込むように
 各 .tmpl でタグを CSS 仕様に
専用 CSS を作成

いじょ。
スマホ用のボタン作成が一番気にしたかな。
やっぱ押しやすくないとやだし、いろいろ検索してたらこんなのあったから使うことに
 

a.btn {
display: inline-block;
font: 700 .7em "lucida grande", arial, sans-serif;
color: #f06;
text-decoration: none;
width: 70px;
line-height: 40px;
background:
-webkit-gradient(
linear,
0 0, 0 100%,
from(#dcdcdc),
to(#87ceeb)
);
background:
-moz-linear-gradient(
#dcdcdc,
#87ceeb
);
text-shadow: 0 1px 0 rgba(0,0,0,.3);
text-align: center;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-box-shadow:
inset 0 1px 1px rgba(0,0,0,.2),
inset 0 1px 2px rgba(0,0,0,.3),
0 1px 0 #fff;
-moz-box-shadow:
inset 0 1px 1px rgba(0,0,0,.2),
inset 0 1px 2px rgba(0,0,0,.3),
0 1px 0 #fff;
}
a.btn:active {
position: relative;
}
a.btn:active {
top: 1px;
}
a.btn:hover {
background:
-webkit-gradient(
linear,
0 0,
0 100%,
from(#dcdcdc),
to(#87ceeb)
);
background:
-moz-linear-gradient(
#dcdcdc,
#87ceeb
);
}

これでかなり押しやすいボタンになった
基本は mt4i 使ってるから、それ以上の変更はできないけど、とりあえずスマホでも見やすくなったから自己マン、自己マンw
 

このページのトップへ