アメブロにヘッダー画像を表示するカスタマイズ方法

アメブロにヘッダー画像を表示するカスタマイズ方法です。

新タイプ(第二世代)のCSS編集用デザインに対応しています。

ヘッダー画像はブログの看板。

オリジナルのヘッダー画像を作ってブログに表示すると、ブログの雰囲気を一気に変えることができますし、何を伝えたいブログなのかが一瞬で伝わりますよね。

そこで、当記事では、このようなヘッダー画像をアメブロに表示するカスタマイズ方法をご紹介したいと思います。

アメブロにヘッダー画像を表示する

それでは、アメブロにヘッダー画像を表示するまでの手順を以下にご説明します。

ヘッダー画像を準備する

まず、アメブロに表示するヘッダー画像を準備しましょう。

方法は、

  • 有料・無料で配布されている既成のヘッダー画像を流用する
  • 画像編集ソフトや画像編集サイトを使って自作する
  • プロに依頼して作成してもらう

などがありますが、お好みやご予算に応じて決定されることになるかと思います。

(ヘッダー画像が、素材も含めて完全なオリジナルでない場合は、著作権や肖像権などの権利の有無をしっかり確認しておくことも重要です。これらの権利の侵害で損害賠償を請求されるなどということにならないよう、十分にご注意下さい)

なお、アメブロにアップロードできる画像形式は「jpg」「png」「gif」のみですので、作成される場合は、これらの画像形式の何れかで作成するようご注意下さい。

写真が大きめに入る場合は「jpg」、文字やイラストの面積が大きい場合は「png」にするのがお勧めです。

また、ヘッダー画像の横幅や高さは自由ですが、アメブロカスタマイズのベースデザインとなるCSS編集用デザインのコンテンツ領域の横幅に合わせる場合は、横幅=1120ピクセルにするとピッタリ納まります。

ヘッダー画像を画像フォルダにアップロードしてURLを取得する

ヘッダー画像の用意ができたら、次は、それをアメブロに表示できるよう画像フォルダにアップロードして、アップロードした画像のURLを取得しましょう。

画像のアップロードと画像のURLの取得方法についてはこちらの記事を参考にしてください。

取得した画像のURLは、このあとで使いますので、メモ帳などに貼り付けておきます。

アップロードしたヘッダー画像をアメブロに表示する

ヘッダー画像を画像フォルダにアップロードして、その画像のURLを取得できたら、そのURLを使ってアメブロにヘッダー画像を表示しましょう。

今回は、最も標準的と思われるコード例を一つご紹介します。

ブログデザインCSSを編集してアメブロのカスタマイズをする方法になりますので、やり方がわからない場合は先に手順をマスターしておいて下さい。

→2017/07/12追記:CSSを、変更が心配されるアメブロの独自属性「data-uranus-?」等を使わないコードに修正しました。ただし、HTML構造の変更やユーザーが触れないCSSの変更もありますので、その影響が出る可能性もあります。

このコードを使って、以下の手順でアメブロのブログデザインCSSを編集してみましょう。

  1. 上記コードをコピー
  2. ブログデザインCSSを開いて末尾に貼り付ける
  3. 「【ヘッダー画像のURL】」の部分を、上で取得した画像のURLに変更する
  4. ヘッダー画像の高さ(「400px」の部分)を、表示したいヘッダー画像の高さに変更する
  5. 表示を確認する(プレビュー)
  6. 編集内容を保存する
  7. ブログを開いて確認する

ヘッダー画像が表示されたでしょうか?

もし、ブログを開いてもヘッダー画像が表示されない場合、または変更されていない場合は、「Ctrl+F5」や「Command+R」で最新の状態を読み込んでみて下さい。

文字を消したくない場合は

なお、今回ご紹介したコードは、文字も画像に書かれていることを想定してありますので、初期状態で表示される「ブログタイトル」と「説明文」が非表示になります。

もし、これらをそのまま残したい場合は、コード中の「/* ブログタイトルと説明文を非表示にする */」から下を削除すればOKです。

ヘッダー画像の背景色を指定したい場合は

また、ヘッダー画像の背景色も指定できます。

背景色は、ヘッダー画像の透過部分、ヘッダー画像両側の余白部分、ヘッダー画像上下の余白部分(設定したヘッダーの高さより画像の高さが低い場合)などが塗りつぶされる色です。

例えば、以下の画像で、赤枠で囲った部分が「背景色」として薄いグレーで塗りつぶされています。

このように背景色も指定したい場合は、以下のようなコードも追加しましょう。

「【背景色】」に設定する値は、Webの色コードで、こちらのサイト様などが参考になると思います。

ヘッダー画像の横幅が標準とは異なる場合は

また、ヘッダー画像の横幅が(第二世代の)CSS編集用デザインの標準である1120ピクセルと異なる場合は、トップページへのリンクとなる範囲が、ヘッダー画像の幅と合わなくなってしまいます。

その場合、以下のようにヘッダー画像の横幅を指定することで、トップページへのリンクの範囲をヘッダー画像の横幅に合わせることができます。

→2017/07/15追記:CSSを、変更が心配されるアメブロの独自属性「data-uranus-?」等を使わないコードに修正しました。ただし、HTML構造の変更やユーザーが触れないCSSの変更もありますので、その影響が出る可能性もあります。

