スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

記事タイトルの背景に画像を挿し込む方法 アメブロカスタマイズ

先月、ブログのヘッダー画像を新しくしたので、エントリータイトル背景も画像に変えてみることにしました。
今まではCSSで色を指定していてそれも悪くありませんでしたが、ヘッダーの「古代図書館風」の印象を強めるためにも、記事タイトルにも関連した画像を挿むことにしました。


記事タイトルの背景に画像を挿し込む方法 アメブロカスタマイズ

今日はこの部分のお話。



記事タイトルの背景色を変更


さて、CSSで記事タイトルの背景に画像を挿むのですが、それに該当するCSS部分は「.entry h3.title」です。
画像ではなく、背景色を付けたいのでしたらこういうCSSになります。


.entry h3.title{
background-color: #ffffff; /* 背景色 */
}


CSS中の「#ffffff」は白のことです。
指定したい色がありましたら、「色 タグ」や「Webセーフカラー」などで検索すればいっぱい出てきます。



記事タイトルの背景画像を変更


今度は背景画像を挿むCSSです。
画像のURLを知る方法はご存知ですか?
知らない方は、「日々勉強!アメブロカスタマイズ」さんの
リンク1リンク2画像のURLを知る方法。というエントリーが勉強になります。


.entry h3.title{
background-image:url(背景画像のURL);
}


上記のCSSは単に画像を挿むだけのもので、いわゆる“最低限のCSS”ってやつです。


文字サイズや余白も変更したいという人は、下のCSSをご利用下さい。
ただし多少の知識が必要です。


.entry h3.title{
color: #000000; /* 文字色 */
font-size: 15px; /* 文字サイズ */
font-weight: bold; /* 太文字にする */
padding: 0px 0px 0px 15px; /* 枠の中の余白 */
width: 480px;/* 横幅 */
height: 78px;/* 高さ */
background-image: url(背景画像のURL);
background-color: #ffffff; /* 画像が表示されない時の背景色 */
background-repeat: no-repeat; /* 画像のリピート設定 */
margin: 0px 0px 0px 0px;/* 画像外側の余白 */
}



変更したい箇所を抽出しよう!


あれもこれも変更するのはよくないので、
まず最初に「何を変更したいのか」をよく考えましょう。
もし「文字色、太文字、背景画像」だけ変更したいというのでしたら、先ほどのCSSからその部分を取り出してこう書きます。


.entry h3.title{
color: #000000; /* 文字色 */
font-weight: bold; /* 太文字にする */
background-image: url(背景画像のURL);
}



用意されたテンプレートをコピペするのは楽ですが、自分が変えたいと思っている箇所以外も変更されることがあります。
必要ではないところを削ろうとする気持ちがあれば、CSSを見る目が養われて、いつかは自分で書けるようになるはずです。





アメブロをカスタマイズ 魅せるブログデザインを作ろう!
amazon.co.jp
有名なアメブロカスタマイズ教本です。

Comments


Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。