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

  • アメブロ
  • このエントリーをはてなブックマークに追加

当記事は他サイトへ移動しました。最新情報は以下のリンク先ページをご覧ください。
アメブロにヘッダー画像を表示するカスタマイズ方法


アメブロをカスタマイズして、わかりやすいヘッダー画像を設置・表示すると、ブログの雰囲気を一気に変えることができて、何のためのブログなのかがとても伝わりやすくなります。

特に仕事に役立てようという場合は、いかに適切に仕事の内容が伝わるかはとても重要だと考えられますので、そういった意味でも、ヘッダー画像を表示することはとても有用なアピール手段の一つだと思います。

そこで、当記事では、CSS編集用デザインを適用したアメブロにヘッダー画像を表示するカスタマイズ方法をご紹介します。

アメブロにわかりやすいヘッダー画像を設置・表示すると、一気にブログの雰囲気を変えることができて、何のブログなのかが伝わりやすくなる

設置・表示したいヘッダー画像を用意する

まずは、アメブロに設置するヘッダー画像を用意する必要があります。

作成は、

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

などの方法が考えられますが、お好みやご予算に応じて決定されることになるかと思います。

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

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

また、ヘッダー画像の横幅や高さは自由ですが、横幅は、一般的にはブログの横幅に合わせると収まりが良いでしょう。

ちなみに、カスタマイズのベースとなるCSS編集用デザインではブログの横幅は1120ピクセルに設定されています。

用意したヘッダー画像をアップロードしてURLを取得する

ヘッダー画像の用意ができたら、次は、それをカスタマイズで使えるようにアメブロにアップロードをしましょう。

通常、ヘッダー画像はブログデザインヘッダ・背景用画像というアップロード先へアップロードします。

アップロードできたら画像のURLを取得しましょう。

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

ヘッダー画像をアメブロに設置する

ヘッダー画像のURLの取得ができたら、そのURLを使ってアメブロにヘッダー画像を表示します。

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

まず、典型的なコードとして、以下のようなコードを紹介します。

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center;
  background-color: 【背景色】;
  background-image: url(【ヘッダー画像のURL】);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [amb-layout="headerInner"] {
  width: 【ヘッダーの横幅】;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a {
  height: 【ヘッダーの高さ】;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}

このコードをブログデザインCSSの末尾に追加して、【背景色】【ヘッダー画像のURL】【ヘッダーの高さ】【ヘッダーの横幅】を適切に設定すれば、大抵の場合はヘッダー画像をうまく表示できると思います。

【背景色】

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

例えば、↓こちらの例では、赤枠で囲った部分が【背景色】で塗りつぶされています。

設定する値は、Webの色コードです(こちらのサイトが参考になると思います)。

CSS編集用デザインの初期値が白(#FFFFFF)になっていますので、そのままで良い場合は、この行ごと削除しても構いません。

【ヘッダー画像のURL】

【ヘッダー画像のURL】には、上で取得したヘッダー画像として表示したい画像のURLを設定します。

当記事のカスタマイズのメインとなるものですね。

↓こちらの例で、赤枠で囲った部分です。

設定する値は、「http://」で始まり「.jpg」「.png」「.gif」の何れかで終わっているはずです。

もしそうなっていない場合は、ヘッダー画像のURL取得のしかたが間違っていますので、確認しなおして下さい。

【ヘッダーの横幅】

【ヘッダーの横幅】には、ヘッダーのトップページへリンクする領域(クリックするとブログのトップページへジャンプするように設定する領域)の横幅を指定してください。

通常は「1200px」のように、px(ピクセル)で表示します。

これも、ヘッダー画像の横幅と同じに設定することが多いと思います。

なお、CSS編集用デザインの初期値が「1120px」になっていますので、それと同じで良い場合は、この行ごと削除しても構いません。

【ヘッダーの高さ】

【ヘッダーの高さ】には、ヘッダーのトップページへリンクする領域(クリックするとブログのトップページへジャンプするように設定する領域)の高さを指定してください。

例えば、↓こちらの例で、矢印で示した部分です。

通常は「400px」のように、px(ピクセル)で表示します。

たいてい、ヘッダー画像の高さと同じ値を設定することになると思いますが、例えば大きめに設定してヘッダー画像の上下に上記【背景色】で塗りつぶされた余白を作ることも可能です。

ブログタイトルと説明文について

上記のコードでは、ブログタイトルとブログ説明文を非表示にするようになっています。

ヘッダー画像が、アメブロのタイトルや説明の文字を入れたデザインになっている場合はこれでよいと思います。

ですが、もしブログタイトルや説明文を表示しておきたい場合は、「/* ブログタイトルと説明文を非表示にする */」から下を削除して下さい。

コード例

以上を踏まえて、アメブロにヘッダー画像を表示するカスタマイズのCSSコード例を一つ書いておきます(但し、ヘッダー画像のURLは架空のものです)

もしよろしければ、コード作成時の参考にして下さい。

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
  background: no-repeat scroll center;
  background-color: #FFFFFF;
  background-image: url(http://・・・・・.jpg);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [amb-layout="headerInner"] {
  width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a {
  height: 300px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
  display: none;
}

表示を確認する

ブログデザインCSSを編集してコードを保存できたら、一度アメブロを表示して、うまくヘッダー画像が表示されるかどうか確認をしておきましょう。

確認時は、キーボードのF5キー(Windowsの場合。MacはCommand + R)を押すなどして、最新の状態を読み込んでから行うと確実です。

まとめ

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

わかりやすいヘッダー画像は、ブログの内容を伝える手段として効果的な方法の一つだと思いますので、ぜひチャレンジしてみてください。


当記事は他サイトへ移動しました。最新情報は以下のリンク先ページをご覧ください。
アメブロにヘッダー画像を表示するカスタマイズ方法


関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

--

コメント

  1. みほ より:

    初めまして。
    全くの初心者でやり方がわからず困っていましたが、
    新CSSのこのやり方でやってみたところ、やっとできましたー。
    最初はどうやら旧CSS方式でやっていたみたいです。

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

  2. 北村 より:

    はじめまして、北村と申します。
    徳島の田村さんに教えていただきました。
    お陰様でブログにヘッダーを設定することができました。^^
    ありがとうございます。

コメントを残す