ブログタイトルをロゴ画像に変更するCSSカスタマイズ

gooブログの「ブログタイトル」って、文字だけなので味気ないですよね？

gooブログアドバンスなら、テンプレート（HTML）編集で{$blogtitle}のモジュールが挿入されている部分をロゴ画像のIMGタグに置き換えてしまえば済む事ですが、gooブログ（無料版）ではHTML編集はできません。

仕方がないので、CSS編集のみでブログタイトルの文字をロゴ（画像）に変更してみました。

カスタムマークの付いているテンプレート（シンプル系18種またはカスタムフリー・カスタムブルー）を使っていればやり方は簡単で、CSS編集で #header、 .bTitle、 .bTitleLink、 .bDesc のセレクタに手を加えるだけいいんです。
＃ ロゴの画像を画像フォルダにアップロードしておく必要はありますが

CSSの修正・追加箇所は、以下の通りです。

/* ヘッダーの指定 */
#header {
		（中略）
  background-image: url(/images/tmp_sm_blue_l/head_bg.gif);
}

/* ブログのタイトル */
.bTitle {
  color: #006699;
  font-size: x-large;
  font-family:
    VERDANA,ARIAL,SANS-SERIF,Helvetica,'ＭＳ Ｐゴシック',Osaka;
  font-weight: bold;
  text-shadow: #fff 2px 2px 3px;
  text-align: left;
}

/* ブログタイトルのリンク（<a href="#" class="bTitleLink">で使用） */
.bTitleLink {
  text-decoration: none;
}

/* ブログの概要 */
.bDesc {
		（中略）
  font-family:
    VERDANA,ARIAL,SANS-SERIF,Helvetica,'ＭＳ Ｐゴシック',Osaka;
}

↓

/* ヘッダーの指定 */
#header {
		（中略）
  background-image: url(/images/tmp_sm_blue_l/head_bg.gif);
  /* ヘッダの位置指定 */
  position: relative;
  /* ヘッダの高さ指定 */
  height: 100px;
}

/* ブログのタイトル */
.bTitle {
  /* ブログタイトルの文字をロゴ画像にする */
  /* タイトル文字を非表示にする */
  display: none;
}

/* ブログタイトルのリンク（<a href="#" class="bTitleLink">で使用） */
.bTitleLink {
  text-decoration: none;
  /* タイトルの位置指定 */
  position: absolute;
  top: 10px; /* 上から10ピクセル */
  left: 25px; /* 左から25ピクセル */
  /* ブログタイトルの文字をロゴ画像にする */
  /* ロゴ画像の幅が288px、高さが64pxの場合 */
  width: 288px;	/* ロゴ幅 */
  height: 64px;	/* ロゴ高 */
  /* 背景画像（ロゴ画像） */
  background-image: url("ロゴ画像のURL");
  /* 背景画像の位置：左上寄せ */
  background-position: left top;
  /* 背景画像の繰り返し：繰り返しなし */
  background-repeat: no-repeat;
}

/* ブログの概要 */
.bDesc {
		（中略）
  font-family:
    VERDANA,ARIAL,SANS-SERIF,Helvetica,'ＭＳ Ｐゴシック',Osaka;
  /* 概要の位置指定 */
  position: absolute;
  bottom: 5px; /* 下から5ピクセル */
  left: 25px; /* 左から25ピクセル */
}

画像サイズ（幅：288px、高さ：64px）は、一例です。実際に使用される画像の縦横サイズの値を指定してください。

指定した位置（ピクセル数やtop、bottom）はあくまでサンプルです。お好みの値に変更したり、10%のような割合を指定することもできます。また、leftの代わりにrightを指定すれば右寄せも可能です。

背景画像（ロゴ画像）の配置は、「左上寄せ（left top）」ではなく「上下左右とも中央寄せ（center center）」にしても良いかも知れません。

このCSSカスタマイズの適用イメージは、以下の通り。

【通常】

はりょ。少子化問題とは関係ありません。
これは付録です。

『子供、いらない』付録GO

↓
【カスタマイズ後】

はりょ。少子化問題とは関係ありません。
これは付録です。

この方法で変更できるテンプレート（対象テンプレート）は、以下の通り。

• カスタムフリー　同ブルー（追記をご覧ください）　同メタル（駄目でした）
• クリアオレンジ左右　同左　同右
• クリアグレー左右　同左　同右
• クリアパープル左右　同左　同右
• クリアピンク左右　同左　同右
• クリアブルー左右　同左　同右
• クリアホワイト左右　同左　同右
• クリアミント左右　同左　同右（わは）

カスタムメタルの場合は、この方法を参考にもう一工夫する必要があるようです。

---

タイトル文字の透明化 - goo ブログサークル 2005年10月22日14:18
シンプル系・タイトルと概要の逆配置 2005年07月30日05:15

---

● 2005年10月26日追記
タイトルの位置指定が必須だったため、位置指定のサンプルコードを追加した。
また、カスタムブルーとカスタムメタルのテンプレートに関しては、CSSに#headerのセレクタがない（HTMLにid="header"が指定されたDIVタグがない）ため、このカスタマイズ方法が適用できなかった。

---

● 2005年04月28日追記
同じことをカスタムブルーで実現する記事のトラックバックをいただきましたので、ベーステンプレートがカスタムブルーの方はそちらの記事をご覧ください。

ブログタイトルを画像にするCSS - むっしゅの戯言　SPEC-B3 2006年04月28日14:58