まだまだあるのですが・・・。
Winでも見られるデザインを目指して、最後に手を入れたのがこれ。
ナビゲーションバーと呼ばれる部分です。
ナビゲーションバーの設置方法についてはまた今度説明するとして・・・。
はじめウィンドウズだとナビゲーションバーのフォントがガタガタで全体のバランスも悪かったのです。
はじめナビゲーションバーのスタイルシートはこんな感じでした。
#navbar {
text-align: center; /* 配置 */
font-family: Verdana, Arial, sans-serif; /* フォントスタイル */
font-weight: normal; /* フォントの太さ */
font-size: 12px; /* フォントサイズ */
width: 770px; /* 全体の幅 */
line-height: 150%; /* テキストの高さ */
}
テキストの幅がいまいちということもあって、とりあえずline-height（テキストの高さ）の部分だけ調整してみました。
#navbar {
text-align: center; /* 配置 */
font-family: Verdana, Arial, sans-serif; /* フォントスタイル */
font-weight: normal; /* フォントの太さ */
font-size: 12px; /* フォントサイズ */
width: 770px; /* 全体の幅 */
line-height:100%; /* テキストの高さ */
フォントは変えず、line-heightのみ100％に変えてみる。
マックでは問題なかったのですが、Winでの見栄えがいまいち！！(^_^;)
というわけで、最終的にはテキストの幅も変えてなおかつ#navbarの部分だけでなくすべてのフォントを12px → 10pxに変更して調整してこうしてみました。
/* ナビゲーションバー全体のスタイル */
#navbar {
text-align: center; /* 配置 */
font-family: Verdana, Arial, sans-serif; /* フォントスタイル */
font-weight: normal; /* フォントの太さ */
font-size:10px; /* フォントサイズ */
background-color: #ffffff;
width: 770px; /* 全体の幅 */
line-height:120%; /* テキストの高さ */
}
/* テーブル内のスタイル */
#navbar td {
text-align: center;/* 配置 */
font-size:10px;/* フォントサイズ */
width: 130px; /* テーブルひとつの幅 */
}
/* リンクのスタイル */
#navbar a{
background-color: #ffffff; /* 背景色 */
color:#228B22; /* 文字色 */
font-size:10px; /* フォントサイズ */
text-decoration: none; /* テキストの装飾をなくす */
padding: 2px 5px 2px 5px; /* リンク文字のパディング */
}
/* リンクをポイントした時のスタイル */
#navbar a:hover{
background-color: #73d7aa; /* 背景色 */
color:#ffffff; /* 文字色 */
font-size:10px; /* フォントサイズ */
text-decoration: none; /* テキストの装飾をなくす */
}
これで、なんとかWinでもMacでも同じように見えるようになったと思うのですが、どうでしょうか？
たぶん大丈夫だとは思うのですが、気になるのはWinで新しいバージョンがでたIE7での見栄えです。
どなたか使っている方いらしたら教えてください。
お願いしま〜す！！m(_ _)m
+++ 関連記事 +++
|
コメント
僕も散々イジった揚げ句、IEで確認したらサイドバーが落っこちてたり等（とても初歩的ですねｗ）経験ありますよぉ。
今ではStyleCatcherで選んで、そのままです(‥;)
あいにくわが家のWinには、まだIE7が・・・
協力できなくてすみません。
>tadyさん
そうそう、よくありますよね〜。
いやぁ、たしかに初歩的なミスも多いんですけどIE「だけ」うまく表示されないっていうことも多いんですよね。
だから、普段使わないから余計に困っちゃいます。
それに、MacのIEとWinのIEではまた表示が違ったりもするんですよね。（苦笑）
tadyさん、スタイルキャッチャー使ってるんですか。
それ、一度導入しようと思ったんですけど挫折したんですよね。（笑）
あれ？
tadyさんMac使いじゃ？(?_?)
もしかしてマックもウィンも持ってるんですか？
いえいえ、もし導入したら教えてください。(^^)
StyleCatcherは、3.2から3.3にアップグレードするときに新規でインストールしたんですけど、3.3には元々同梱されてましたよぉ。
もちろんMacですよ〜！
Winは彼女ので、たまに使ってみるんですが、なかなか馴染めませんねぇ。
人のWinにもFirefox入れちゃいました
>tadyさん
違うんですよ〜。
スタイルキャッチャーが初めから同梱されているのは知っているのですが、スタイルキャッチャーのテンプレートを使おうと思ったらデザインが崩れまくってどうしようもなくなって結局他のテンプレートを使うことになったんですよ。
今ではそれがあったせいか、カスタマイズするのが楽しくなってきたからいいんですけどね。（笑）
あら、勘違い申し訳ありません。
もしかして、僕のとこのも崩れてる？ｗ
>tadyさん
（笑）
tadyさんとこは大丈夫ですよ。
それに同じマックで見てるので崩れてないですよ〜。（笑）