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

アメブロ ヘッダー上のPR背景を付けて一体化する方法とは? | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:CSSでカスタマイズ

アメブロのブログ構成が変わったのか、
ヘッダー上のPR広告がちょっとおかしくないですか?

 

そう感じたのは、私だけ?

上の部分を同じ背景にしてみましょう。

 

 

 

 

 

私のあるノウハウについている特典で、
アメブロのテンプレートがあるんです。

 

 

 

それを設置していたサンプルをみると、
やっぱりヘッダーの上のPRの背景が白い!!

 

 

これはどうみても、ブログのレイアウトの構造が変化したとしか、
考えられませんでした。

 

 

なので、修正をしていて思ったんです。

 

 

アメブロの構造って、こんな感じだったんですね。

 

アメブロのレイアウト構成

 

 

これは、HMLT構成ともなるのですが、
簡単に説明すると、(これは、アメブロの場合です)

 

 

skinBody
ブログ全体のことをいいます。

skinFrame
ページ全体のことをいいます。

skinHeaderFrame
ヘッダー部分のことです。

skinContentsFrame
ヘッダー下の部分のことです。

skinContentsArea
メイン記事・サイドバーを含むエリアのことです。

 

 

 

この構造を、ちょっと覚えておくと、
カスタマイズがしやすくなりますので、参考にしてくださいね。

 

 

またアメブロの場合は、
skinBody・ skinBody2というように、
入れ子構造になっているので、
CSSも初期状態では、なにも指定していない場合もあります。

 

今回注目したのは、ヘッダー上の部分。

 

 

背景色を変えていないので、白のままです。
ブログのエリアと、くっきりはっきり分かれていますよね。

こんな感じで。

 

ヘッダー上の背景が白

 

 

これでも、別に!!
っていう方は、このまま使ってもいいのですが、
この構造変更に伴って、既存のアメブロテンプレートは、
広告をブログデザインの一部になったような感じがあります。

 

例えば、こんな感じかしら。

 

既存のデザイン

 

 

 

広告も隠れています。
っていうか、別に削除したわけでもなく、
移動したわけではありません。

 

 

このテンプレートは、全体に背景を設定してしているんですね。

 

 

 

こうすると、広告があっても、
ブログの一部としてみることができますよね。

 

 

CSS編集可能のものは、初期設定はありませんので、
設定する必要があります。

 

 

 

今回私のテンプレートを例にして、説明していきますね。

 

 

 

ただし、今回はヘッダー画像と同じ色で、
指定することにします。
(今回は、画像を作成してあります。)

 

 

どこを変更すればいいのか?
ということを覚えておけば、あとから応用が利きますので、
参考にしてくださいね。

 

 

hana2ヘッダー上の背景画像の変更

 

デザイン変更からCSS編集をクリックします。

 

CSSのコードの中で、

/*ボディ(全体)*/

というところを、探してくださいね。
(少しスクロールすると、すぐに見るかりますよ)

 

/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}

 

初期設定は、こんな風になっているかと思います。

 

 

 

この skinBody2 に、背景を設定していきます。

※画像を作成してある方は、下記コードをコピーして貼ってみて!!

 

こんな感じです。

repeat というのは、繰り返すということです。

 

 

 

今回アップロードした画像は、30×30の色画像です。

 

 

なので、全体に引きつめたいので、
repeat を使っています。

 

repeat-X  だと、横に繰り返しです。

 

repeat-y だと、タテに繰り返すということです。

 

これだけの設定です。

 

 

保存して、ブログを確認してくださいね。

 

こんな感じになったら、OKです。

 

Ametem2_pink
 

ヘッダーの背景も白だったら、
なにも設定する必要はありません。

 

 

 

でも、私のテンプレートのように、
色がついているものであれば、ちょっと同じ色にするとか、
工夫をすると、ブログ全体も個性がでますし、
また、大きな広告も移動せずとも、ブログの一部となりますね。

 

 

 

 

ぜひ、参考にしてみてくださいね。

 

 

 

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

 

 

 

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

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