外部CSSファイルをモバイル対応にしました 美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています エジソン君の絵

外部CSSファイルをモバイル対応にしました

Filed under: WordPress — タグ: , — daii @ 1:15 PM
2010年12月30日

最近の携帯電話では、外部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 もこの順番に必要です。



スポンサーリンク

コメントはまだありません

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress