« 2005年11 月 | メイン | 2006年2 月 »

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 | コメント (0) | トラックバック