ヘッダーが用意できたら、次はカスタマイズです。
ヘッダー部分のカスタマイズはCSS編集の第一歩、一緒に頑張りましょう。
「アメブロ」「ヘッダー」「カスタマイズ」で検索すれば方法を紹介しているサイトがたくさん出てきますが、ちょっとずつ内容が異なるのでどれを選べば良いのか分からないんじゃないかな・・・と思いました。なので、実際に私も設定してみて、一番簡単だった方法を紹介します。
◆アメブロのヘッダー部分をカスタマイズする方法
用意するもの:ヘッダー画像(1MB以下)
ココで重要なのは、データのサイズが1MB以下であるということ。1MB以下でないと読み込みしてくれないので注意が必要です。私が依頼を受けたお客様には保存用の大きいサイズとアメブロ用に圧縮したサイズをお渡ししていますので、アメブロ用と書いてあるファイルを使ってくださいね。
それでは、設定していきましょう。
アメブロのマイページにアクセスします。
[アメブロ]をクリック。
[デザインの変更]をクリック。
[CSSの編集]をクリック。
これがCSSの編集画面です。
まずはヘッダー画像の読み込みから。
[ファイルを選択]ボタンから画像を読み込んで、読み込み完了したら[アップロード]ボタンクリック。
アップロードされるとこのような状態になります。この画像のパスが後で必要になります。
次に、CSSの編集をします。
ブログデザインCSSの一番下までカーソルを移動してください。
一番下までスクロールしたら、下記のコードをコピペします。
/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: 【背景色】;
background-image: url(*);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [data-uranus-layout=”headerInner”] {
width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout=”headerInner”]>a {
height: ヘッダーの高さを入れるpx;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
こんな感じになります。
コピペした部分を3箇所変更していきましょう。
画像の設定とヘッダー画像の幅と高さを入力します。
background-image: url(*);の*ところに、先程の画像のパスのURLを入力します。
ヘッダーの幅を2000pxに変更します。(1120pxの方もいます。)
ヘッダーの高さも変更しましょう。私が制作したものは400pxとか420pxが多いです。
編集は以上です。
最後に、[表示を確認する]でプレビューして、ちゃんと設定できたのを確認してから[保存]してください。
うまくいかないときは[編集前の状態に戻す]をして、やり直してくださいね。