妹から、
ヘッダー画像がでなくなった!!
との連絡が、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;
}
/*
念のため確認画面で見てから、大丈夫だったら保存ボタンで保存してくださいね!

