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

アメブロにヘッダー画像を設置する方法アメブロカスタマイズまとめ

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

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

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

MEMO

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

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

⇒バナー工房

スポンサーリンク

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

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

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

アメブロのCSS編集

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

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

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

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

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

画像のパスをコピーしたら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;
}

「画像のパスURL」という文字を消して（）の中に先ほどの画像のパスURLを貼り付けて「保存」すれば完成。

ここの「height:300px」はヘッダー画像の高さです。お好みで変更して下さい。

こんな感じになりました。

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

ちなみにヘッダーの背景色というのは赤枠で囲んだこの部分です。

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

以上でアメブロのヘッダー画像設置は完了です。

コメント

タイトルとURLをコピーしました