Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみる

Twenty Tenテーマヘッダー部分のデザインの変更のために、テーマがどのようになっているかをみてみます。

メインのイメージ部分までの「branding」と、メニュー部分の「access」の大きな2つの部分からできていることがわかります。まずは、「branding」の部分を考える事にします。

ヘッダーのbranding部分のCSS

続いてこの部分のCSSがどのようになってるかも見てみます。

#header {
	padding: 30px 0 0 0;
}
#site-title {
	float: left;
	font-size: 30px;
	line-height: 36px;
	margin: 0 0 18px 0;
	width: 700px;
}
#site-title a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
#site-description {
	clear: right;
	float: right;
	font-style: italic;
	margin: 14px 0 18px 0;
	width: 220px;
}

/* This is the custom header image */
#branding img {
	border-top: 4px solid #000;
	border-bottom: 1px solid #000;
	clear: both;
	display: block;
}

ちょっと省略してある部分もありますが、上のCSSはこのような感じです。

ロゴを入れてみる〜site-titleの修正

まず、タイトルの横にロゴをいれてみたいと思います。ロゴが入るとサイトの印象が強くなります。

ちょこちょこっと新芽のイメージでロゴをつくってみました。サイズは65×55です。

  1. 背景を同色にしたので、よけいなスペースになってしまったheaderのpaddingを0にします。
  2. ロゴをsite-titleの背景として指定し、位置を調整します。
  3. ついでにフォントの色を真っ黒から少し薄いグレーに変えてみます。
#header {
	padding: 0;
}
#site-title{
  background-image: url(img/logo.gif) ;
  background-position: left center;
  background-repeat: no-repeat;
  padding: 10px 0 0 65px; 
  line-height: 55px;
  margin: 0; 
}
#site-title a {
	color: #7D7D7D;
}

こんな感じでロゴをいれることができました。
もちろん、site-titleすべてを画像にしたり、いろいろと工夫してみて下さい。

次は、site-descriptionの位置調整をしてみたいと思います。

Twenty Tenテーマのヘッダー部分のデザイン変更(1)〜サイトのロゴをいれてみる」への3件のフィードバック

  1. あつし

    はじめまして。
    質問させていただきます。
    ロゴが、表示されないのですが、考えられる原因がわかれば教えていただけないでしょうか?

    CSSの知識はほとんどなく、現在作成しています。
    いきなりの質問で申し訳ありません。

    返信
    1. webourgeon 投稿作成者

      あつしさん

      はじめまして。コメントありがとうございます。
      状況が分かりませんので、何とも言えませんが、考えられる事を書いてみますね。

      1. 画像へのパスはあっていますか?
        この記事で書いているCSS
        background-image: url(img/logo.gif) ;
        でロゴの背景にしたい画像を指定していますが、これはこのCSSファイルからみた位置です。

        子テーマのフォルダがあり、そのなかにstyle.cssを置きます。子テーマのフォルダにimgというフォルダをつくってlogo.gifを置きます。そうすると、cssファイルのひとつ下のimgにlogo.gifが入っていることになりますね。もし、画像のアップロードなどを利用してアップロードした画像でしたら、また違ってきますので、確認してみて下さい。

      2. cssの記述に間違いはないですか?
        ありがちなのが、「:」と「;」の打ち間違いです。あと、括弧がとじていないとか、全角で変なスペースが入っているとうまくいかないこともあるようです。
      3. cssの指定順序や優先順位は大丈夫ですか?
        他の所で、うっかりスタイルを上書きしているような事はないですか?またCSSには重み付けの順位がありますので、注意が必要です。
      4. htmlに間違いはないですか?
        テーマをそのまま使っていれば、まず大丈夫だと思いますが、変更を加えていたりすると、divの閉じ忘れや、入れ子の間違いでcssが効かなくなる事があります

      もしかしたら、もう確認済みかもしれませんが、一般的に多そうな事を書いてみました。
      site-titleに何か他の指定をしても変化がなければ、CSSの記述に何か問題が、そうでなければ、画像の指定に問題があると考えられないでしょうか。

      うまくいかなかったら、またコメントください。

      返信
  2. ピンバック: TwentyTenの子テーマとカスタマイズ  - Webライター斉藤ようこの「こんなんありましたけど」

コメントをどうぞ♪