アメブロにヘッダー画像を表示する方法の説明

3910GO-ブログカスタマイズ
3910GO-ブログカスタマイズ >  アメブロカスタマイズ > アメブロにオリジナルヘッダー画像を表示する方法

アメブロにオリジナルヘッダー画像を表示する方法

このカスタマイズには、ヘッダー画像をあらかじめ自分で用意する必要があります。

アメブロにヘッダー画像を表示する場合は、下記『ヘッダー画像を表示する』のCSSをCSS編集の一番下に貼り付けることで可能となります。

アメブロのCSS編集方法については、『CSSテンプレートでアメブロをカスタマイズする方法』というページで説明していますので、参考にしてみて下さい。


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

/***************************************
ヘッダー画像を表示する
by 3910GO http://blog-customize.3910go.com/
***************************************/
/* ▼ ヘッダー画像を表示する ▼ */
.skinHeaderArea{
width: 980px; /* ←ヘッダー画像の横幅変更 */
height:300px; /* ←ヘッダー画像の高さ変更 */
background-image:url('ここをヘッダー画像のURL(パス)に変更する'); /* ←ヘッダー画像のURLを指定する場所 */
background-repeat:no-repeat;
background-position:center top;
}
/*▲ ヘッダー画像を表示する (ここまで) ▲ */

上記CSSをCSS編集の一番下に貼り付けたら、次は、以下の画像の手順で、画像をアメブロにアップロードします。


アメブロのヘッダーを表示する説明画像1

一応、手順だけ記載しておきます。

1.『ブログデザインのCSSの編集』ページの『ブログデザインヘッダ・背景用画像の追加』見出し下の『参照』をクリックして、パソコン内にある使用するヘッダー画像を選びクリックする。

2.『参照』ボタンの右にある『アップロード』をクリックする。

3.アップロードが完了したら、アップロードしたヘッダー画像の『この画像のパス』というボックス内に表示されたURLを右クリックで全て選択しコピーする。

ここまでが上の画像の手順です。

続いて次の画像です。


アメブロのヘッダーを表示する説明画像2

2枚目の画像の手順です。

4.手順3でコピーしたURL(パス)をあらかじめCSSの一番下に貼り付けておいた、『ヘッダー画像を表示する』CSSの『ここをヘッダー画像のURL(パス)に変更する』という場所に貼り付けて変更する。(この際に『ここをヘッダー画像のURL(パス)に変更する』という文字は削除して下さい。)

5.全ての作業が終わり『表示を確認する』をクリックし、ヘッダー画像が正しく表示されたことが確認できたら、最後に一番下の『保存』をクリックして終了です。


以上の手順でアメブロにヘッダー画像を表示することが出来ます。

ヘッダーが代わるとオリジナル感が増しますので、是非、試してみて下さい。



ソーシャルボタン


ここは■004:アメブロにオリジナルヘッダー画像を表示する方法





Copyright (C) 2008-2015 3910GO. All rights reserved.