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

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

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

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

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

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

ヘッダー画像を準備する

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

方法は、

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

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

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

なお、アメブロにアップロードできる画像形式は「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%」のようにパーセント(%)で指定することも可能です。

まとめ

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

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

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