The other way round

> padding-top　の数字を小さくしてみてもブログタイトルとの幅が縮まらない〜

こちらはすぐ上にあるブログタイトルにもpaddingが指定されているためです。
今回修正するブログ説明文側のpadding-topを削除すると、自動的にタイトルとの距離は30pxになります。
距離30pxで体裁が取れるのであればpadding-topの一行は不要ですので削除してください。
逆にもっと距離を狭くしたい場合は
[太字]#blog-title {[/太字]
で検索し、その括りの

padding: 30px 0;

を以下の通り修正

padding: 30px 0 [斜体][斜体]●●[/斜体][/斜体]px;

30pxが「上」0が「左右」●●が「下」の距離指定です。
#blog-titleの方でpadding調整をする場合には「距離を[下線]近づける[/下線]」作業になります。

-----------

画像を調整する場合の方法は概ね4通りかと思います。
① 画像自体を変更する
② 現在の画像のまま、画像編集で暗色系のオーバーレイをかける (画像編集が必要)
③ 現在の画像のまま、画像編集なし、CSSで暗色オーバーレイをかける (CSS追加が必要)
④ 現在の画像のまま、画像編集なし、テキスト(ブログタイトル及び説明文)にCSSシャドウ処理をかけて浮き立たせる

①と②についてはご自身で行って頂くことになります。
③と④の手順を書いておきますのでご希望に沿う方を採用されると良いと思います。
もちろん以下の方法を利用しなければいけない、ということではありません。
そして
・[下線]ブログタイトルリンク色は「白」である[/下線]
・画像はヘッダー(.header-banner)ではなく[下線]ヘッダー内側の要素(.blog-name-container)[/下線]へ指定する
上記2点、はるさんのカスタマイズ済み内容を尊重し、前提にしています。
ホントは画像はヘッダーに指定した方がスマートですが、既にカスタマイズ済みなのでここは触らずに進めましょう。
-------

元の画像スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/original98u2943th.jpg

③ CSSオーバーレイ

[太字].blog-name-container {[/太字]
で検索。ヒット2箇所。最初のものが対象。
この括りの
[太字]color: white;[/太字]
の直下に

[太字]position: relative;[/太字]

を追加。
続きまして検索。
[太字]#blog-title {[/太字]
この括りの
[太字]text-align: center;[/太字]
の直下に

[太字]position: relative;
z-index: 3;[/太字]

を追加。
そして昨日追加した
[太字]#site-description[/太字]
の括り
[太字]color: 文字カラーコード; [/太字]
の直下にも同じく

[太字]position: relative;
z-index: 3;[/太字]

を追加。
続きましてCSSソース末尾で良いので
[太字]
.blog-name-container:before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.2);
position: absolute;
top: 0;
left: 0;
}[/太字]

を追加。

結果スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/overlay9827493th.jpg

--------

④ テキストにシャドウ

[太字]#blog-title {[/太字]
の
[太字]text-align: center;[/太字]
の直下に

[太字]text-shadow: 2px 0px 2px rgba(85,85,85,.8);[/太字]

を追加。
説明文にも必要であれば、
#site-description
にも同じものを追加。

結果スクショ
http://blog-imgs-114.fc2.com/v/a/n/vanillaice000/shadow9827493th.jpg

以上です。よろしくお願いします。

SECRET