最近の携帯電話では、外部CSSファイルを読み込んで表示するものもあるようです。実際にFORMAのi-modeで私のブログを見てみると、外部CSSを読み込んで表示されましたが、メイン部分に設定した margin が無効になり、サイドバーとメイン部分が重なって表示されていました。
携帯電話では、フルブラウザ以外のものはCSSが無効になると思っていましたが、CSSが無効にならないものもあるんですね。CSSを解釈してくれるのなら、ちゃんと全部解釈してほしいものです。
CSSをモバイル対応にしました
そこでブログのCSSファイルの一部に @media handheld{} を追加して、モバイルでもちゃんと表示できるようにしてみました。
@media handheld{
#menu {width:160px;position:relative;top:5px;left:5px;text-align:left}
a:link {color:#00f}
a:visited {color:#60c}
a:focus {color:red}
}
上記のようにサイドバーに相当する、#menu の position:absolute を position:relative に書き換えました。そうすると、サイド部分はメインの後に配置されます。これでサイド部分がメイン部分に重なるのは防げました。
また、CSSの a:hover はモバイルでは適用されないのでモバイル用の、a:focus も記述してみました。 a:link と a:visited もこの順番に必要です。
