背景画像だけを表示したいけど空divを使うのはちょっと･･･という場合に使えるテクニックを紹介します。
使うタグはimgタグのみ。ただし、imgタグのsrcには1×1pxの透過GIF画像を指定します。そしてCSSでそのimgタグに背景画像を指定します。
img.bgimg {
background: url("path_to_img") no-repeat;
}
幅や高さはXHTMLで指定してください。これで背景画像として表示できます。CSSで画像を指定できるので、最近流行の CSS Sprite も使えます。
| 普通の画像 |
背景画像で |
 |
 |
XHTMLのタグにはclass要素でクラスを指定できますが、半角スペースで区切って指定すると、複数のクラス名をつけて複数のスタイルを適用することができます。
<div class="cls1 cls2 cls3">example…
</div>
このように指定します。
意外と知らなかったのでメモ。
WordPressは重いのが弱点ですが、よくよく調べてみると、テーマのCSSのファイルサイズが結構大きかったのです。そこで、この記事を見て圧縮してみました。
roScripts – Compress CSS code
これは便利ですね。CSSの最初と最後にPHPコードを書くだけで圧縮の準備が完了してしまいます。後はCSSをPHPが処理してくれるようにします。
これで圧縮前と圧縮後でCSSを分ける必要がなく、メンテナンスが非常にしやすくなりました。
ただし、.htaccessに下のようなコードを書いといてください。これで.htaccessを置いたディレクトリ下のCSSファイルが圧縮の対象になります。
<Files "*.css">
SetHandler application/x-httpd-php
</Files>
そして、具体的な例を挙げてみます(PHPコードは記事を参照してください)。
<?php コードを書きます ?>
body {
font: 75%/150% "Trebuchet MS", Tahoma, Arial;
color: #333333;
background: #FFFFFF url(images/main-bg.gif);
margin: 0px;
padding: 0px 0px 30px;
}
<?php コードを書きます ?>
という中身のCSSファイルをブラウザで読ませると、
body {font: 75%/150% "Trebuchet MS", Tahoma, Arial;color: #333333;background: #FFFFFF url(images/main-bg.gif);margin: 0px;padding: 0px 0px 30px;}
というように出力されます。
CSSを編集するときは普通のままで、ブラウザが読むと圧縮されるようにと、1つのファイルで実現できるのでとても便利です。
Recent Comments