アメブロdeアクセスアップ

アメブロ スキン改造ヘッダー画像を追加する方法(CSSの追加) | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:ヘッダー画像

アメブロのスキン改造。
ヘッダー画像についての、質問メールがきましたので、お答えしようかと思います。
 

この変更は、CSSにちょっとタグを追加します。
 
 

 
 
アメブロの【CSS編集用】デザインは、CSSの変更ができるデザインテンプレートです。

 
 
だから、本当に自分でカスタマイズする方には、
このスキンを使って、思う存分にカスタマイズしちゃってねって感じです。

 
 
ですが、カスタマイズ初心者さんは、ちょっと難しいかもですね。

でも、これも練習です。

 
 

ちょっとづつコツを覚えて、挑戦してみてくださいね。

 

今回は、ヘッダー画像を作成したのだけれども、
CSSの追加方法、主にタグ(コード)が解らないという方からの、
質問でした。

 

 

ヘッダー画像は、やっぱりブログの顔です。

 

以前の記事でも書きましたが、
ヘッダー画像を自分で作成して、ブログをアピールすることって、一番大事なこと。
 
 
 
それがたとえ、なんだかなーと思っていても、
あなたらしさが出れば、OK!!なんです。
【ヘッダー画像を作成するフリーソフトのご紹介】

 
 
 

今回は、ヘッダー画像がご用意されているようなので、
その後、どうすれば?を、解説していきますね。
 
 
 

CSS追加手順

デザインの変更→ CSSの編集で、

まずCSSを見てみましょう。
 

コメントアウトで(コメントアウトというのは、/* で囲まれた部分ですね。)
 

/* (3-2) ブログヘッダー
——————————————–*/

というところを探してくださいね。
※ショートカットキーだと、 control+F 検索窓が表示できるので、
【ブログヘッダー】などと入力すると、探すことができます。

 

その下に、コードが書かれています。
こんな感じね。
 
ヘッダー画像を追加する
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
 
 
この{}の中にコードを入力します。
 
その前に、ヘッダー画像をアップロードしておきましょう。
 
CSSコードが記載されている部分の上に、
画像をアップロードしているとこがありますので、
そこで、アップロードしておいてくださいね。
 
 
こんな感じで。

画像のアップロード
 
では、CSS編集に戻って、先ほどの skinHeaderArea の場所に、
下記のコードを入力してください。

 
※ ← の部分は、記載しなくてもいいです。
 
 

今回、例にしているヘッダー画像は、
私がお配りしているプレゼントの【ちえぞうのアメテン】のヘッダー画像を利用しています。
 

※トップページより、ダウンロードできます。

 
ヘッダー画像の高さ・幅は、ちゃんとしていしないと、
表示できません。(画像がかけたりします。)
 

background:url()

というのは、バック(背景)の画像のアップロード先を、表しているコードです。
 
 

その後についている no-repeat で画像の繰り返しは、
行わないという意味です。
 
 

background-position:right; は、背景は左から配置するという意味。
  

これで一度、表示で確認してください。
こんな感じになります。
 

ページの画像
 
 
 
ヘッダー画像が追加できました。
 
 
でもこれでは、メインの場所とちょっとの距離が近いですよね。

なので、もう一か所コードを追加して、

ヘッダーの距離と、メイン記事が表示されている部分との距離を、
広げてあげましょう。

 
 
 

先ほどと同じ要領で、【コンテンツエリア】と、検索してください。
 

こんなコメントアウトの表示の下です。
 

/* (3-3) コンテンツエリア
——————————————–*/

コンテンツエリアというのは、
記事やサイドバーがある部分のことをいいます。
 
 

このコンテンツエリアとヘッダー画像の間に
空白を作ります。

 
下記のコードを

.skinContentsArea{
/* 注 ベースのcssにwidth:980px;の記述有り */
}

の下に追加してください。

 
 
こんな感じに追加します。
 
CSSの追加編集
 
 
表示で確認してみましょう。
 

ページの画像変更後
 
ちょっと間があきましたね。
 
padding-top ヘッダーからの距離を表していますので、
この数字を広げれば、ヘッダー画像とメインの間が広くなるんです。

 

これは感覚なので、バランスのいいあんばいの数字を入れましょう。

 

 

今回は、15pxで設定していますが、
20pxの間くらいでもいいかもですね。

 
これで、完了です。

 
 

保存をしたら、ブログを表示して、最後にF5キーで更新をかけてくださいね。

 
 

自作のヘッダー画像を作成したら、
設置してみてくださいね。

 
 

個性がひかる、自分だけのブログになりますように・・・・・。
 
 

アメブロのカスタマイズを自分でやってみたい方は、
参考にしてくださいね。

【初心者にもできるアメブロカスタマイズ】

 
 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.