アメブロ ヘッダー画像を入れてみる

アメブロのカスタマイズで、ヘッダー画像を入れるやり方です。

カスタマイズは、CSS編集用デザインを利用してくださいね。
デザインの選択方法はこちら

ヘッダー画像をアップロード

今のアメブロは、ブログ幅が980pxですので、ヘッダーも980pxのものを用意します。
カスタマイズで幅を変えている場合は、ヘッダーもその幅に合わます

管理画面のクイックリンクから、スキンCSSの編集で、CSS編集画面に移動します。

『ブログデザインヘッダ・背景用画像の追加』から、パソコン内のヘッダー画像をアップロードします

ヘッダー画像のアップロード

ブログデザインヘッダ・背景用画像の追加からアップロードします

アップロード後表示される、『この画像のパス』がヘッダー画像のURLになります。

ヘッダー画像URLの取得

この画像のパスがヘッダー画像URLになります

ヘッダー画像を入れるCSSを追加

CSSの編集ページで、紹介するCSSコードを一番下に追加します。
※直接追加するのではなく、パソコン上のメモ帳などに移して編集した方が安全です。

タイトル、説明文を残す場合

アメブロの基本設定で入力する、ブログタイトル、説明文をそのままテキスト表示させる場合は次を追加します。

.skinHeaderArea {
 background:url(画像URL) left top no-repeat;
 height: 300px!important;/*高さ*/
}

画像URLの部分を、上でアップロードしたヘッダー画像のURLに変更。
高さの数値を、ヘッダー画像の高さに調整します。

タイトル、説明文をヘッダーに画像として埋め込んだ場合

ヘッダー画像に、タイトルや説明文などを画像として埋め込んだ場合、上記のCSSだけではテキストのタイトル、説明文も表示されてしまいます。

タイトル、説明文を画像として埋め込んだ場合は、テキストのタイトル、説明文は表示されないように次のCSSを追加します。

.skinHeaderArea {
background:url(画像URL) left top no-repeat;
height: 300px!important;/*高さ*/
}
h1.skinTitleArea,h2.skinDescriptionArea{
margin:0;
padding:0;
}
h1.skinTitleArea a{
width:980px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block;
position:absolute;
text-indent:-9999px;
}
h2.skinDescriptionArea{
display:none;
}

こちらも同様に、画像URLの部分をヘッダー画像のURLにします。
高さの数値も調整します。今回は2ヶ所あります。

アメブロの基本設定で入力したタイトル、説明文を非表示にして、ヘッダー画像全体にトップページへのリンクがはられた状態になります。

また、タイトルや説明文を画像として埋め込んだ場合でも、基本設定で入力するタイトル、説明文は『.』などと省略せずに、正しく書きましょう。
検索ロボットは画像に埋め込まれた文字を認識できませんし、他のアメブロの『お気に入り』などでリンク表示される場合も、基本設定のものになります。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">