アメブロ ヘッダー設置完全マニュアル｜画像サイズ・CSSコピペ・スマホ対応まで解説

アメブロの第一印象を決めるヘッダー。しかし「推奨サイズがわからない」「スマホで崩れる」と悩む人は多いです。本記事では画像サイズ早見表とコピペ用CSSを用意し、PC・スマホ両対応を5分で実現する手順を徹底解説。Canvaでのデザイン作成、キャッシュ反映のコツ、季節更新でCTRを上げる運用術まで網羅するので、初心者でも読み終わる頃にはプロ仕様のヘッダーを即公開できます。

ヘッダー設置前の準備と最適画像サイズ

アメブロのヘッダーは「第一印象」「回遊率」「ブランディング」を同時に左右する重要パーツです。ところが多くのユーザーは *推奨サイズ* を確認せずに画像をアップし、表示がはみ出したりスマホで文字が切れたりして機会損失を招いています。まず押さえたい基準は《幅1,200px × 高さ300〜400px／ファイル容量300KB以下》。横幅1,200pxはPCの標準表示エリアをフルにカバーしつつ、Retinaディスプレイで粗く見えないギリギリのラインです。高さは300pxならコンテンツがファーストビューに入りやすく、サービス紹介など訴求要素を追加したい場合は400pxまで拡張するとバランスよく収まります。JPEGは写真系、PNGは透過ロゴ、WebPは軽量化の三択で作るとスマホ表示も高速です。以下のチェックリストで準備を整えましょう。

• 画像サイズ：1,200×300～400px
• 解像度：72dpi（Web標準）
• 形式：写真＝JPEG／ロゴ＝PNG／汎用＝WebP
• 容量：300KB以下（TinyPNG等で圧縮）
• 背景：白orブランドカラー＋余白左右30px

\

CSS編集用 vs 簡単カスタマイズの推奨サイズ比較

アメブロには〈CSS編集用デザイン〉と〈簡単カスタマイズ〉の２系統があり、テンプレートによって表示領域が異なります。代表テンプレートを実測して得た安全マージンを次表にまとめました。

**CSS編集用** はヘッダー領域を完全に上書きできるため、1,200×300pxのフル幅画像がもっとも美しく収まります。背景を画面横いっぱいに見せたいときは同サイズを採用しましょう。逆にコンテンツ幅980pxで中央寄せされるレイアウトや、簡単カスタマイズで余白が入るレイアウトでは幅960pxに落とし、高さも280〜320pxに抑えるとスマホの縦長スクロールを阻害しません。

【サイズ選択早見チャート】

1. テンプレが「CSS編集用」→幅1,200px
2. テンプレが「簡単カスタマイズ」→幅960px
3. 商品写真を横並びで見せたい→高さ320〜400px
4. ロゴ＋スローガンだけ→高さ280〜300px

\

Canvaで作るオリジナルヘッダー画像デザイン手順

デザインソフトがなくても、Canvaの無料プランで印象的なヘッダーを10分で作成できます。以下は幅1,200px × 高さ300pxのベーシック手順です。

1. Canvaホーム → 「カスタムサイズ」→幅1,200・高さ300を入力
2. 「背景」よりブランドカラーを設定（#HEXコードがベスト）
3. 左メニュー「テキスト」→見出しを追加しロゴ名を入力
4. サブ見出しにキャッチコピーを入れ、フォントはNoto Sans JPに統一
5. 「素材」→シェイプを選び、ロゴ横にアクセントラインを追加
6. 写真を入れたい場合は「アップロード」→ドラッグ配置→トリミング
7. 完成したら「ダウンロード」→ファイル形式WebP・画質80％で保存
8. Ameba管理画面→ヘッダー画像にアップ→プレビューで余白・文字切れ確認

• 【フォント】タイトル24pt・コピー16ptで視認性◎
• 【余白】左右30px・上下20pxを取るとスマホ縮小でも潰れない
• 【写真】人物1/3・空間2/3の構図にするとテキスト配置が楽

\

PC版アメブロでヘッダーを設置する具体的手順

PCブラウザでのヘッダー設定は「デザイン選択→画像アップ→表示確認→スマホ調整」の4ステップで完結します。まず管理画面上部メニュー〈デザインの変更〉をクリックし、現在使っているテンプレートを確認しましょう。**CSS編集用デザイン**を選ぶと、HTML／CSSを直接書き換えられるため表示領域をフルカスタムできます。一方、**簡単カスタマイズ**はUI操作のみで完了しますが、画像サイズが幅960pxに固定される点に注意が必要です。今回は拡張性の高いCSS編集用を前提に解説します。

• ①デザイン確認：〈ブログ管理〉▶〈デザインの変更〉▶テンプレート名をメモ
• ②画像準備：幅1,200×高さ300px／WebP／300KB以下
• ③コード挿入：ヘッダータグ内にHTML＋CSSを貼付
• ④プレビュー：PC・スマホで文字切れ／余白をチェック
• ⑤公開：問題がなければ〈保存〉▶〈公開〉で完了

\

—

CSS編集用デザインテンプレートの設定フロー

CSS編集用テンプレートはヘッダー領域が空の状態で提供されるため、HTMLブロックを追加し画像URLを直接指定する手順をとります。以下のフローは作業前後のチェックポイントを含めた完全版です。

