BDS_アメブロヘッダーカスタマイズ

アメブロのヘッダー部分をカスタマイズする方法

ヘッダーが用意できたら、次はカスタマイズです。
ヘッダー部分のカスタマイズはCSS編集の第一歩、一緒に頑張りましょう。

「アメブロ」「ヘッダー」「カスタマイズ」で検索すれば方法を紹介しているサイトがたくさん出てきますが、ちょっとずつ内容が異なるのでどれを選べば良いのか分からないんじゃないかな・・・と思いました。なので、実際に私も設定してみて、一番簡単だった方法を紹介します。

◆アメブロのヘッダー部分をカスタマイズする方法

用意するもの:ヘッダー画像(1MB以下)

ココで重要なのは、データのサイズが1MB以下であるということ。1MB以下でないと読み込みしてくれないので注意が必要です。私が依頼を受けたお客様には保存用の大きいサイズとアメブロ用に圧縮したサイズをお渡ししていますので、アメブロ用と書いてあるファイルを使ってくださいね。

それでは、設定していきましょう。
アメブロのマイページにアクセスします。
[アメブロ]をクリック。
アメブロヘッダーカスタマイズ_01
[デザインの変更]をクリック。
アメブロヘッダーカスタマイズ_02_管理トップ
[CSSの編集]をクリック。
アメブロヘッダーカスタマイズ_03_CSSの編集

これがCSSの編集画面です。
まずはヘッダー画像の読み込みから。
アメブロヘッダーカスタマイズ_04_ヘッダー画像追加
[ファイルを選択]ボタンから画像を読み込んで、読み込み完了したら[アップロード]ボタンクリック。
アメブロヘッダーカスタマイズ_05_ヘッダー画像追加2
アップロードされるとこのような状態になります。この画像のパスが後で必要になります。
アメブロヘッダーカスタマイズ_06_ヘッダー画像のパス
次に、CSSの編集をします。
ブログデザインCSSの一番下までカーソルを移動してください。
アメブロヘッダーカスタマイズ_07_ヘッダー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;
}

こんな感じになります。
アメブロヘッダーカスタマイズ_09_CSS定形コピペ
コピペした部分を3箇所変更していきましょう。
画像の設定とヘッダー画像の幅と高さを入力します。
アメブロヘッダーカスタマイズ_10_変更する箇所
background-image: url(*);の*ところに、先程の画像のパスのURLを入力します。
ヘッダーの幅を2000pxに変更します。(1120pxの方もいます。)
ヘッダーの高さも変更しましょう。私が制作したものは400pxとか420pxが多いです。

編集は以上です。

最後に、[表示を確認する]でプレビューして、ちゃんと設定できたのを確認してから[保存]してください。
BDS_アメブロヘッダーカスタマイズ
うまくいかないときは[編集前の状態に戻す]をして、やり直してくださいね。