アメブロにヘッダー画像を表示するカスタマイズ方法
アメブロにヘッダー画像を表示するカスタマイズ方法です。
ヘッダー画像はブログの看板。
オリジナルのヘッダー画像を作ってブログに表示すると、ブログの雰囲気を一気に変えることができますし、何を伝えたいブログなのかが一瞬で伝わりますよね。
そこで、当記事では、このようなヘッダー画像をアメブロに表示するカスタマイズ方法をご紹介したいと思います。
アメブロにヘッダー画像を表示する
それでは、アメブロにヘッダー画像を表示するまでの手順を以下にご説明します。
ヘッダー画像を準備する
まず、アメブロに表示するヘッダー画像を準備しましょう。
方法は、
- 有料・無料で配布されている既成のヘッダー画像を流用する
- 画像編集ソフトや画像編集サイトを使って自作する
- プロに依頼して作成してもらう
などがありますが、お好みやご予算に応じて決定されることになるかと思います。
(ヘッダー画像が、素材も含めて完全なオリジナルでない場合は、著作権や肖像権などの権利の有無をしっかり確認しておくことも重要です。これらの権利の侵害で損害賠償を請求されるなどということにならないよう、十分にご注意下さい)
なお、アメブロにアップロードできる画像形式は「jpg」「png」「gif」のみですので、作成される場合は、これらの画像形式の何れかで作成するようご注意下さい。
写真が大きめに入る場合は「jpg」、文字やイラストの面積が大きい場合は「png」にするのがお勧めです。
また、ヘッダー画像の横幅や高さは自由ですが、アメブロカスタマイズのベースデザインとなるCSS編集用デザインのコンテンツ領域の横幅に合わせる場合は、横幅＝1120ピクセルにするとピッタリ納まります。
ヘッダー画像を画像フォルダにアップロードしてURLを取得する
ヘッダー画像の用意ができたら、次は、それをアメブロに表示できるよう画像フォルダにアップロードして、アップロードした画像のURLを取得しましょう。
画像のアップロードと画像のURLの取得方法についてはこちらの記事を参考にしてください。
取得した画像のURLは、このあとで使いますので、メモ帳などに貼り付けておきます。
アップロードしたヘッダー画像をアメブロに表示する
ヘッダー画像を画像フォルダにアップロードして、その画像のURLを取得できたら、そのURLを使ってアメブロにヘッダー画像を表示しましょう。
今回は、最も標準的と思われるコード例を一つご紹介します。
ブログデザインCSSを編集してアメブロのカスタマイズをする方法になりますので、やり方がわからない場合は先に手順をマスターしておいて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* ヘッダー画像を設定する */ .skin-bgHeader { background: no-repeat scroll center top; background-image: url(【ヘッダー画像のURL】); } /* ヘッダーの高さを設定する */ .skin-bgHeader a { height: 400px; } /* ブログタイトルと説明文を非表示にする */ .skin-headerTitle { display: none; } |
→2018/02/15追記：アメブロの方で仕様変更があったので、それに合わせてCSSを修正しました。
→2017/07/12追記：CSSを、変更が心配されるアメブロの独自属性「data-uranus-?」等を使わないコードに修正しました。ただし、HTML構造の変更やユーザーが触れないCSSの変更もありますので、その影響が出る可能性もあります。
このコードを使って、以下の手順でアメブロのブログデザインCSSを編集してみましょう。
- 上記コードをコピー
- ブログデザインCSSを開いて末尾に貼り付ける
- 「【ヘッダー画像のURL】」の部分を、上で取得した画像のURLに変更する
- ヘッダー画像の高さ(「400px」の部分)を、表示したいヘッダー画像の高さに変更する
- 表示を確認する(プレビュー)
- 編集内容を保存する
- ブログを開いて確認する
ヘッダー画像が表示されたでしょうか？
もし、ブログを開いてもヘッダー画像が表示されない場合、または変更されていない場合は、「Ctrl+F5」や「Command+R」で最新の状態を読み込んでみて下さい。
文字を消したくない場合は
なお、今回ご紹介したコードは、文字も画像に書かれていることを想定してありますので、初期状態で表示される「ブログタイトル」と「説明文」が非表示になります。
もし、これらをそのまま残したい場合は、コード中の「/* ブログタイトルと説明文を非表示にする */」から下を削除すればOKです。
ヘッダー画像の背景色を指定したい場合は
また、ヘッダー画像の背景色も指定できます。
背景色は、ヘッダー画像の透過部分、ヘッダー画像両側の余白部分、ヘッダー画像上下の余白部分(設定したヘッダーの高さより画像の高さが低い場合)などが塗りつぶされる色です。
例えば、以下の画像で、赤枠で囲った部分が「背景色」として薄いグレーで塗りつぶされています。
このように背景色も指定したい場合は、以下のようなコードも追加しましょう。
|
1 2 3 4 5 6 |
/* ヘッダーの背景色を指定する */ .skin-bgHeader { background-color: 【背景色】; } |
「【背景色】」に設定する値は、Webの色コードで、こちらのサイト様などが参考になると思います。
ヘッダー画像の横幅が標準とは異なる場合は
また、ヘッダー画像の横幅が(第二世代の)CSS編集用デザインの標準である1120ピクセルと異なる場合は、トップページへのリンクとなる範囲が、ヘッダー画像の幅と合わなくなってしまいます。
その場合、以下のようにヘッダー画像の横幅を指定することで、トップページへのリンクの範囲をヘッダー画像の横幅に合わせることができます。
|
1 2 3 4 5 6 |
/* ヘッダーの横幅を指定する */ .skin-bgHeader>div { width: 【ヘッダーの横幅】; } |
→2017/07/15追記：CSSを、変更が心配されるアメブロの独自属性「data-uranus-?」等を使わないコードに修正しました。ただし、HTML構造の変更やユーザーが触れないCSSの変更もありますので、その影響が出る可能性もあります。
「【ヘッダー画像の横幅】」は、通常は、トップページへのリンクに設定したい幅をピクセル(px)数で設定すると良いでしょう。
もし、例えば常に画面幅いっぱいまでトップページへのリンクの範囲を広げたい場合などは、固定のピクセル数ではなく、「100%」のようにパーセント(%)で指定することも可能です。
まとめ
以上、アメブロにヘッダー画像を表示するカスタマイズ方法をご紹介しました。
ひと目でブログの内容が伝わりやすいヘッダー画像の表示は、読者獲得の手段としても非常に効果的な方法の一つだと思いますので、ぜひチャレンジしてみてくださいね。
関連記事
“アメブロにヘッダー画像を表示するカスタマイズ方法” に対して 29 件のコメントがあります
コメントを残す
ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。
ヘッダーとメニュバー、無事できました！
松本さんの丁寧な説明、本当に感謝です。
ありがとうございました。
私のブログで松本さんのブログ、オススメさせて
戴きました。
Teacher Marketerさん
コメントありがとうございます。
当サイトの記事がカスタマイズのお役に立てて良かったです^^
ご紹介もありがとうございます(_ _)
松本さま
アメブロ早速見させて頂きましたが
おっしゃっている .skin-bgHeader a { は
元よりこちらのコピー元にあるものですので、
CSSではそのようになっており、
前はーとある .skin-bgHeader a[href*=”//ameblo.jp/”] {
は使っておりません。。
申し訳ないですが、よくわかりません。。
マダムノンノンさま
返信ありがとうございます。
今日の午前中まで「.skin-bgHeader a[href*=”//ameblo.jp/”] {」で公開していましたので、既に「.skin-bgHeader a {」になっているのでしたら、既に修正後のCSSをご利用ということで、昨日まで出ていた画像が出なくなったというのとは症状が違うようですね。
おそらくCSSの書き間違いとか、画像URLの記述ミスか何かだと思いますので、再度しっかりとご確認になってみて下さい。
もし、個別対応が必要でしたら、有料になりますが承りますのでお問い合わせからご連絡下さいませ。
よろしくお願いいたします。
松本さま
返信ありがとうございます。
とても不思議なことに治りました。
仰って下さったように同じことを繰り返してみた
だけなのですが。
きっと何かわたくしに抜けがあったのだと思います。
お騒がせ致してすみません。
ありがとうございました。
マダムノンノンさま
返信ありがとうございます。
無事に解決したようで良かったです。
松本さま
何度もやり直しをしたつもりでしたが
これが最後とやり直しをしたところ
画像が反映されました！
とても不思議ですが、きっと何かが足りなかった
のだと思います。
いつもありがとうございます。
マダムノンノンさま
返信ありがとうございます。
そうですね。
何か見逃しがあったんだろうと思いますが、解決できて良かったです。
松本さま
表示されました！
とても嬉しいです。
心よりお礼申し上げます。
本当にありがとうございました。m(__)m
マダムノンノンさま
よかったです。
ご報告頂きありがとうございました。
松本さま
こんにちは。
度々恐縮なのですが、昨日まであったヘッダー画像が
また出なくなりました。
かれこれ半年ぶりですけれど、
どのように対処すればよろしいのか
教えて頂けますでしょうか。
よろしくお願いします。
マダムノンノンさま
コメントありがとうございます。
アメブロの方で書かせてもらっていますのでご参照下さい。
https://ameblo.jp/wazameba/entry-12353004369.html
松本さま
早急なご対応ありがとうございます。
余りにも寂しいブログになってしまったので
少しテンプレートで遊んでおりました。
申し訳ありません。
今ほど同様にコードを入れさせていただきましたが
やはり反映はされないようです。
度々恐縮ではございますがよろしくおねがいします。
マダムノンノンさま
確認しました。
見た目ではわかりませんが、どうやらコードを持って行かれて貼り付けるまでの何処かの手順で「文字化け」が起きてしまったようです。
先頭に２文字分の空白文字が入っている行が４行ありますが、これらの行の先頭の空白文字がどれも異常な文字になっています。
ですので、それら行の先頭の空白文字を全て削除してみて下さい。
松本さま
初めまして。
暫く前からスライドショーのヘッダーが表示されなくなりました。
1年以上も前にあちこち覗いてなんとか設定したもので以来全く触れてはおりません。
こちらにたどり着きご指示通りにしようとしましたが何故かCSS内にそも「amb-layout」が
見当たりませんでした。。
すっかり落胆してデザイン変更でCSS編集のタイルに変え、
1120ｘ400の画像をアップロードし上記コードをコピーさせて頂きましたが
表示されません。
何がいけないのでしょう。
教えて頂けますでしょうか。
それから、プラグインは何か関係がありますでしょうか？
スライドショーにする時にコピペした記憶がありましたので
全て消ししまいました。
どうぞよろしくお願いします。
マダムノンノンさま
コメントありがとうございます。
スライドショーが表示されなくなったのは、アメブロのプラグインの仕様変更のせいではないかと思います。
ヘッダー画像の表示にプラグインは関係ありませんが、拝見したところ、CSS編集用デザインになっていないようです。
当ブログの方法は、新タイプのCSS編集用デザインが前提となっていますので、よろしくお願い致します。
お世話になってます。
お尋ねします。
アメブロの、一つのアカウントのブログにはしっかりこちらのコードを書いてヘッダーが表示されたのですが、
こちらに記入した方のブログでは、なぜかヘッダーも背景も表示されません。
同じCSSを記入していますが、なぜでしょうか。。
お返事くださると助かります。
よろしくお願いします。
くまさん
こんにちは。
CSS編集用デザインが旧タイプだからだと思います。
CSS編集用デザインの新タイプ・旧タイプについては↓こちらをご参照下さい。
https://ameblo-customize.com/four-css-edit-designs/
ご返答ありがとうございます(>___<)
hinako さま
おはようございます。
早速お返事下さり、ありがとうございます。
【Ctrl＋F5】 初めて知りました。
今やってみたら、すぐに表示されました！
ホームページ作成やブログ編集は独学でやってますので、すごく基本的な情報を知らないままのことも多々ありまして、このようにホームページ上で質問に答えていただけるなんて、とても心強いです。
最初の疑問、星野桜さんへの回答も含め（これは、matsumotoさま回答ですが）、大変助かりました。
本当にありがとうございました♪♪♪
needle.C
はじめまして。
アメブロデザインには、CSSデザイン編集用を使っています。
1週間ほど前に、（自分では何の変更もしていないのに）ヘッダー画像が表示されていないことに気付きました。
あれこれ検索して、このページのコメント欄に辿り着き、星野桜さんの質問が同じ内容だったので、それへの回答【CSS内の「amb-layout」となっている箇所を「data-uranus-layout」に変更すると表示されると思います。】
を試したところ、編集中のプレビューでは表示されますが、なかなかブログに反映されません。
いつも、ブラウザは Google Chromeを使うのですが、参考のため、Internet Explorer , Safari で見たら、そちらでは表示されていたので、Google Chromeも待っていたら反映されるかな、と様子見しました。
ですが、数日経っても、Google Chrome でアクセスする時は表示されないのです。
（ちなみに、ブログを編集する際のブラウザは、Google Chrome を使っています。）
何が原因か、考えられることを教えていただけないでしょうか？
よろしくお願いいたします。
needle.C
needle.Cさんこんばんは。
コメントありがとうございます。
CSSのキャッシュ(古い情報)がPCに残っているのだと思いますので、キーボードのCtrl+F5を押すなどして完全リフレッシュしてみて下さい。
こんにちは。非常に参考になりました。
今回私は、ヘッダーサイズを1120×750で作りました。
ヘッダーの縦幅のサイズを何回750に変えても反映されません。原因は何でしょうか？
実際のブログを拝見してみないことにははっきりと申し上げられませんが、恐らくCSSの間違いか、ブラウザキャッシュが残っているだけかのどちらかではないでしょうか。
いつもお世話になり、ありがとうございます。
今朝、アメブロを見てみたら、カスタマイズも何もしていないのに、
ヘッダー画像が非表示になっていて、メニューも定位置ではなくなっていました。
いきなりだったので、何が起きたのかわかりません。
どうしたらいいのかアドバイスをいただけないでしょうか。
よろしくお願いいたします。
xpoi
星野桜さん
コメントありがとうございます。
昨日、アメブロで仕様変更がありました。
CSS内の「amb-layout」となっている箇所を「data-uranus-layout」に変更すると表示されると思います。
なお、当記事のCSSは既に対応済みとなっていますので、こちらを利用なさって再設定されても構いません。
どうぞご参考になさって下さい。
Matsmotoさま
早速の返信とアドバイスを、ありがとうございます！！
今、実施しました。
おかげさまで、メニューの位置やレイアウトのズレは解消しました。
あとは、ヘッダー画像が戻ることで問題が解消できます。
まだ表示されません。
3回ほどチェックし直したのですが、もう一度見直します。
だめな時は、明日にでもこちらを利用させていただこうと思います。
ありがとうございました。
XPOI
Matsmoto さま
ありがとうございました。
残っていた2箇所も変更し、無事に、ヘッダー画像も表示できました。
スッキリし、安心しました。
心から感謝を！
XPOI
星野桜さま
ご報告ありがとうございました。
うまく行ったようでよかったです。