101LAB::design::clip

バナーのhtmlはほぼMovableTypeのデフォルトのまま。 <div id="banner"> <div id="banner-inner" class="pkg"> <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <h2 id="banner-description"><$MTBlogDescription$></h2> <$MTInclude module="google-search-box"$> </div> </div> モジュールである$MTInclude module="google-search-box"$は後日追記しますが、MovableTypeのデフォルトでもOKです。 CSSは、 /*バナー*/ #banner { padding: 0; margin: 0; width: 700px; /*画像の幅*/ /*画像の高さ*/ } #banner-header a { background: transparent url(images/logo-101webdesign.png) no-repeat top left; color: #000; display: block; padding: 0 0 0 10px; margin: -5px 0 0 0; font-size: 2px; width: 385px; /*画像の幅*/ height: 70px; /*画像の高さ*/ text-decoration: none; text-indent: -700em; } /* WinIE用png \*/ * html #banner-header a { background: none;　 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/webdesign/include/css/images/logo-101webdesign.png',SizingMethod='crop'); } #banner-description{ color: gray; font-size: 12px; padding: 5px 5px 5px 10px; } filter:progid:DXImageTransform.Microsoft.AlphaImageLoaderはIEが透過PNGに未対応なため利用。IE 7での検証はしていませんが、たぶん問題ないんじゃないかな。将来的に#bannerの背景に画像が入る事を想定した汎用的な作りです。 ベストではありませんが、html自体はベターかなと思っています。