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

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

自分のブログ（ここ）を見たら、確かに出なくなってます！

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

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

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

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

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

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

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

(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;
}

/*

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

まず、自分で作ったヘッダ画像を準備します。

サイズは横1120px が良いみたい。

妹は縦幅が大きいものを希望してますが、まずは初回なので適当に作りました。343pxでした。（すごい適当な値ｗ）

画像の作り方は割愛します。

とりあえずなんでもいいから画像に置き換えてみたい！って方は、ペイントで指定サイズの画像を作ってみてください。

画像が準備できたら、ブログのデザインをカスタム可能なデザインに変更する必要があります。

ブログ管理→デザインの変更→画面一番下の方「カテゴリから探す」内、カスタム可能　をクリック。

何種類か出てくるので、好みに近いものを選択してください。

私は「CSS編集用デザイン」を選択しました。

こんな感じ。

さて、赤丸の部分が現状、ダサい文字なので、ヘッダー画像に置き換えます。

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

CSSの編集画面が表示されます。まずは画面を上までスクロール。

「ファイルを選択」ボタンを押して、準備した画像を選択し、右側のアップロードボタンをクリック。

自分が作成した画像が下のように表示されたらOKです。

さて、ここからが、誰もやりたくないCSSの編集です！

画面を下にスクロールしていくと、よくわからない暗号文がたくさん出てきます…。

その中から「ヘッダー背景」のところまで進んでください。↓ここです。

そしたら、「ヘッダー背景」のところから「}」まで４行を消して、下の呪文を貼り付けます。

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: #ffffff;
background-image: url(★★★);
}
/* ヘッダーの横幅 */
.skin-bgHeader [amb-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さ */
.skin-bgHeader [amb-layout="headerInner"]>a {
height: ●●●px;
}
/* ブログタイトルと説明文非表示 */
.skin-headerTitle {
display: none;
}

そして、「★★★」のところを、以下画面の赤丸に書いてある文字列に変更します。

この画像だと、//stat.～～～.png　って書いてあるやつです。

黄色っぽいところをクリックすると、勝手に文字列全てが選択されるので、そのまま右クリック→コピーして、★★★のところに張り付けてください。

●●●のところは、作成した画像の縦幅を入れます。

私は謎数値の343pxで作成したので、343を入れました。

さて、ここまでできたら画面下にある「保存」ボタンをぽちっ。

そしてブログのトップ画面に移動します。

えっ、変更されてないけど…という方は、キーボードのF5ボタンを押して、ブラウザを更新します。

無事、ヘッダー画像が適用されました！

とっても暇な時で良いから、ブログバナー作ってほしい。

今、デフォルトで用意されてるデザイン使ってるんだけどダサい……

なるお願いが来た。

妹のブログをPCで見てみた。

（これまではスマホ画面でしか見たことなかったんで、デザイン未確認）

http://ameblo.jp/nude210/

おお、さすが姉妹。テンプレートのデザインを選んでいるとはいえ、好みが似ている気がする！　ならば私が自分好みにバナー作っても大丈夫そう。

「バナー」ってあれでしょ、ブログの上部に出ているタイトル入りの画像のところだよね。

確かにね。そこは結構作り込まないとフォントがまんまデフォルトでしょぼいし、オーダーメイドで何か作って売ろうって人は、デザインにも力入れるべきだよねー。

うんうん、わかったわかった、お姉ちゃん頑張っちゃうよー

画像1枚作るだけなんてヨユーヨユー。

妹に返事。

了解、いいよ。今作ってる作りかけのやつか何か送って。

それか、この人センス良い！と思う他の人のブログとか、好みのフリー素材サイトとか。

作りかけは無し。好みのサイトは………んー、こことかここが、とても良い雰囲気。

おしゃれで上品な感じ希望！

今はブログだけど、色々勉強して、将来は自サイトを持ちたいと（略）

oh.......かなり高クオリティのサイトが送られてきたー

ちょっと思考。

バナー作って、はいどうぞーするつもりだったんだけど、妹、色々勉強したいみたいだし、センス良いデザインにカスタマイズしたいってって気持ちは大事だよね。

よーし、お姉ちゃん、がんばっちゃうぞー

そんな経緯？で、自分もアメブロ開始。

同じ環境でデザインいじって内容記録し、妹に教えるため。

ついでに、同じようにカスタマイズ初めてみようと思っている方の参考なれば幸いです。