MacとWindowsのブラウザーでCSSをJavaScriptで振り分け

ホームページ用のテンプレート発売にともない、宣伝用と、Yahoo!のGoogle化でアクセスアップ爆増？が想像できますので、SEO塾：www.hyperposition.com の衣替えを断行しました。

• SEO塾テンプレート for ホームページ （ホームページビルダー・Dreamweaver用）
• Google(グーグル)対策はSEO塾 Yahoo!(ヤフー)上位表示も

Macではフォントサイズが大きくレイアウトが崩れる！

SEO塾のサイトは、お蔭さまで大変身しました。

左側のビフォーSEO塾をご覧になれば分かるとおり、ホームページ作成は未熟者でして、

• Macでの各ブラウザーの表示を怠けた
• Macでフォントサイズが大きくなることを知らなかった

特に後者が、情けないです、悔しいです…

弊社には、WindowsのXP、Vista、7と、MacOS 10.5 Leopardがあります。

もちろんブラウザーは、いくらでもインストールできます。
IE、Firefox、Chromeを中心に、ときどきSafariやOperaで表示確認しています。

が、今回は大失態です。

そこでググってみました。

MacとWindowsのブラウザーでCSSを振り分け

WindowsのIEを、バージョンごとに振り分けることは、こなしてきたのですが、

最近は、このWordPressテンプレートも、ホームページテンプレートも、エキスパートに外注していますから、どんな無茶をやっても大丈夫だろうと安心していました。

ホームページ・テンプレートのサイドバーも、SEO的にアンカーテキストを盛り込む意図で、高さを2段に拡張したのですが、これが素人の暴走でした。

さてさて、MacとWindowsのブラウザーで、CSSを振り分ける方法は知りません。
というか、Macで文字が大きく表示されるって、シェアを考えると気にしませんよね？

ググっても、やはりMacのCSS記事はマイナーでして、Netscape 4.xやら、Mac版 IE5やら、古い情報が多すぎて焦りました。

が、ようやく見つけました。

• javascriptを使用してmacのみスタイルシートを振り分ける

<script type="text/javascript" src="http://www.hyperposition.com/js/mac.js"></script>

上記を Dreamweaver のテンプレートに埋め込み、

if (navigator.appVersion.indexOf("Mac") !=-1){
document.write("<link rel='stylesheet' href='http://www.hyperposition.com/css/mac.css' type='text/css' />");
}

上記の mac.js から mac.css を読み込ませるようにして、サイドバーとフッターのfont-sizeを12pxから、11pxにしました。
がそれでもサイドバーは、はみ出すのでさらに10pxまで小さくしました。

これは、正道ではないようですが、裏技を覚えましたね。

関連記事:

1. SEO塾テンプレート ホームページビルダーやDreamweaver対応版 新発売！
2. SEO塾マニュアル2月22日デビュー！　GYBに完全対応 TDP(トップページダウンペナルティ)も
3. サイトのトップページのSEO 3箇所で設定
4. カテゴリートップのSEO タグとの二重権力を活かす
5. SEO塾テンプレートのカスタマイズ ヘッダー直下メニューをサイドバーへ移動【追記】