WordPressのテーマTwenty Tenのカスタマイズを中心にブログを書いていますが、テーマを解説して、「ここを変えればいいですよ」という所までで、CSSの細かいところまではなかなか書ききれないように感じていました。検索されているキーワードや、昨日いただいたコメントのことなども考えると、もう少しCSSについて突っ込んで書いてみてもよいのかな、と思いました。そこで、「はじめてでもきっと分かるCSSの小技」として、主にテーマのカスタマイズで取り上げたCSSについて少し詳しく書いてみることにします。

第一弾は、なんとなくアクセスの多い気がする、ヘッダーのロゴに関連して、「文字の後ろや左に背景画像を入れる」、いきます！

やはり、ブログなどカスタマイズしていて、ロゴを入れたい、タイトルや見出しなどを修飾したい、と思う事は多いのではないかと思います。Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみるで少し触れたので、さらにつっこんでみたいと思います。

文字の左に背景画像を入れる

文字の左に画像、リストマークなどをいれたいことは多いと思います。よく見かける、こんなのですね、

サイトのロゴを入れる、もこの方法です。

1. 背景画像を指定

   background-image: url(img/square.gif) ;

   background-imageは背景に画像を入れます、という意味です。url()で画像までの距離を指定します。この場合、CSSと同じ階層にあるimgフォルダの中の、「square.gif」という画像のファイルを指定しています。

   

2. 背景画像の繰り替えしをなくす

   このままでは画像が下の画像（イメージです）タイル状に繰り返して配置されてしまいます。ひとつでよい訳ですから繰り返しをやめてもらいます。

   background-repeat: no-repeat;

   background-repeat→背景の繰り返し、no-repeat→繰り替えさない、そのまんまですね。

   

3. テキストをpaddingで左に動かす

   左にひとつ配置されましたが、テキストに重なっています。これでは困るのでテキストに左を空けてもらいましょう。画像の幅と、見やすいように少し余白をプラスするといいかもしれません。この辺はケースバイケースで。

   

4. 背景位置を調節

   テキストのサイズによっては画像がうまく上下中央に来ない事があると思います。そんなときは、「background-position」で微調節します。

   background-position: left center;

   「left center」は左、上下中央と言う意味です。これでもうまくいかなかったり、テキストが2行になったりというときは

   background-position: 0 5px;

   の様に左からの距離、上からの距離、の順で指定します。色々動かしてみると感覚で分かってくると思います。

   

テキストより大きい背景を入れたい

テキストより大きな画像を入れたいときがありますね。普通に指定してしまうと、画像の上下が欠けてしまいます。これは、テキストの背景、として指定してあるので、テキストの範囲内しか表示されないためです。ですので、テキストの高さの範囲を画像の高さ分だけ高くしてあげればいいわけです。画像が26pxとするとと、

line-height: 26px
または
height: 26px

line-heightは行間ですので、行間広がった分高さが出ます。自然に画像が真ん中に来て便利です。ただし、テキストが2行のときなどは悲しい見た目になるんので注意してください。
heightは文字通り、高さを指定します。これは行間は自然でよいのですが、文字サイズを変えられてしまうと、文字が欠けてしまうこともあります。
（min-heightで最小サイズを指定してあげるのもよいと思います。min-heightは古いIEでは認識してくれないので、heightも併記します。）

テキストの背景全部に画像をいれたい

よく見出しであるような、テキストの背景全部に画像が入るパターンです。これも同じように背景を指定してあげます。

この例のように左にボーダーがはいっていたりするデザインでは、ボーダーと適切な余白分のpaddingを左に取ります。上下の幅は、上の「テキストより大きい背景を入れたい」と同じでよいのすが、このデザインの様に下にボーダーが入っていたりすると、うまく上下中央に見えません。そんなときは上下のpaddingで調整してあげます。

長くなってきたのでこの辺で。こんな感じで、どうでしょうか？基本的なことだけまとめたつもりなんですが．．ちょっと不安なので、ご感想もお待ちしています。

たぶん、ロゴ関連で、テキストは消して、全部ロゴにしたい、というのも多そうなので、次回はその話をするつもりです。では