美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています 日本蜜蜂の扇風行動の写真

外部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 もこの順番に必要です。



スポンサーリンク

メインのスタイルシートに印刷用のスタイルシートを追加する方法

Filed under: Home Page — タグ: , , , — daii @ 6:49 PM
2010年6月24日

普通は変更した部分だけを印刷用のスタイルシートファイルに追加指定します

普通、印刷用スタイルシートは、印刷用に変更した部分と、新たに追加した部分だけで作ります。私の場合の印刷用スタイルシートは次のようになっていました。

#content {max-width: 1500px; margin: 0; padding-left:20px;}
#menu {display: none;}
.np {display: none;}

一行目で横幅を広めにしておいて、印刷で横幅が自動的に調整(横幅は元々フレキシブル)されるようにします。また、左側に余白を広めに取ります。二行目でサイドバーの印刷をやめて、三行目で広告等を印刷しないようにします。印刷のプレビューをしてみてください。こんなに簡単な設定でもうまく印刷されるはずです。

メインのCSSファイルに印刷用のスタイルシートを追加記入する

スタイルシートファイルは印刷用を別にする必要があると今まで思っていましたが、印刷用に変更した部分と、新たに追加した部分だけを次のようにmedia=”all”で指定したメインのスタ イルシートファイルの最後に追加すれば良いことがわかりました。

この方法を見つけたのは、グーグルウェブマスターツールを見ていたら「Labs」の「サイトのパフォーマンス」に「ページの読み込み時間の短縮方法」で、CSSファイルをまとめなさいと書いてあったのがヒントになったからです。

この方法だとprint.cssファイルが不要で、CSSファイルがひとつで良いことになります。この為、ファイルの読み込みが速くなり、SEOにもユーザーにも良いし、とても簡単で管理が楽になります。

@media print {
#content {max-width:1500px;margin:0;padding-left:20px;}
#menu {display: none;}
.np {display: none;}
}

Powered by WordPress