タイトル画像を、ｈ１（タイトル文字部分）の背景画像として表示します。
・
・
・
・
/* ----------------------- header ----------------------- */
#header{
height: 305px;
background-color: #ffffff;
}
#header h1 {
margin-left: 10px; /* タイトル画像の位置調整の為数値を変更*/
padding-top: 120px; /* タイトル画像の位置調整の為数値を変更*/
margin-bottom: 40px;
text-decoration: none;
}
#header h2{
margin-left: 20px; }
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color: #FFFFFF; /* 文字色を背景色と同じに*/
font-size: 30px; /* 文字のサイズを小さくしました*/
font-weight: bold;
line-height: 115%;
}
・
・
・
・
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a_ex.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
*/
・
・
・
・
#header {
background-image: url(http://画像のアドレス);
}
#header {
background-repeat:no-repeat;
background-position: 95% 100%;
}
/* ココが今回の追加場所*/
#header h1{
background-image: url(http://タイトル画像のアドレス);
}
#header h1{
background-repeat:no-repeat; /* 繰り返さない指定 */
background-position: 0% 100%; /* 背景画像のポジション指定 */
}
/* ココまで */
#header h2{
width:40%;
}
赤文字が今回修正したところです。
力技？です
タイトルの文字サイズを修正すると、概要の位置が上に上がってくるので、その分タイトルの上位置の指定の数値を大きくして、タイトル画像の位置を修正してみました。
あくまでも、背景として指定しているので、タイトルの文字自体は残っています。
背景色と同じにして、文字サイズを小さくして隠していますが、タイトル画像次第では見えてしまうので、うまいこと調整してみてください。
（タイトル画像の上にタイトルの文字が表示されます）
こんな感じ？
/* ----------------------- header ----------------------- */
#header{
height: 305px;
background-color: #ffffff;
}
#header h1 {
margin-left: 20px;
padding-top: 200px; /*更に数値を大きく*/
margin-bottom: 10px; /*タイトルの位置を下げた分概要との距離を小さく*/
text-decoration: none;
・
・
・
・
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a_ex.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
*/
・
・
・
・
#header h1{
background-image: url(http://タイトル画像のアドレス);
}
#header h1{
background-repeat:no-repeat;
background-position: 0% 70%; /*画像の縦位置を少し上に移動*/
}
#header h2{
width:40%;
}
で、文字色を背景色と同じにすると、大丈夫かな...？
※追記
タイトルの文字サイズを大きく修正してみた（見えないけれど、タイトル部のリンクを活用させるため）
それに併せて、タイトル部の縦位置も修正しました