2005年03月30日

●IE5.xでのボックス表示を修正する

IE5.x（Netscape4.xも）やIE6の後方互換モードではCSSの width, padding, border の解釈にバグがあるというのは巷で有名みたいで、ブログでCSSに関わりだした私は

の記事で初めてこの事実を知りました。それ以来随分と気になってましたが、関連の話題をエントリーします。


この問題について気になりながら放置していたのは、そもそも確認する IE5.x のブラウザがないのでモチベーションが上がらないという状態でした（IE6後方互換モードでやれば？というのはおいといて）。が最近になって昔使っていた（というか今も時々使っている）古いノートPCに Windows Update を全くやったことがないIEが搭載されているのを思い出し、即着手。Windows Update をしたことがない理由は、そのPCをメインに使っている当時、ブラウザはNetscape4.7しか使っていなかったためです。まさに「灯台下暗し」で、全く素の状態のIE5.0が目の前に転がってました。セキュリティの問題はありますがそこはそれということで。
で、私のサイトに固定3カラムのスタイルシートを入れてIE5で表示させてみました。画像のようにサイドバーの width と padding で表示が崩れているのがお分かりになると思います。


以下、Ie5.xでボックス表示を変更させる方法を紹介します。できる！CSSさんのWin IE5xだけ別のCSS 2経由で

と呼ばれるものを発見。具体的な方法は下記の記述を加えて外部スタイルシートを読み込むというものです。中に記述されtている hogehoge.css はIE5.x系しか読み込まないので、ここでIE5.x用の記述をして上書きをするという仕組みです。
@media tty {
 i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */

コードの意味はともかく、上記サイトのサンプルを見てもどこにどう書けばよく分からなかったのですが、下のようにHTMLのhead部分に記述することでOKとなりました（上記サイトのページソースがこのようになっていました）。
<link rel="stylesheet" href="styles-site.css" type="text/css" title="Default" />
　　　　　　　　　　　　：
<style type="text/css"/>/*<![CDATA[*/
@media tty {
 i{content:"\";/*" "*/}} @import 'hogehoge.css'; /*";}
}/* */
/*]]>*/</style/>

このように記述することで、最初に link タグの外部CSS（styles-site.css）を読み込み、その後でIE5.x用のスタイルシート（hogehoge.css）が読み込まれます。全体をCDATAセクションで括っているのはおそらく xml として Valid にするための対処と推測されます（間違ってたらお許しを）。


この設定を追加したところ、画像のようにIE5でも正常に表示されるようになりました。


追記
本エントリーでキャプチャしたサンプルページです。また、このサンプルページでIE5.x用に用意した外部スタイルシートの内容は、

/* 右カラム */
#links-right{
    float: left;
    color: #ffffff;
    width : 185px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}

/* 左カラム */
#links-left{
    float: left;
    color: #ffffff;
    width : 185px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
}

としています。変更したのは width で、元々 155px だったものを、左右 padding 分の 30px を足して 185px にしています。width 以外は元スタイルシートの設定と重複しているので不要かも知れません。

23:59 | Comments [5] | Trackbacks [1]

2004年11月15日

●枠線（border）の指定

ご質問を頂きましたので、テンプレートで提供しているサイドメニュータイトルや本文のblockquoteタグで用いている枠線のスタイルシート指定方法を紹介します。
まず指定フォーマットは下記の通りです。

    border: width style color
    border-top: width style color
    border-right: width style color
    border-bottom: width style color
    border-left: width style color
「border:～」は全ての枠線を一括指定、「border-xxx:～」は上下左右の枠線を個別指定します。一括指定か個別指定のいずれかを使用します。斜体の部分に枠線の詳細を指定します。それぞれの意味は
    width：枠線の幅
    style：枠線のスタイル
    color：枠線の色
となっています。
次にスタイルシートを外部ファイル（styles-site.css）に記述する場合のサンプルをいくつか記します｡ここではblockquoteタグを直接指定する方法で記しておきます。


【シンプルな指定（幅：1px／スタイル：1本線／色：青）】

    blockquote {
        border: 1px solid blue;
    }
hogehoge
hogehoge


【このサイトのblockquote指定（幅：2px／スタイル：点線／色：グレー）】

    blockquote {
        border: 2px dotted 999999;
    }
