アメブロテンプレ改造 画像透かして背景をチョイ見せする方法

アメブロテンプレ改造 画像透かして背景をチョイ見せする方法

アメブロでもCSSをちょっと駆使すると、
いろんなカスタマイズができます。

ヘッダー画像などを、ちょっと透かせて、
背景を見せてみる。
おしゃれで、かっこいいブログを
作っていきましょう。

 

 

アメブロは基本HTMLコードの変更ができませんが、
カスタマイズするには、CSSの変更や追加だけでも充分です。

 

ちょっとおしゃれで、かっこいい感じのブログを作りたいなら、
こんなちょいワザを覚えておくと便利ですよ。

 

私も読者登録ボタンなどでも使っているんですが、
ヘッダー画像や、記事投稿欄など、
前の画像をちょっと透かせて、背景などを見せてみる。

 

画像・色を半透明にする方法です。

 

CSS3では、背景色だけを半透明にしたりと設定できるようになったんですが、
画像だと半透明にすると、全部が半透明になってしまうんですね。

 

 

ちょっと調整が必要なんですが、
なんともカッチョよくなるので、ご紹介しておきます。

 

これは、背景画像がカッチョいい場合に、とっても有効。
全部の背景画像を見せてあげましょうよ、せっかくだからさ!!

 

 

あと、この半透明にする設定を覚えていると、
読者登録ボタンなど、マウスをボタンに合わせるときに、
色を変えるのではなく、変化がでますね。

これ、ちょっと使えそうでしょう?

 

知っておくと、便利なのでご紹介しておきますね。

 

 

見本では、ヘッダー画像を作って、
その画像をちょっとだけ透明にして、背景画像を見えるように設定。
という装飾をします。

 

 

ヘッダー画像を透かしていない場合は、
こんな感じです。(下の画像のお花が見えないですよね)

ヘッダーそのまま設置

 

 

ちょっと透かせて見ました。
(下のお花の全体が見えますよね?)

ヘッダー画像を透かす

 

 

CSSにちょい足しで、出来るので覚えておくと便利ですよ。

CSSの追加

※アメブロのCSS編集可能デザインテンプレートを使っています。

CSSコードが記載されている場所から、
検索で、下記のコメントアウトを探してくださいね。

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

 

ブログヘッダーには、ヘッダー画像などが、
設定しているかと思います。

 

例えばこんな記述です。

.skinHeaderArea{}

{}の中に、いろいろな装飾のコードが記述されているかと思いますので、
その一番下に下記コードを追加してくださいね。

 

追加できたら、保存をしてブログを確認してみましょう。

 

こんな感じです。(もう一度みてみてね)

ヘッダー画像を透かす

※表示できない場合は、F5キーを押下して更新をかけてみましょう。

 

上記は、全部半透明にするというタグです。

 

3つ記述しないとダメ?

 

これは、読者さんの使っているブラウザによって違うので、
表示される・されないというに関わってきます。

 

全てのブラウザに対応できるように、
念のため、3個記述をしておいた方がいいです。

 

タグの解説

opacity の後の数字ですが、
1を透明なしとした場合、半分が0.5となります。

 

なので、ちょっとだけ透かしてみよう・・・
という時は、この数字を変更すればいいわけです。
この見本では、0.7に設定しています。

 

 

このタグを利用すると、
読者登録ボタンなども、マウスを合わせた時に、
ボタンが半透明にできるので、いいですよ。

 

ボタンに、違う色などで変化させたい場合は、
画像をもう一つ作らないとできません。
ちょっと面倒だなー・・・
でも、ちょっとおしゃれにしたいなーと感じる場合は、
この半透明にする方法は、とっても有効。

 

ボタンがちょっと凹んだ感じに見えますよね。

 

こういうチョイ技を覚えていくと、
カスタマイズが、どんどん楽しくなっていきますよ。

 

ぜひお試しあれ!!
 
 
 
A6A6

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

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

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

arrow10_59x29_ylw

mail-pen1

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

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



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

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

line

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



Fc2ランキングへ



お問い合わせ

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

pen

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

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

このページの先頭へ