さて、まずは最初に妹に希望されたバナー、つまり、ヘッダを自作し置き換えることを目的にします。
まず、自分で作ったヘッダ画像を準備します。
サイズは横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ボタンを押して、ブラウザを更新します。
無事、ヘッダー画像が適用されました！
