うちのブログは携帯用に 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