「【ヘッダー画像の横幅】」は、通常は、トップページへのリンクに設定したい幅をピクセル(px)数で設定すると良いでしょう。

もし、例えば常に画面幅いっぱいまでトップページへのリンクの範囲を広げたい場合などは、固定のピクセル数ではなく、「100%」のようにパーセント(%)で指定することも可能です。

まとめ

以上、アメブロにヘッダー画像を表示するカスタマイズ方法をご紹介しました。

ひと目でブログの内容が伝わりやすいヘッダー画像の表示は、読者獲得の手段としても非常に効果的な方法の一つだと思いますので、ぜひチャレンジしてみてくださいね。

よろしければフォローお願いします

アメブロにヘッダー画像を表示するカスタマイズ方法” に対して 13 件のコメントがあります

  1. くま より:

    お世話になってます。
    お尋ねします。
    アメブロの、一つのアカウントのブログにはしっかりこちらのコードを書いてヘッダーが表示されたのですが、
    こちらに記入した方のブログでは、なぜかヘッダーも背景も表示されません。
    同じCSSを記入していますが、なぜでしょうか。。
    お返事くださると助かります。
    よろしくお願いします。

    1. 松本 より:

      くまさん
      こんにちは。
      CSS編集用デザインが旧タイプだからだと思います。
      CSS編集用デザインの新タイプ・旧タイプについては↓こちらをご参照下さい。
      https://ameblo-customize.com/four-css-edit-designs/

    2. くま より:

      ご返答ありがとうございます(>___<)

  2. needle.C より:

    hinako さま

    おはようございます。
    早速お返事下さり、ありがとうございます。

    【Ctrl+F5】 初めて知りました。
    今やってみたら、すぐに表示されました!

    ホームページ作成やブログ編集は独学でやってますので、すごく基本的な情報を知らないままのことも多々ありまして、このようにホームページ上で質問に答えていただけるなんて、とても心強いです。

    最初の疑問、星野桜さんへの回答も含め(これは、matsumotoさま回答ですが)、大変助かりました。

    本当にありがとうございました♪♪♪

    needle.C

  3. needle.C より:

    はじめまして。

    アメブロデザインには、CSSデザイン編集用を使っています。
    1週間ほど前に、(自分では何の変更もしていないのに)ヘッダー画像が表示されていないことに気付きました。

    あれこれ検索して、このページのコメント欄に辿り着き、星野桜さんの質問が同じ内容だったので、それへの回答【CSS内の「amb-layout」となっている箇所を「data-uranus-layout」に変更すると表示されると思います。】
    を試したところ、編集中のプレビューでは表示されますが、なかなかブログに反映されません。
    いつも、ブラウザは Google Chromeを使うのですが、参考のため、Internet Explorer , Safari で見たら、そちらでは表示されていたので、Google Chromeも待っていたら反映されるかな、と様子見しました。
    ですが、数日経っても、Google Chrome でアクセスする時は表示されないのです。
    (ちなみに、ブログを編集する際のブラウザは、Google Chrome を使っています。)

    何が原因か、考えられることを教えていただけないでしょうか?
    よろしくお願いいたします。

    needle.C

    1. hinako より:

      needle.Cさんこんばんは。
      コメントありがとうございます。
      CSSのキャッシュ(古い情報)がPCに残っているのだと思いますので、キーボードのCtrl+F5を押すなどして完全リフレッシュしてみて下さい。

  4. pika より:

    こんにちは。非常に参考になりました。
    今回私は、ヘッダーサイズを1120×750で作りました。
    ヘッダーの縦幅のサイズを何回750に変えても反映されません。原因は何でしょうか?

    1. 松本 より:

      実際のブログを拝見してみないことにははっきりと申し上げられませんが、恐らくCSSの間違いか、ブラウザキャッシュが残っているだけかのどちらかではないでしょうか。

  5. 星野桜 より:

    いつもお世話になり、ありがとうございます。

    今朝、アメブロを見てみたら、カスタマイズも何もしていないのに、
    ヘッダー画像が非表示になっていて、メニューも定位置ではなくなっていました。

    いきなりだったので、何が起きたのかわかりません。

    どうしたらいいのかアドバイスをいただけないでしょうか。

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

    xpoi

    1. matsmoto より:

      星野桜さん
      コメントありがとうございます。
      昨日、アメブロで仕様変更がありました。
      CSS内の「amb-layout」となっている箇所を「data-uranus-layout」に変更すると表示されると思います。
      なお、当記事のCSSは既に対応済みとなっていますので、こちらを利用なさって再設定されても構いません。
      どうぞご参考になさって下さい。

    2. 星野桜 より:

      Matsmotoさま

      早速の返信とアドバイスを、ありがとうございます!!

      今、実施しました。
      おかげさまで、メニューの位置やレイアウトのズレは解消しました。

      あとは、ヘッダー画像が戻ることで問題が解消できます。
      まだ表示されません。

      3回ほどチェックし直したのですが、もう一度見直します。
      だめな時は、明日にでもこちらを利用させていただこうと思います。

      ありがとうございました。

      XPOI

    3. 星野桜 より:

      Matsmoto さま

      ありがとうございました。
      残っていた2箇所も変更し、無事に、ヘッダー画像も表示できました。

      スッキリし、安心しました。
      心から感謝を!

      XPOI

    4. 松本 より:

      星野桜さま
      ご報告ありがとうございました。
      うまく行ったようでよかったです。

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。