アメブロテンプレ改造ヘッダー画像不要背景画像を2枚表示させる方法

アメブロテンプレ改造ヘッダー画像不要背景画像を2枚表示させる方法

アメブロのCSSが、
ちょっとバージョンアップされ、
おかげでCSS3が使えるようになりました。

ということで、ヘッダー画像不要かも?
背景画像で代役が可能になりました。

 

 

ヘッダー画像が不要?

 

どういうことかというと、HTML・CSSなどのプログラミングも、
日々進化しているんですね。
バージョンもどんどんアップしています。

 

ですが、ブログ自体が対応できないと、
バージョンアップされても、表示できなかったり、
コードが適応できなかったりと、不具合がいっぱい!!

 

アメブロの場合、基本HTMLのコードをいじることができないので、
CSS(スタイルシート)のみの変更となります。

 

このCSSも今や、CSS3までバージョンがアップされていて、
スタイル一つで、いろんなことができちゃいます。

 

そこで、私もやってみた!!

 

アメブロで、最近気になっていたところが背景の部分。

 

前は、全体をカバーするようなことが、できていなかったんです。
つまり、ヘッダー上にある広告部分は、
広告部分であって、背景を変更しても変わらなかったんですね。

 

でも、今やそれもできるようになりました。
つまり、全部を同じお色、もしくは画像で統一できるようになったのね。

 

 

すんばらしい!!

 

で、大きな背景画像を設置して、
その上に、ちょっとワンポイントとして、画像を設置したら?
なんかヘッダー画像なんていらないさー!!という風になりました。
完成した感じは、こちらです。

背景画像2枚

 

どう?

 

他は変更していないんですが、
これで、ブログタイトルのロゴをちょっとだけ変更すれば、
ヘッダー画像なしでもいい感じ。

 

これは、前の記事でも書いたように、
背景画像を動かないようにして、
その上に、ちょっとお花の画像を設置しただけです。
アメブロ ブログの背景画像を固定する方法とは?

 

 

背景画像を加工したものではなく、
CSS3では、背景を1枚から2枚まで設置できるように
なったんですよね。

これを利用しました。

 

 

通常では、大きな背景画像にこのお花を置いて(加工するということね)
2枚の画像を1枚の画像にして、最後に設置という風にするのですが、
CSSで、2枚の画像の設置が可能になったので、
背景にする画像を、予め2枚用意すればOK!!

 

ただし、準備段階として、上に載る画像のバックは、
透明にしておいた方が、仕上がりが美しいです。
画像の背景を透明にする方法は、以前の記事でも書いているんですが、
GIMPという無料画像加工ソフトを使います。
画像加工 GIMPを使って背景を透明にする方法

 

 

大きな背景画像と、それに乗せる背景が透明な画像を揃えたら、
あとは、CSSを追加すればいいわけです。

 

CSSの設置

アメブロのCSS編集可能テンプレートの編集画面から、
CSSの部分のところで、こんなコメントアウトを探しましょう。

/* (3-1) ボディ(全体)
——————————————–*/

 

この場所では、ブログ全体の設定を行う場所になります。

skinBody・Body では、ブログの全体の設定ができるので、
ここに下記のソースをコピーして貼ってくださいね。

 

 

CSS3になって、
カンマ(,)区切りで2枚の画像を設定できるようになりました。

 

なので先に上に載せる画像、
次に全体の画像という順番に記載するようにします。

 

画像のサイズや繰り返しなどの画像の細かい設定も、
カンマ区切りで、上記の順番通りに記載していきます。

 

 

今回は、上の画像が少し大きかったので、
全体の60%になるように、(いいあんばいの画像なら autoで設定)
一番下になる画像は、全体にひきたいので、
cover で設定しています。

 

最後に、画面をスクロールしても、
背景が動かないように、background-attachment:fixed;
を追加しました。

 

もう一度完成したブログを見てみてね。

背景画像2枚

どう?

 

ブログタイトルを、背景画像に合わせて、
場所を移動させ、ちょっと装飾を加えれば(このブログはやってませんが)
ヘッダー画像要らずとなりますよね。

 

ヘッダー画像を作成するのが、ちょっとなー
っていう方、この方法ならば、全体のイメージが伝わるはず。

 

ぜひお試しあれ!!

 

 

 
A6A6

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

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

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

arrow10_59x29_ylw

mail-pen1

ちえぞうに直接届きます!!

 

 

 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