アメブロにヘッダー画像を設置する方法

今回はアメブロにヘッダー画像を使う方法と設置したヘッダー画像をクリックしてトップページへ行けるようにリンクを設置していきます。アメブロのブログの幅を変更していない前提で進めます。

さて、初期状態ならブログの幅は1120pxになっています。そのため、ヘッダーに使う画像サイズは1120pxの幅の物を用意するとピッタリになりますので、素材（画像や写真）を探してペイントなどでサイズを変更しておくと良いです。

画像がない場合はフリー素材で探してもいいですし自分で撮影した画像でも大丈夫です。

MEMO

ちなみにヘッダー画像を設置するとブログのタイトルや説明文が邪魔になりますので、非表示にする場合が多いです。そのため、ヘッダー画像自体にブログのタイトルやロゴなど入れる加工しておくのもおすすめです。

画像の加工（サイズ変更や文字入れなど）は無料で利用できるバナー工房さんが便利です。

⇒バナー工房

有料だけど個人的におすすめの商材

⇒初心者のための商標サイト設計図

1 ヘッダー画像を設置する手順
- 1.1 ヘッダーに画像を設置する

ヘッダー画像を設置する手順

まずブログの幅のサイズの画像を用意したら画像をアップロードしていきます。

アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。

CSS編集のページに「ブログデザインヘッダ・背景用画像の追加」という項目があるのでここで「参照」をクリックしてファイルを選択し「アップロード」をクリック。

アップロードすると「この画像のパス」とかかれたURLが表示されているのでこれをコピーしてメモ帳等に貼り付けておきます。

ヘッダーに画像を設置する

画像のパスをコピーしたらCSSの一番下に次のコードを追加します。

/* アメブロヘッダー画像設定 */
.skin-bgHeader {
  background: no-repeat scroll center top;
  background-image: url(画像のパスURL);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader a[href*="//ameblo.jp/"] {
  height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
}
/* ヘッダーの背景色 */
.skin-bgHeader {
  background-color: fff;
}