« TypePad1.6の上級者テンプレートについて | メイン | 上級者テンプレートセットの各テンプレートの説明 »

2006-01-05

タイトルバナーの画像の余白をなくす

「カスタム・テーマのタイトルバナーで画像を設定したら、余白ができてぴったりはまらない・・・」とお嘆きのあなた、そんなあなたにはこちらの目薬がお勧めです!

TypePadではカスタムテーマのタイトルバナーからバナー画像を設定すると、自動的に画像の周り上下左右に15pxずつ余白が入るCSSが設定されます。
そのため、デザインのカスタムCSSで以下のように記述するとぴったりになります。
(heightは画像サイズによって変更が必要です。)

例:ブログの幅700ピクセルの場合に、幅700px高さ120pxの画像を用意した場合

#banner
{
height: 120px;   
background-position: 0px 0px;       
}

カスタムCSSにこれを記述すると、前の設定 height: 150px; background-position: 15px 15px; を上書きし新しく設定するかたちとなります。

見た目の変更に関する場合は、上級者テンプレートを利用しない場合でもカスタムCSSでかなりのところでまでできると思いますので色々試してみる価値はあると思います。
こちらのカスタムCSS講座まとめも参考になります。

2006-01-05 at 04:49 午後 in スタイルシート関連 | Permalink

トラックバック

この記事のトラックバックURL:
http://www.typepad.com/services/trackback/6a0120a85ce28c970b0128775f47bc970c

Listed below are links to weblogs that reference タイトルバナーの画像の余白をなくす:

コメント

コメント、トラックバックは内容の確認の後公開とさせていただきます。

コメントを投稿