hogehoge
hogehoge


【付箋紙風（幅：左10px、その他1px／スタイル：1本線／色：緑）】

    blockquote {
        border-left: 10px solid green;
        border-top: 1px solid green;
        border-bottom: 1px solid green;
        border-right: 1px solid green;
    }
hogehoge
hogehoge


幅・色はなんとなくお分かりになると思いますので、スタイル指定のみ下記に列挙しておきます。それぞれどのように表示されるかはお試しになってください。

    none非表示（デフォルト）
    hidden非表示
    solid1本線
    double2本線
    groove窪んだ線
    rigde隆起した線
    inset全体が窪んだように表示
    outset全体が隆起したように表示
    dashed破線
    dotted点線

なお指定内容によってはブラウザによって表示が異なる場合がありますのでご注意ください。

13:00 | Comments [4] | Trackbacks [2]

2004年11月11日

●リンク画像の枠線を消す

バナー等の画像にリンクを設定すると青い枠が表示されます。これを消去する方法を何通りかご紹介します。

    消去前

    消去後

HTMLタグのborder属性に指定
<img src="～" ait="banner" border="0"/>

HTMLタグ内のstyle属性にスタイルシートを設定
<img src="～" alt="banner" style="border-style:none;"/>

スタイルシート（styles-site.css）に設定（実際にはclass属性・id属性で指定）
img {
    border-style:none;
}


表示上の効果はどれも同じです。スタイルシートの場合、style属性の設定がstyles-site.cssなどの外部ファイル（やstyle要素）の設定より優先されます。

01:01 | Comments [6] | Trackbacks [5]

2004年10月05日

●カレンダーの本日に枠線を表示

カレンダーの本日の日付を強調表示していたのですが、我楽さんの今さら普通のカレンダー設置。を参考に、日付に枠線を表示するよう変更してみました。ありがとうございました。
3カラムの各テンプレートを変更する場合は、カレンダー設定箇所の赤色部分を青色に変更します。

変更前
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>bgcolor="#ffffe0"</MTCalendarIfToday>>

変更後
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>style="border : 1px solid #8FABBE;"</MTCalendarIfToday>>


月送りカレンダーのテンプレートを変更する場合は下記の通りです。

赤色を削除して青色を挿入
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>style="border : 1px solid #8FABBE;"</MTCalendarIfToday>>
<span class="calendar">
<!--追加--><MTCalendarIfToday><b></MTCalendarIfToday><!---->
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$>
</MTCalendarIfNoEntries>
<!--追加--><MTCalendarIfToday></b></MTCalendarIfToday><!---->
</span>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>

2004.10.06 追記
本カスタマイズを行うと枠線表示分だけ高さが増えてしまいます。そのため月送りカレンダーを変更された場合、6週表示で最後の週がiframeからはみだしてしまうようであれば、テンプレートでカレンダーを挿入している設定の下記の赤色の値を+2して再構築してみてください。
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="160" height="112" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0"></iframe>

12:40 | Comments [20] | Trackbacks [8]

2004年09月29日

●リンクをマウスオン時にずらす

これも使い始めて随分日が経ちましたがとりあえずご紹介まで。
文字や画像のリンクにマウスをポイントすると表示が右下にずれるという技です。我楽さんのサイトで使われているのが気に入って、使ってみました。とりあえずタイトル文字と右下のバナーに適用させています。こういう小技は洒落ていていいですね。
カスタマイズ方法は、スタイルシートで該当するa:hoverの中に

position:relative; top:1px; left:1px;

を入れればOKです。

00:15 | Comments [4] | Trackbacks [5]

2004年09月06日

●リンクのアンダーライン一部削除

なんとなく表示が煩わしい感じがすると思ったらリンクのアンダーラインが全部出っ放しでした（早く気がつけって？）。で全部消したらすごい違和感があったので（笑）、

  • 本文
  • 投稿者欄

  • カレンダー
のアンダーラインだけ消してみました。言い換えるとサイドバーの各メニューだけアンダーラインを残してます。
ちなみにアンダーライン有無の指定はstyles-site.cssの各aタグ指定の
text-decoration: underline;

という部分を
text-decoration: none;

に変更すればOKです。


アンダーラインだけに、

01:38 | Comments [2] | Trackbacks [1]