尻込みするより軽はずみな日々

ヘッダ画像の作成が終わったら、次は自分のアメブロにヘッダ画像を設置してみましょう！
ヘッダ画像を設置する事によって、ブログを見にきてくれた人に強い印象を与えることも可能です。
今回はヘッダ画像をアップロードしてアメブロに設置する方法を掲載します。
なお、ヘッダ画像の設置に関しては専門的な部分もあるため、下記の3つの準備が必要です。

1.パソコン
2.インターネットが繋がる場所
3.CSSに負けない強い心

初心者の方は特に3番目が重要です。

アメブロでは画像は2015年6月現在で、全部で5枚までがアップロード可能で、1枚あたり1MBまで
アップロードすることができます。

1.マイページを開きデザインの変更をクリックします。

2.CSSの編集をクリックします。

3.「ブログデザインヘッダ・背景用画像の追加」にある「参照」をクリックします。

4.作成したヘッダ画像を選択して「開く」をクリックします。

5.選択した画像の名称が合っているかを確認して、「アップロード」をクリックします。

 

6.「アップロードされた画像」に作成したヘッダ画像が正しく表示されていれば完了です。

 

1./* (3-2) ブログヘッダー部分を編集する

ただでさえ分からないのに、細かい説明をするとさらに混乱しそうなので、
下記のCSSをコピーして貼付けてください。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background:url(アップロードした画像のURL) no-repeat; /* ヘッダ画像のURLを指定 */
height:350px; /* ヘッダ画像の高さを指定 */
}/* ←ブログヘッダーに背景画像を敷きたいとき */

そしてカッコ内のアップロードした画像のURLという箇所にアップロードした画像のURLをコピーして貼り付けます。

2. /* (3-3) コンテンツエリア 部分を編集する

ここの部分は簡単に言うと最初に設定されている文字などとヘッダ画像が重ならないようにするための
余白を設定するようなところです。
ここの部分も、混乱しないために下記のCSSをコピーして貼付けてください。

/* skinContentsArea コンテンツ980pxエリア */
.skinContentsArea{
/* 注 ベースのcssにwidth:980px;の記述有り */
padding-top:30px; /* ヘッダ画像とメインコンテンツのスペースを指定 */
}

3. /* その他、拡張があれば記述 */ 部分にCSSを追加する

ここの部分では最初に決めたタイトルと説明文が画像にのらないように非表示にするCSSです。
CSS部分を1番しためで一気にスクロールして最後のところに下記のCSSをコピーして貼付けてください。

.skinBlogHeadingGroupArea {
padding: 0;
}
.skinTitleArea {
text-indent:-9999px;
}
.skinDescription {
display: none;
}

全ての書き換えなどが終わったら「表示を確認する」をクリックして確認してください。
問題なければ保存をして終了です。
変わってなければ、キーボードの「F5」を押して更新します。
表示が変わったら保存をおして終了です。
「F5」を押しても変わらない場合は書き換えた部分を良く確認してください。

このような感じでアメブロにも画像を配置してみてはいかがでしょうか？
CSSという強敵が待ち受けていますが、所詮は私たちと同じ人間がつくりだしたものです。
CSSに負けない心が必要ですが、コピー、貼付けを基本にしてみました。
まずはチャレンジしてみてください。