大人かわいいアメブロカスタムのMIHOです
今回はブログのヘッダー画像の設置方法について
よく自分でカスタマイズするのですがすぐ忘れてしまうので笑
忘れないように記録しておこうと思います♡
すでにご存知の方もらっしゃるとおもいますが、
ビジネスブログやお店ブログをしていらっしゃる方でも
設置されていない方もいらっしゃたのでご紹介します♡
アメブロにヘッダー画像を設置するメリットとしては
ブログを見て下さっている方に何のブログなのかすぐに分かる、
強い印象を与えることができます。
ブログのデザインと集客については後日また別記事で紹介しますね
（↑このピンクの部分がヘッダーです）
ヘッダー画像を設置するにあたり事前準備として１.画像を用意する
２.CSS編集可能デザイン
にしておきましょう(こちらも後日別記事でご紹介しますね）
用意するヘッダー画像についてアメブロのヘッダー画像の一般的なサイズは
横幅９８０px、縦幅は１５０～３５０pxがよく使用されています。
ちなみに上の見本画像のサイズは９８０×３００pxで作成してみました♡
CSSでヘッダー画像を設置する
マイページ ＞ アメブロ ＞ デザインの変更 ＞ CSSの編集でCSS編集画面を開きます。
現在使用中のブログデザインCSSを一番下までスクロールし(4) その他、拡張のところにします
/* その他、拡張があれば記述 */の文章のすぐ下に以下のCSSをそのままコピーして貼り付けます
/* アメブロヘッダー画像設定*/
.skinHeaderArea{
height:300px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center top;
}
(画像のURL)の( )の中に自分の画像アドレスを貼り付けします。（）は消さないでくださいね。
ヘッダー画像のアップロードや画像アドレスがわからない方はわざめーばさんの
こちら→『【新】ヘッダー画像用の画像をアップロードする』を参考にしてください
このとき、画像の高さが300pxより大きい場合は
height:300px;の数値を画像の高さに合わせて変更してください。
表示を確認するで実際に確認して表示されていたら大丈夫です。保存して終了♡
無事？設置できるとこのような状態になっています。
タイトルと説明文を非表示にするこのままの状態ですとブログのタイトル、説明文が表示されています。
もしタイトル、説明文を非表示にしたい場合は以下のCSSをすぐ下に
コピペすれば非表示にできます。
/* ブログタイトルとブログ説明文を消す */
.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}
もちろんタイトル、説明文を表示したままでも
ヘッダー画像を変更するだけでオリジナルのmyブログちゃんになります
笑難しそうに見えますが、ゆっくり順番通りに実行すればできます。
コピペで簡単に出来ますので挑戦してみてくださいね
thankxわざめーばさんの『アメブロのヘッダー画像を設定する』を参考にさせて頂きました。
いつもお世話になっております♡
こんなカスタマイズ方法が知りたい！！等ご要望ありましたら
お気軽にメッセージくださいね
MIHO♡