上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


拍手する ※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです


にほんブログ村 旅行ブログ 温泉・温泉街へ にほんブログ村 旅行ブログ 旅行グルメへ にほんブログ村 鉄道ブログ 鉄道旅行へ ブログランキング・にほんブログ村へ
ブログランキング【くつろぐ】 ブログランキング ブログランキングのブログん家 blogram投票ボタン

 注目 Blog 記事タイトル レイアウト変更 を行いました(2010.02.09)
 注目 Blog 記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05)
 注目 伊東温泉・共同浴場10湯比較リスト 公開しました!(2009.12.20)
 注目 Blog 表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13)
 注目 伊東温泉共同浴場温泉マップ 公開しました!
 注目 ★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) オススメ

CSSハックを利用したIE6への対処

先日、「ブログタイトルでHTMLを有効にするカスタマイズ(その4)」の記事で書いたことですが、これまで試行錯誤してタイトル表示の調整をしましたが、IE7とIE8で若干文字が下に表示される部分が何気に気になっていました。

実際には懸念のIE6対処が出来ていたのでこれ以上やるのは手間なのでほっておいたのですが(苦笑)、ブログ閲覧者で一番アクセスが多いのがIE7であるということもありそろそろ手をいれないわけには・・・ということで対処して見ました。

方法はCSSハックといってブラウザ固有の不備?というか、個別の違いを逆利用して特定のブラウザのみに設定を適用するテクニックです。完全に裏ワザテクなので多様は禁物ですし、基本はしっかりタグやスタイルシートでマルチブラウザ環境を意識したデザインを心がけるべきで、個人的にはどうしようもない場合にのみ利用すべきだと考えます。

今回はIE6に適用したい値とIE7,IE8との値で表示上差異があることへの対処であり、やりつくして他に手がない部分なのでCSSハックを利用します。

現在、以下のようなスタイルシート設定をしています。


.titleicon {
margin-top: 9px;
}

.titleicon2 {
margin-top: 6px;
}


記事タイトルで利用するアイコンに対して適用させるスタイルシート設定で、IE6ではこれをいれないと見た目背景に文字が中央に並びません。FirefoxやGoogleChromeはなくても中央に表示されます。IE7やIE8は少しだけ下にずれます。この部分をIE6だけに適用するようにしてみます。


* html .titleicon {
margin-top: 9px;
}
* html .titleicon2 {
margin-top: 6px;
}


赤色部分がCSSハックでスターハックと言われる方法です。Windows、MacのIE4~IE6に対して有効となるやりかたです。他のブラウザではこれを解釈しないので設定は無視されるというわけです。

チェックしてみましたがうまくいったようです。これで記事タイトルの文字が各ブラウザで見ても同じように表示されるようになりました。

関連記事


拍手する ※見てくださった方々へ、、ご参考になれば幸いです。よろしければ「拍手」頂ければウレシイです

テーマ : ブログカスタマイズ
ジャンル : ブログ

tag :日記 ブログレイアウト カスタマイズ タイトル 

にほんブログ村 旅行ブログ 温泉・温泉街へ にほんブログ村 旅行ブログ 旅行グルメへ にほんブログ村 鉄道ブログ 鉄道旅行へ ブログランキング・にほんブログ村へ
ブログランキング【くつろぐ】 ブログランキング ブログランキングのブログん家 blogram投票ボタン

 注目 Blog 記事タイトル レイアウト変更 を行いました(2010.02.09)
 注目 Blog 記事に tag関連エントリの自動表示 を行うようにしました(2010.01.05)
 注目 伊東温泉・共同浴場10湯比較リスト 公開しました!(2009.12.20)
 注目 Blog 表示高速化のため、記事を要約して表示する方法へ変更しました(2009.12.13)
 注目 伊東温泉共同浴場温泉マップ 公開しました!
 注目 ★全国駅前温泉リスト★ 随時更新中 (2010.8.17 更新) オススメ

tag関連エントリ(Google AJAX Feed)

Loading..Please Wait

trackback


この記事にトラックバックする(FC2ブログユーザー)

投稿後は管理人承認待ちとなり、承認の上公開されます。記事とは関係のないトラックバックは予告なく削除対象となりますので予めご了承ください。



コメント


コメントの投稿

投稿後は管理人承認待ちとなり、承認の上公開されます。記事とは関係のないコメントは予告なく削除対象となりますので予めご了承ください。


非公開コメント

ブログ内 記事検索
カテゴリ
全記事一覧表示
カテゴリ別全タイトル表示 NEW
最近のコメント(コンパクト)
データ取得中...
最新記事
最新コメント
最新トラックバック
カレンダー(月別)
07 ≪│2017/08│≫ 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
月別アーカイブ
タグリスト

RSSリンクの表示
メールフォーム

名前:
メールアドレス:
件名:
本文:

ホームページリンク
素材リンク集
ゆーりの休日 2000ピクセル以上のフリー写真素材集 写真素材ポラリス
フリーエリア
リンク
プロフィール

やっすぃぃぃー

Author:やっすぃぃぃー

趣味はダイビングと鉄道旅行。ダイビングライセンスはダイブマスター、鉄道ではJR全線乗りつぶし達成済という異才。温泉、駅弁、ラーメン、路面電車、お城巡りも好きな凝り性。横浜市内在住。HP

やっすぃぃぃーの愛車
レガシィ

スバル・レガシィB4の話題を『みんカラ』SNSでいろいろまとめてます。車の話題を随時掲載中です♪
『亡き後を考える』シリーズ記事
温泉トピックス
温泉比較リスト
温泉マップ
GoogleMAPで温泉マップを作成しました。湯巡りの際のご参考に!

伊東温泉共同浴場10湯
鹿児島市内温泉銭湯20湯
ブログ開設から何日経った?
サイト内 人気ページランキング
検索サイト キーワードランキング
FC2拍手ランキング
FC2アクセスランキング
13位 温泉旅行
227位 旅行
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ブログパーツ レンタルCGI
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。