個別記事

前後の記事

CSSで文字を画像に差し換え

この記事が属するカテゴリー
CSS

<h1>タグにサイト名を入れて、見栄えを良くするために、そこにロゴ画像などを使いたい場合に重宝する技。このサイトの上部ヘッダのサイト名もテキストでLucky-bag::blogと打ってますが、同じようなやり方を使っています。

サンプルとして右カラムの下にあるMTのバナー（この部分は別にテキストではなく、そのままバナー画像を使っても良いのですが、あくまでサンプルとして）でやってみます。

該当部分のhtmlソースとスタイルシート適用前の状態は下記の通り

<div id="powered">
<dl>
<dt>powered by</dt>
<dd><a href="http://www.movabletype.org" title="Movable Type <$MTVersion$>">
Movable Type <$MTVersion$></a></dd> 
</dl>
</div>
スタイルシート適用前

「Movable Type 3.01D-ja」の部分をバナーのgif画像に換えるCSSと適用後の状態（元のバナー画像に戻すかもしれないので貼っておきます）は下記のとおり

#powered {
                font-family: Verdana, Arial, sans-serif;
                font-size: x-small;
                margin-top: 50px;
}
#powered dd {
                margin: 0;
}
#powered a {
                background-image: url(img/powered.gif);←--------背景画像に指定し、センターに配置
                background-repeat: no-repeat;
                background-position: center center;
                width: 137px;←--------横と縦の幅は画像サイズに合わせて
                height: 32px;
                display: block;←--------ブロック化する
                text-indent: -9999px;←--------インデントで元の文字を飛ばす
                text-decoration: none;←--------ここは各自のCSSの設定によっていらないかもしれません
}
スタイルシート適用後

以上で完了です。今更ながらバナー部分をサンプルとしたのは、あまり適切でなかったかも知れないですね。ちなみに、このサイトのヘッダ部は、#bannerの背景画像にサイト名とサイト説明を合成していますので、サイト説明は、「display:none;」で文字を非表示にしています。サイト名はホームへのリンクとなっていますので、「display:none;」にするとリンクも非表示になってしまうのでインデントで飛ばしています。同様にサイト説明もインデントで飛ばしています。使いどころを考えれば、色々とCSSでサイトの見栄えを良くできると思います。あくまで、構造とデザインを分離するという名目においては、装飾に関する画像はCSSで指定するのが好ましいかと。

そのくせ、<br />多用してるじゃねぇかと言うツッコミは無しの方向でお願いします（笑）

2004-10-14T10:58:17+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/26

"CSSで文字を画像に差し換え"へのトラックバックはまだありません。

コメント

"CSSで文字を画像に差し換え"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)