【覚書！】昭和アナログ女子でも出来る！ブログにヘッダーをつける方法！！

こぬにちは！！連日、アメブロのカスタマイズに燃えまくっている昭和乙女の長谷川陽子でございます！！

ワタクシ自分で言うのもなんですが、死ぬほどアナログです！

ブログの開設も人任せだったワタクシですが、この度一念発起してブログのカスタマイズを行っています！！

ワタクシがブログを始めた10年前とは全然様子がちがって、最近では色んな方がカスタマイズの方法をネットで上げてくださっているので、こんなワタクシでも自力で色々出来ています！！

昭和50年生まれ兎年、もうすぐ半世紀生きてしまうワタクシですが、この年になって新しいことを学べてなんだか若返ったような気もちです。

と、いうことで今回は自分のブログにヘッダーをつける方法です！

ワタクシ自身忘れてしまいそうなので覚書の意味でアップしました！

①

まず最初にブログのヘッダーを作ります。

私はcanvaを使って作っています。無料でもそこそこのモノが作れるし、ダウンロードも不要なのでおススメです＾＾

ヘッダーのサイズは「横幅1120px」×「縦幅300～600px」です。

縦は350ｐｘくらいがそこそこ見栄えが良くて見やすいようです。

②

次にアメブロの管理画面から「デザインの変更」をクリックしまっす！

③

赤丸の中の「CSS編集用デザイン」を選択しまっす。

③

「CSS編集用デザイン」選択後、動画面の最上部までスクロールして戻って、

「CSSの編集」をポチッとな。

④

「ブログデザインのCSS編集」画面が開くので、矢印１の「ファイルを選択」で自分の保存フォルダから①で最初に作成しておいたヘッダー画像を選択して、矢印２でアップロードしまっす！

⑤

アップロードした写真が一覧で表示されます。

赤い矢印のように、ヘッダーに貼りたい写真のHTMLをクリックしてコピー！

⑥

あ！その前に！！

下記のピンクの枠内を全部コピーして、

/* ▼ヘッダー画像の設定▼*/
/* ヘッダー画像を設置 */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ヘッダー画像のURL);
} /* ヘッダーの高さを設定 */
.skin-bgHeader a {
height: 400px;
} /* ブログタイトルと説明文を消す */
.skin-headerTitle { display: none; }/*
▲ヘッダー画像の設定▲*/

同画面の「現在使用中のブログデザインCSS」の一番下にコピペします。

で、↑ピンクの枠内見てください。赤文字で「ヘッダー画像のURL」ってありますよね？

その文字を消して、その場所に⑤のHTMLをコピペしてください。

あと、赤文字で400ってありますよね？それが縦幅になるので、ご自分の画像の縦幅を入れてください。

（①で「横幅1120」×「縦幅300～600」で作るって書きましたね。その縦幅です＾＾）