ヘッダー画像を設定する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は『ヘッダー画像を設定する方法』です。

アメブロでは、ブログのヘッダー部=ブログタイトル表示部分に、そのブログをイメージするバナー画像=ヘッダー画像を表示するカスタマイズがよく行われます。

今回は、このヘッダー画像を表示するためのカスタマイズ方法をご紹介します。

まず確認

このカスタマイズは、CSSの編集で行いますので、もし、やり方がわからない場合はCSSの編集方法を確認しておいて下さい。

CSSを編集

では、以下のコードをアメブロのユーザーCSSの最後に追加して下さい。

/* ヘッダー画像設定 */
#header,.skinHeaderArea{
  height:300px;
  background-image:url(ヘッダー画像のURL);
  background-repeat:no-repeat;
  background-position:center top;
}

このコードは、新旧両デザイン対応です。

お使いのデザインが新デザイン『CSS編集デザイン』の場合は「#header,」の部分を、『【カスタム可能】ベーシック』等の旧デザインの場合は「,.skinHeaderArea」の部分を消すとコードがスッキリしますが、新旧って何?という場合はそのまま使っていただければいいと思います。

また、このコードは、アメブロのヘッダー部の中央にヘッダー画像を一枚だけ表示することを想定した設定です。

まず、赤文字部分ですが、アメブロのヘッダー部に表示するヘッダー画像のURLを指定します。

画像のURLに関してわからない場合は、画像アップロード方法とアップロードした画像のURLを取得する方法を説明した記事がありますので参考にして下さい。

特に、横幅が800ピクセル以内の場合と、800ピクセルを超える場合では、画像をアップロードする場所が変わってくるという点は重要ですのでご注意下さい。

また、緑文字部分には、ヘッダー画像に使用する画像の高さをピクセル数で設定します。

画像の高さがわからない場合は、ひとまず適当に設定しておいて、保存後、実際にブログを確認しながら調整するといいと思います。

以上の設定ができたら、CSSを保存してブログを確認してください。

もし、ブログを確認しても変化がない場合は、一度ページを最新の状態に更新(Windowsの場合F5キーを押すなど)してみてくださいね。

その他

ヘッダー画像は、ブログの顔として非常に重要視されることも多いですね。

画像の作成はなかなか大変だと思いますが、設置はそんなに難しいものではありませんので、よかったら挑戦してみてくださいね。

関連記事

CSSの編集
画像アップロード方法とアップロードした画像のURLを取得する方法
ブログタイトルとブログ説明文を消す方法

この記事は、2011/07/16の記事を2011/09/22に新旧統合記事として全面書きかえしました。

アメブロカスタマイズで自分らしい魅力的なアメブロを作る技