うちのブログは携帯用に mt4i を使ってるんだけど、自分がスマホにしたこともあってスマホ対応を軽くやってみた。
場合分けとかはめんどいからｗ、単純にスマホ用の 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 使ってるから、それ以上の変更はできないけど、とりあえずスマホでも見やすくなったから自己マン、自己マンｗ
