£アメブロの記事タイトルバックへ画像を貼付け！

↑こんな感じで枠を作り、フォントも大きくしました。

※CSSは、スタンダードのベーシクでの解説になります。


初めに、スクリーンショットで、アメブロの記事タイトルバックの寸法を測ります。
Macの場合は、「⌘(コマンド)＋シフト＋4」です。
Windowsは、このサイトを見ると分かりやすいかも！？
http://www.rainylain.jp/etc/ss/

自分のサイズは、550ピクセル。そのサイズ内で画像を作ります。
画像を使ったのは、簡単にボタンを作れるサイトです。
かなり活用してます！！！

◆As Button Generator
http://jirox.net/AsButtonGen/

フィルターをかけると最初に設定したサイズより大きくなるので、
保存して、出来上がったサイズを見て、大きくなった場合は縮小します。
と、全ての情報をコピーしておく事をお勧めします☆

FFFAFF
548
93

A0A3FA
7
2

タイプ5

FFFCFF
9
2
0.3
45

Bフィルター
158
0
1
1
08
2
8
FFBDFD
C8EAFF

Dフィルター
02
68
28
06
3
12
000000

青字の感じで☆

完成はこんな感じ。
これをアルバムに入れて、原寸大の画像urlをコピーします。


で！！


◆アメブロのcssの編集で、最後にコピペします。
赤い文字は、任意で調節して下さい。

/* 記事タイトルバックへ画像を貼付け　*/
.entry h3.title{
margin:6px 0;
padding:30px 0 44px 20px;
color:#000000;
font-size:20px;
background-image:url(画像url);
background-repeat : no-repeat;
}
.entry>h3.title{/* IE 以外の設定　*/
background-image:url(画像url);
}

これと対で、CSSの上部7番目も変更します。

/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #FFFFFF; /*-- 白 --*/
}

これをやらないと、バックの色と同色にしないと、下の色がはみ出て、こんな感じになってしまいます。

と言う事で、オリジナルブログに一歩近づいたのでした・・・
アメブロな皆様は是非！？

というか、ネタが無くてこんな事を・・・
これ以前に横幅の変更なども載せたい所・・・追々載せたいと思います。。。


おわり。





にほんブログ村


人気ブログランキング


☆ねもの美味しいものメモ。料理レシピの一覧へ

★送料込★最新型ソニッケアーフレックスケアープラス HX6993/03 歯科専売品 ブラシ3本付！	【ランキング入賞商品】歯周病を予防したい方に！ジェルコートＦ90ｇ/コンクールＦ100ｍl/リペリオ80ｇ
【送料無料】【ランキング入賞商品】リコーエレメックス社 デントレックス	【ランキング入賞商品】ウエルテック コンクールクリーニングジェル PMTC 40g
ライオン DENT.Check-up foam 100ml デントチェックアップフォーム	【ランキング入賞商品】ウエルテック コンクールクリーニングジェル（ソフト） 40g

お口の専門店





980円の気軽で便利なプランからご提供中。宅配レンタルビデオ(DVD・CD)はこちら