こんにちは、「Amebaブログ for ビジネス運営局」の照屋です！
今回の記事では、アメブロのヘッダー画像の設定方法や、よくご質問にいただく最適なサイズについて詳しく解説していきます。
ヘッダー画像は、ブログの個性や発信する内容のテーマを表現する重要な要素であり、読者の方に印象を与えることができます！
ぜひ、この記事を参考に、皆様のアメブロのヘッダー画像設定のお役に立てれば幸いです！
アメブロにおけるヘッダー画像とは？
アメブロのヘッダー画像は、ブログトップページの上部に表示される画像のことで、ブログの個性やブログの発信内容のテーマを表現する役割を果たしています
読者の方にブログの印象を与えるためにも、ヘッダー画像は大切な要素です。
※ヘッダー画像のカスタマイズはパソコン版のみ適用されます
※オフィシャルブロガーのみスマートフォン版、Amebaアプリでもヘッダー画像が表示されます
アメブロでヘッダー画像を設定するメリット
アメブロでヘッダー画像を設定するメリットとしては、独自の世界観を作りやすく、ブログへの印象が残りやすいということです。
ヘッダー画像を設定することで、ブログに独自の世界観を作り出すことができます。
これにより、読者の方があなたのブログを他のブログと区別しやすくなり、記憶に残りやすくなります。
ヘッダー画像は、ブログの顔とも言える部分です！
魅力的なヘッダー画像を設定することで、読者の方に強い印象を与え、再訪問やフォローを促すことが期待できるでしょう。
アメブロのヘッダー画像のサイズは使用するブログデザインによって異なる
アメーバブログでは、使用するブログデザインによって、ヘッダー画像の推奨サイズが異なります。
適切なサイズのヘッダー画像を設定することで、ブログの見た目が整い、読者の方にも好印象を与えることができます
ヘッダー画像を設定できるブログデザインは、「カスタム可能」デザインのみとなっております。
また、「カスタム可能」デザインは大きく分けて、以下の2つに分類できます。
- CSS（文字の色や大きさ、背景、配置など見た目を設定する言語）を用いて編集できるデザイン
- 簡単カスタマイズが可能なデザイン
これらのブログデザインによって、推奨されるヘッダー画像のサイズが異なるので、それぞれ詳しくご紹介します。
CSS編集用デザインの場合は幅は最大「幅1120px、高さ400px」が推奨
CSS編集用デザインを使用している場合、ヘッダー画像のサイズは最大「幅1120px、高さ400px」が推奨となっております。
このサイズに合わせた画像を用意することで、ブログのデザインがより魅了的に表示されるようになります。
簡単カスタマイズ用のデザインの場合は「幅980px、最大高さ300px」が推奨
簡単カスタマイズ用のブログデザインのヘッダーは「幅980px、高さ0～300px」となっております。
つまり、簡単カスタマイズ用デザインを使用している場合、ヘッダー画像のサイズは「幅980px、最大高さ300px」が適切です。
このサイズに合わせて画像を作成することで、読者の方に適切な印象を与えることができます。
アメブロのヘッダー画像を設定する方法
では実際に、アメブロでヘッダー画像を設定する方法をご紹介します。
以下の手順に沿って行うことで、適切にヘッダー画像を設定することができます。
- ヘッダー画像に対応可能なブログデザインに変更する
- ヘッダー画像のサイズを適切なものを用意する
- CSS編集用デザインの場合｜CSSで編集を行う
- 簡単カスタマイズ用のデザインの場合｜画像をアップロードする
これらの手順について詳しく解説をします。
スタンダードプランなら動画を見ながら、ヘッダー画像の設定ができます
ブログやビジネスの成長を後押しする300本以上の動画が見放題の「スタンダードプラン」なら、ヘッダー画像の作り方〜設定の方法まで、動画を見ながら実践することができます！
Ameba運営と、認定講師があなたのブログやビジネスを成長させる実践的なスキルを、いつでも、どこでも自分のペースで学べます。
30日間はお試し無料で、30日以内の解約で料金はかかりません
①ヘッダー画像に対応可能なブログデザインに変更する
まず初めに、ヘッダー画像に対応可能なブログデザインに変更する必要があります。
「ブログ管理」→「デザインの設定」→「カスタム可能」と進みます。
前述したように、「CSS編集用デザイン」「簡単カスタマイズ可能なデザイン」があるので、設定したいブログデザインを適用させます。
ブログデザインについての詳しい内容は下記の記事をご覧ください。
②ヘッダー画像のサイズを適切なものを用意する
次に、適切なサイズのヘッダー画像を用意しましょう。
画像編集ツールとして、Canva（キャンバ）がおすすめです。
Canvaを使うことで、簡単に素敵なヘッダー画像を作成することができます。
Canvaの公式サイトにて、アメブロのヘッダーの作り方が解説されていますので、参考にしてみてはいかがでしょうか。
https://www.canva.com/ja_jp/learn/ameblo_header/
ヘッダー画像を作成する際は、前述したように推奨サイズで作成するようにしましょう。
③CSS編集用デザインの場合｜CSSで編集を行う
CSS編集用のブログデザインを使用されている場合の、ヘッダー画像の設定方法をご紹介します。
「デザインの設定」から、CSSの編集をクリックします。
次に、「ファイルを選択」をクリックし、使用した画像をアップロードしてください。
すると以下のような画面になり「この画像のパス」が表示されます。
「この画像のパス」は後ほど使用します。
次に、以下のCSSを以下の画像の場所に追加します。
background: no-repeat center top;
background-image: url(この画像のパスを記載する);
それぞれのコードの意味は以下の通りです。
- background-image: url(この画像のパスを記載する);
- ヘッダー画像を表示させるコード
- background: no-repeat center top;
no-repeat: 背景画像が繰り返し表示されないように指定しています。つまり、画像は1回だけ表示されます。center top: 背景画像の位置を指定しています。centerは横方向の中央に、topは縦方向の上端に画像を配置します。
※その他にもCSSの書き方はございますので、ご自身で最適なものを追加してください
※CSSのカスタマイズ状況によっては、うまく表示されない場合がございます
次に、以下のCSSを以下の画像の場所に追加します。
.skin-bgHeader a {
height: ○○px;
width: ○○px;
}
それぞれのコードの意味は以下の通りです。
- height: ○○px;
- ヘッダー画像の高さを調整するコード
- width: ○○px;
- ヘッダー画像の横幅を調整するコード
※その他にもCSSの書き方はございますので、ご自身で最適なものを追加してください
※CSSのカスタマイズ状況によっては、うまく表示されない場合がございます
次に、以下のCSSを以下の画像の場所に追加します。
display: none;
コードの意味は以下の通りです。
- display: none;
- ブログタイトル・説明文を非表示にするコード
※その他にもCSSの書き方はございますので、ご自身で最適なものを追加してください
※CSSのカスタマイズ状況によっては、うまく表示されない場合がございます
このように、適切なサイズのヘッダー画像を用意し、対応可能なブログデザインに変更し、CSSで編集を行うことで、アメブロのヘッダー画像を設定することができます。
ヘッダー画像を設定することで、ブログの個性を表現し、読者に印象を与えることができます。
④簡単カスタマイズ用のデザインの場合｜画像をアップロードする
簡単カスタマイズ用のブログデザインを使用されている場合の、ヘッダー画像の設定方法をご紹介します。
「デザインの設定」から、カスタマイズをクリックします。
ヘッダーの「オリジナル画像を使う」をクリックし、使用する画像をアップロードします。
画像の配置を調整したり、ヘッダーの高さを調整し、自分好みにカスタマイズしてみてください。
スタンダードプランなら動画を見ながら、ヘッダー画像の設定ができます
ブログやビジネスの成長を後押しする300本以上の動画が見放題の「スタンダードプラン」なら、ヘッダー画像の作り方〜設定の方法まで、動画を見ながら実践することができます！
Ameba運営と、認定講師があなたのブログやビジネスを成長させる実践的なスキルを、いつでも、どこでも自分のペースで学べます。
30日間はお試し無料で、30日以内の解約で料金はかかりません
最後に
ヘッダー画像は、ブログの印象を大きく変える要素の一つです。
ぜひこの記事を参考に、あなたらしいヘッダー画像を設定してみてはいかがでしょうか。
今後とも「Amebaブログ for ビジネス」をよろしくお願いします。