1. テンプレート切替
    1) ブログ管理 ▶ デザインの変更 ▶ 「CSS編集用デザイン」を選択
    2) 既存カスタマイズがある場合、「HTMLを保持して変更」にチェックを入れ保存
2. HTML入力
    1) 画面右上〈HTMLの編集〉をクリック
    2) <header id="blogHeader">直下に下記コードを貼付

   <div class="custom-header">
     <img src="https://example.com/header.webp" alt="ブログヘッダー">
   </div>
   

3. CSS追加
    1) 同ページ下部〈CSSの編集〉にスクロール
    2) 末尾へ以下を追記

   .custom-header img{
     width:100%;
     height:auto;
     max-width:1200px;
     display:block;
     margin:0 auto;
   }
   @media screen and (max-width:767px){
    .custom-header img{height:auto;}
   }
   

4. プレビュー確認
    1) 右上〈プレビュー〉▶ 新規タブでチェック
    2) 画像が横幅いっぱいに表示され、縦横比が保たれているかを確認
5. 保存＆公開
    1) プレビューで問題なし→〈保存〉▶〈公開〉
    2) スマホでキャッシュクリア後に再読込し反映をチェック

\

<!-- ▼▼▼ カスタムヘッダー開始 ▼▼▼ -->
<div class="custom-header">
  <picture>
    <source srcset="https://example.com/header.webp" type="image/webp">
    <img src="https://example.com/header.jpg" alt="ブログヘッダー">
  </picture>
</div>
<!-- ▲▲▲ カスタムヘッダー終了 ▲▲▲ -->

/* === カスタムヘッダーCSS === */
.custom-header{
  width:100%;
  text-align:center;
  margin:0 auto;
}
.custom-header img{
  width:100%;
  max-width:1200px;
  height:auto;
  display:block;
}
@media (max-width:767px){
  .custom-header img{height:auto;}
}

スマホ表示対応＆キャッシュ反映トラブル解消法

PCでは問題なく表示されるヘッダーが、スマホでは「画像が縦に引き伸ばされる」「右端が切れてロゴが読めない」「更新したはずの画像が古いまま」といった不具合を起こすことがあります。原因は (1) メディアクエリ不足によるレイアウト崩れ (2) ブラウザやアプリ、CDNに残るキャッシュの二重三重の保持です。そこで本章では、追加CSSでスマホの見栄えを強制調整しつつ、キャッシュを最短でクリアする手順をセットで紹介します。これを覚えれば、ヘッダー変更から表示確認までをおよそ5分で完了できます。

\

スマホでもヘッダーを表示させる追加CSSカスタム

スマホ崩れの主因は「幅を固定値で指定」「高さを px で縛る」「ブレークポイントが狭すぎる」の3つです。PC用 CSS に次のスタイルを追加すれば、幅 320px の旧端末から 428px の最新機種まで自動でリサイズできます。

“`css
/* ▼スマホ自動リサイズ用メディアクエリ */
@media screen and (max-width:767px){
.custom-header img{
width:100vw; /* 画面幅にフィット */
max-width:100%; /* オーバーフロー防止 */
height:auto; /* 比率維持で縦伸び回避 */
object-fit:cover; /* 極端な縦長端末で黒帯防止 */
}
}
“`

• object-fit:cover を入れると縦長端末でも中央トリミングされ黒帯が出ません
• 折りたたみ式端末に備え、必要ならブレークポイントを 840px まで拡大
• 左右余白が欲しい場合は padding:0 20px を追加

\

キャッシュ削除と反映確認を5分で終わらせる方法

ヘッダー画像を差し替えたのに表示が更新されないときは、(a) ブラウザ (b) CDN (c) アメブロ公式アプリ の三層キャッシュが残っているケースがほとんどです。以下のステップを順に実行すれば、反映確認まで 5 分以内で終わります。

1. 画像ファイル名を変更
    header.webp → header_v2.webp のようにバージョンを付与して URL を変える
2. ブラウザキャッシュを削除
    Chrome は Ctrl+Shift+R（Mac は ⌘+Shift+R）のハードリロード
3. CDN キャッシュをパージ
    Cloudflare 使用時はダッシュボード → キャッシュ → 個別 URL パージで新旧両 URL を指定
4. アメブロ公式アプリのキャッシュ削除（Android）
    設定 → アプリ → Ameba → ストレージ → キャッシュを削除
    iOS はアプリ再インストールが最速
5. Search Console で URL 検査
    新 URL を「インデックス登録をリクエスト」して優先クロールを促進

\

設置後の運用Tipsとよくあるエラー対策

ヘッダーを一度設置して終わりにすると、季節感のないデザインやリンク切れ画像が放置され、離脱率・直帰率がじわじわ悪化します。運用段階で重要なのは「定期点検・デザイン更新・ABテスト」をルーティン化し、問題発生時に即復旧できる体制を整えることです。最小工数で効果を維持するには〈月1の点検スプレッドシート〉〈シーズン用ヘッダーを3か月前倒しで用意〉〈リカバリ用バックアップCSS〉の3セットを準備しておくと安心です。

\

まとめ

アメブロのヘッダーは「最適サイズ設定→CSS貼付→スマホ追加CSS→キャッシュ確認」の4ステップで失敗なく設置できます。画像は幅1,200px、高さ300〜400pxを基準に作成し、URLやOGPも同時に統一すればブランド感が向上。設置後は季節ごとのビジュアル更新とABテストでCTRを継続改善し、集客効果を最大化しましょう。