アメブロのブログヘッダーをオリジナルヘッダーに変更する方法

ブログのタイトルや説明が書いてある部分を

ヘッダーと言います

パソコンで見るこちらの画面のみ

自分の好きなヘッダーに変えることができます

スマホで見るほうは変更はできません

まずは、独自でヘッダーを作りましょう

サイズは１０００×３００ピクセルです

画像加工のソフトをもっていない場合は

無料でオンライン上で作業ができる

このサイトで、ヘッダー画像を作れます

Online Photo Editor | Pixlr Editor

私もココを使って作りました

さて、画像が準備できたら

いよいよデザインの変更です

デザインの変更をクリック

下の方にある「カスタム可能」をクリック

「ＣＳＳ編集用デザイン」を選択

デザインを適用するとこの画面になります

「ＣＳＳの編集をする」をクリック

ブログデザインヘッダ画像の追加で「ファイルを選択」をクリック

作った画像を選択して「アップロード」

その下にブログデザインのＣＳＳと書いてあるところ

数字やローマ字などがたくさん並んでる一番最後に

こちらのタグをコピペしてください

/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(アップロードした画像の下にあるＵＲＬをコピペ);
}

/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}