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


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

カスタマイズは、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ヶ所あります。

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

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

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください

9件のコメント

  • 自分磨きのひと時 エステ・アロマ・リンパ香りの園 かぞの です♪

    内藤様 いつも丁寧な 指導のメールありがとう ございます♪
    私 60歳ですが、初心者にもできる というフレーズに導かれて
    アメブロカスタマイズして います^^
    この ヘッダー画像を入れてみる も10日たってようやく意味が
    わかりました・・・(--)
    お気に入り にはいれましたが、いつできますことか・・・

    また、アメンバー・読者登録 も意味が曖昧です。
    今、ようやくコメント欄を みつけられましたので、
    コメントできました~♪
    これだけでも 嬉しいのです♪

    長くなりました、これからも よろしくお願いします。

  • 自分磨きのひと時 エステ・アロマ・リンパ香りの園  です♪↑

    何度もすみません。画像にタイトル・説明文を埋め込むってっどうするのでしょうか? また、画像の大きさを変えられるのでしょうか?

    よろしく お願いします。

  • タイトル・説明文を埋め込むというのは、タイトル・説明文を画像化するのではなく、もともとある文字を表示させるということでしょうか?

    上記の 『タイトル、説明文を残す場合』 のみ行っていただけますか


    もし、マニュアルをご利用でしたら、サポートルームにてご質問をお願いいたします。

    よろしくお願いいたします

  • カウンセラーRie

    カスタマイズしたヘッダー画像をアップロードできないのですが、何故でしょうか?画像の形式は問題ないと思いますし、ここでは画像の容量は関係ないと思うのですが、できませんでした。

  • naito

    >カウンセラーRieさん

    画像の容量は関係あります。

    gif、jpg、pngのみ、1MBまでアップロード可能です

    アメブロは、エラーが良く出ますので、何度か試したり、ブラウザを変えて試してみてください

    よろしくお願いします

  • 初めまして。
    ↓これは、フリースペースに貼ればいいですか?
    .skinHeaderArea {
    background:url(http://stat.blogskin.ameba.jp/blogskin_images/20170202/07/a0/VN/j/t01100034cocoa51151485989767336.jpg) 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;
    }

  • 何度もすみません。
    へッダーがおかしな事になってしまいました。
    解決策を教えてください。

  • 内藤 勲

    本来は、「CSS編集用デザイン」に使うCSSになります。
    また、現在のアメブロでは、CSS編集用デザインでも、プロフィール画像が丸ではなく四角になるCSS編集用デザインに対応しています。

    今お使いのデザインで行うならば、フリースペースに

    <style>.skinHeaderArea {background:url(http://stat.blogskin.ameba.jp/blogskin_images/20170202/07/a0/VN/j/t01100034cocoa51151485989767336.jpg) 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;}</style>

    を入れてみてください

  • CSSデザインに変更して、出来ました。
    ありがとうございます。

コメントを残す