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

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

今回はアメブロにヘッダー画像を使う方法と設置したヘッダー画像をクリックしてトップページへ行けるようにリンクを設置していきます。アメブロのブログの幅を変更していない前提で進めます。

さて、初期状態ならブログの幅は1120pxになっています。そのため、ヘッダーに使う画像サイズは1120pxの幅の物を用意するとピッタリになりますので、素材(画像や写真)を探してペイントなどでサイズを変更しておくと良いです。

画像がない場合はフリー素材で探してもいいですし自分で撮影した画像でも大丈夫です。

MEMO

ちなみにヘッダー画像を設置するとブログのタイトルや説明文が邪魔になりますので、非表示にする場合が多いです。そのため、ヘッダー画像自体にブログのタイトルやロゴなど入れる加工しておくのもおすすめです。

画像の加工(サイズ変更や文字入れなど)は無料で利用できるバナー工房さんが便利です。

バナー工房

スポンサーリンク

ヘッダー画像を設置する手順

まずブログの幅のサイズの画像を用意したら画像をアップロードしていきます。

アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。

アメブロのCSS編集

CSS編集のページに「ブログデザインヘッダ・背景用画像の追加」という項目があるのでここで「参照」をクリックしてファイルを選択し「アップロード」をクリック。

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

アップロードすると「この画像のパス」とかかれたURLが表示されているのでこれをコピーしてメモ帳等に貼り付けておきます。

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

ヘッダーに画像を設置する

画像のパスをコピーしたらCSSの一番下に次のコードを追加します。

「画像のパスURL」という文字を消して()の中に先ほどの画像のパスURLを貼り付けて「保存」すれば完成。

ここの「height:300px」はヘッダー画像の高さです。お好みで変更して下さい。

こんな感じになりました。

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

ちなみにヘッダーの背景色というのは赤枠で囲んだこの部分です。

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

以上でアメブロのヘッダー画像設置は完了です。

最終更新日:2018/02/03

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。