そのブログによっては、CSSの記述が違う場合があるので、上手くいかないかも知れません、、、
★注意
①この変更を行う場合は、デザインを「CSS編集用デザイン」を適応してください。
（この私のブログは、不幸にもだいぶ前に作ったので【カスタム可能ベーシック】を適用していますので、あまり参考にはなりませんｗ）
②レイアウトは、好みもありますが、3カラム・左右メニューがお勧めだと思います。
（「CSS編集用デザイン」では、3カラム・左右メニューになると思います。）
アメブロカスタマイズCSS編集方法を徹底解剖！初心者でも必ずできる
http://ameblo.akarukutanoshiku.com/css/
【アメブロカスタマイズ】2-3 ヘッダーにオリジナルのヘッダ画像を設置しよう
– 目立つブログタイトル –
http://www.wcf-drill.com/2013/01/ameblo-customize-header-original-image.html
【新】アメブロのヘッダー画像を設定する
http://ameblo.jp/wazameba/entry-10967166333.html
アメブロのトップページにヘッダー画像を設定する【アメブロカスタマイズ】
http://ameblo.jp/hokkai-ooya/entry-11317385369.html
ブログタイトルとブログ説明文を消す方法
http://ameblo.jp/wazameba/entry-10652589282.html
ブログタイトル、ブログ説明文の文字サイズ、文字色、表示位置などを変更する方法
http://ameblo.jp/wazameba/entry-11401326198.html#navi
タイトルと説明文付きのヘッダー画像を設定する方法
http://ameblo.akarukutanoshiku.com/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E2%91%A7%E3%83%BB3-2-%E3%83%96%E3%83%AD%E3%82%B0%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%BB%E3%82%A2%E3%83%A1%E3%83%96%E3%83%AD%E3%82%AB/
＜まずは、CSS編集画面へ進みますｗ＞
（１） 「マイページ」で上部にある「ブログを書く」と言うタブをクリックする。
（２） 次に左にあるメニューから「デザインの変更」をクリックする。
（３） 下図の[CSSの編集]をクリックする。
（４） 準備した画像を「参照...」から選択して。「アップロード」する。
・ 準備する画像幅は８００ピクセル以内にしてください。
・ 画像のフォーマットは、gif、jpg、png のみ。
・ 5枚までアップロード可能です。
・ 各画像は、1MB以内としてください。
（５） アップロードした画像の URL は、下図の用に確認、コピーできます。
（６） 「現在使用中のブログデザインCSS」のテクストBOXを、「(3-2) ブログヘッダー」までスクロールします。
＜そして、ヘッダー画像を設定するためにCSSの編集を行いますｗ＞
（７） CSS の記述追加
下記の記述をコピペして、一部修正する。
記述内容の追加１
この追加で、ヘッダー画像が追加されます。
例１「CSS編集用デザイン」の場合；
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* ★【ここからコピペ】★
*/
/* skinHeaderArea
ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(上記（５）で確認した画像のパス（URL）を記入する);
background-repeat: no-repeat;
background-position: center bottom;
width: 800px; /* ←背景画像の幅 */
height: 500px; /* ←背景画像の高さ+100px */
margin-bottom: 15px;
}/* ←ブログヘッダーに背景画像を敷きたいとき
*/
/*
skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {}
/* skinTitleArea ブログタイトルのエリア
*/
.skinTitleArea {
text-indent: -9999px; /* ★【タイトル名を欄外に移動】★ */
}
/* クリックするとブログのトップに移動
*/
.skinTitleArea a.skinTitle {
/* (width: 800px;) */
/* (height: 400px;) */
/* (display: block;) */
}
/* skinDescriptionArea
ブログの説明エリア */
.skinDescriptionArea {
text-indent: -9999px; /* ★【説明文を欄外に移動】★ */
}
/* ★【ここまでコピペ】★
*/
/* (1-2) ブログタイトル文字
--------------------------------------------*/
/* skinTitle ブログタイトル文字 */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus{
color: #ffffff; /* ★【タイトル文字の色】★ */
font-weight: bold; /* ★【タイトル文字のタイプ】★ */
font-size: 1.5em; /* ★【タイトル文字のサイズ】★ */
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color: #ffffff; /* ★【説明文の文字の色】★ */
font-size: 0.9em; /* ★【説明文の文字のサイズ】★ */
}
「表示を確認する」をクリックして、表示の確認をして、問題がなければ、保存して終了です。
例２【カスタム可能ベーシック】の場合；
（上記の例１が上手くいかない場合は、この記述をしてみてください。）
（カスタム可能ですが、古いテンプレート）
/*
★【ここからコピペ】★ */
#header {
background-image: url(画像のURL);
}
#header
{
background-position: center bottom; /*
★【←ヘッダー画像の上に少し隙間をあける時に追加】★ */
width: 800px; /* ★【←ヘッダー画像の最大サイズ】★
*/
height: 440px; /*
★【←ヘッダー画像の上に少し隙間をあける時は、実際の画像サイズ+40】★ */
margin: 5px; /* ★【←ヘッダー画像の上に少し隙間をあける時に追加】★
*/
margin-bottom: 15px; /* ★【←ヘッダー画像の下に少し隙間をあける時に追加】★ */
}
#header
{
background-repeat:repeat-x;
}
/* ★【ここまでコピペ】★
*/
「表示を確認する」をクリックして、表示の確認をして、問題がなければ、保存して終了です。
記述内容の追加２ （例３【カスタム可能ベーシック】の場合）
この追記で、説明文が枠外に移動でき、ヘッダー画像に説明文が重ならなくなりますｗ
/*-----------------------------------------------------
ameblo
CSS Skin Settings
Skin for: basic_ad
FileName: common.css
$Revision:
1.8
$
-----------------------------------------------------*/
/*============ ☆
かんたんスキンカスタマイズはこちら ☆
==============*/
/*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/
/*１）ブログタイトルの文字サイズを変更する*/
#header
h1{
font-size: 3.5em; /*-- 25px相当の文字サイズ --*/
/*--
説明文を枠外へ移動する場合に追加する記述（text-indent: -9999px; ）
--*/
}
/*２）ブログタイトルの文字色を変更する*/
#header h1
a{
color:#FF3399; /*-- ピンク --*/
}
/*３）ブログ説明の文字サイズを変更する*/
#header
h2{
font-size: 2.0em; /*-- 12px相当の文字サイズ
--*/
}
/*４）ブログ説明の文字色を変更する*/
#header h2{
color:#FF3399; /*-- ピンク
--*/
text-indent: -9999px; /*-- 説明文を枠外へ移動
--*/
}
/*５）ページ背景に画像を入れる*/
body{
background-image:url();
}
「表示を確認する」をクリックして、表示の確認をして、問題がなければ、保存して終了です。
＜以下、まとめ＞
以下をコピペして、必要な修正（太文字ピンクの部分）をしてくださいｗ
（オレンジ色の部分は、補足説明です。）
/*
(3-2) ブログヘッダー
--------------------------------------------*/
/*
skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image:
url(画像のパス);
background-repeat:
no-repeat;
background-position: center top;
width: 800px; /* ←背景画像の幅
*/
height: 300px; /* ←背景画像の高さ+60px */
margin-bottom:
15px; /* ←背景画像の下の空間 */
} /* ←ブログヘッダーに背景画像を敷きたいとき */
/*
skinBlogHeadingGroupArea タイトルと説明を囲うエリア
*/
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}
/*
skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
text-indent: -9999px; /*
←タイトルを画面の外に配置する場合のみ記述 */
font-size:5px; /*
←タイトル文字の大きさ*/
position:absolute;
top:1px; /*
←上からの位置（マイナスにすると画像の上に表示する）*/
left:0px; /*
←左からの位置（大きい値ほど右に表示する）*/
}
/* クリックするとブログのトップに移動
*/
.skinTitleArea a.skinTitle {
width: 800px; /* ←背景画像の幅
*/
height: 240px; /* ←背景画像の高さ */
display: block;
}
/*
skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{
text-indent: -9999px; /*
←説明文を画面の外に配置する場合のみ記述 */
position:absolute;
font-size:5px; /*
←説明文の文字の大きさ*/
top:1px; /* ←上からの位置（マイナスにすると画像の上に表示する）*/
left:10px; /*
←左からの位置（大きい値ほど右に表示する）
}
じゃーんｗ
自分のブログに Danceroid
のまあむさんと同じブログパーツ（降り注ぐリボンとハート）貼ったり、ヘッダー画像に被っていたタイトルや説明文をヘッダー画像の上に配置しましたｗ
他にもいろいろと出来そうなので、また、チャレンジしてみようかなｗ
