妹から、

 

ヘッダー画像がでなくなった!!

 

との連絡が、1か月以上前にありました。

 

自分のブログ(ここ)を見たら、確かに出なくなってます!

 

 

 

 

aya姉、体調不良等を理由に放置していましたが、台風襲来で娘の保育園が休園になり時間が出来たので、ようやく確認できました。(最悪 笑)

 

 

ひとつひとつ確認していった作業順に記録していきますが、めんどくさい人は最後の方に、
まとめてどこを消してどこを追加するか書きますので!

 

とりあえずCSS(スタイルシート)で非表示に設定した、skin-headerTitleを消すと、色々出てきました。

(2)-1内にある、以下のかたまりを消す。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

/* ブログタイトルと説明文非表示 */
.skin-headerTitle {
display: none;
}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

 

 


でも、ブログタイトルと説明文も出てきてしまい、画像と重なって非常に残念な雰囲気になったので、このタイトルと説明文を個別に非表示にします。

 

(2)-2内の以下2か所に、「display: none;」を追加する。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

/* (2-2) ヘッダータイトル、説明文
--------------------------------------------*/
/* ブログタイトル */
.skin-blogMainTitle {
color: #333333;
margin-bottom: 10px;
font-size: 27px;

display: none;   ★この行★
}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #999999;
font-size: 16px;

display: none;   ★この行★
}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

 

 

画像が出て、重なってた文字が消えましたが、背景画像の縦幅が見切れています。
背景画像エリアの縦幅の設定(私の場合、343px)が効いてないみたいです。

色々見たんだけど、なんか設定が上書きされてるのかなぁ…。
なので、設定する箇所を変えました。

 


(2)-1内にある、縦幅の設定箇所を移動して、移動元の設定は消しました。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: #ffffff;
background-image: url(
http://stat.blogskin.ameba.jp/blogskin_images/20170518/00/f4/IE/p/o11200343ayasamp1495035319640.png);
height: 343px;         ★ここに移動★
}
/* ヘッダーの横幅 */
.skin-bgHeader [amb-layout="headerInner"] {
width: 1120px;
}

/* ヘッダーの高さ */               ☆消す                     
.skin-bgHeader [amb-layout="headerInner"]{  ☆消す

height: 343px;         ★この行のみ上へ移動★
}                       ☆消す

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

 


復活しました♪

 


◆まとめ◆
というわけで、スタイルシートの変更のまとめです。

①ご自身のヘッダー画像のURL、縦幅を控えてください。

②ブログ管理→デザインの変更→画面上部にある「CSSの編集」をクリック。

③画面下まで進んでいき、誰も見たくない暗号文のところへ。

④(2)-1を、以下と同じになるように設定してください。★★★は画像のURL、●●●は縦幅です。

 

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: #ffffff;
background-image: url(★★★);

height: ●●●px;

}
/* ヘッダーの横幅 */
.skin-bgHeader [amb-layout="headerInner"] {
width: 1120px;

 

⑤(2)-2の箇所に、以下display: none; を追加設定してください。

 

/* (2-2) ヘッダータイトル、説明文
--------------------------------------------*/
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}

/* ブログタイトル */
.skin-blogMainTitle {
color: #333333;
margin-bottom: 10px;
font-size: 27px;

display: none;
}

/* ブログ説明文 */
.skin-blogSubTitle {
color: #999999;
font-size: 16px;

display: none;
}

/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 80px;
padding-bottom: 80px;
text-align: center;
}

/*

 

念のため確認画面で見てから、大丈夫だったら保存ボタンで保存してくださいね!