人気ブログランキング | 話題のタグを見る

○○さんの為のエキサイト・スキン編集ブログ
by skin_dasu
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31


タイトル部分に画像を追加する -その2-
ハイー、前回の続きで「タイトル部分に画像を追加する」です。
今回は枠(罫線)内に好きな画像=写真を表示させていきます。

(画像が見えにくい場合は、画像を直接クリックしてください。
別ウィンドウが開きます。
また、実際に作業を行う前に、軽く全体に目を通して下さい。)


まず、画像を表示させる作業を始める前に
TOPの枠(罫線)の幅が幾つなのかを知る必要があります。
それはHTML編集枠内の全体枠の
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING= ALIGN=CENTER WIDTH=740>
<TR><TD VALIGN=TOP WIDTH=740>

「WIDTH=740」 に記されています。↓740がTOPの横幅です。
タイトル部分に画像を追加する -その2-_a0064894_2581484.jpg

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
好きな写真を画像編集ソフトを使用して、横幅を740にして下さい。
縦幅は別に幾つでも構いません。

そして、ファイルサイズ(容量)はなるべく軽くして下さい。
云うまでもなく、ページの読み込みに負荷がかかるからです。
今回は使用する写真は↓です。ファイルサイズ(容量)は21.6KBです

タイトル部分に画像を追加する -その2-_a0064894_31179.jpg

画像を上↑までもってくる方法は背景を変更 -その2-に書いてあります。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
コピーしたURLは

background-image: url(http://pds.exblog.jp/pds/1/200604/29/94/tcar_1.jpg);

とメモ帳で編集して DIV#TOP の部分に追加します。↓
タイトル部分に画像を追加する -その2-_a0064894_354348.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると↓元々用意した画像のタイヤの部分が切れてしまってます。
タイトル部分に画像を追加する -その2-_a0064894_362449.jpg





・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
そこで、
DIV#TOP {
background-image: url(http://pds.exblog.jp/pds/1/200604/29/94/tcar_1.jpg);
PADDING : 65PX 15PX;
}

の PADDING : 50PX 15PX; の 50PXの数値を変更します。↓
タイトル部分に画像を追加する -その2-_a0064894_3114471.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると↓
タイトル部分に画像を追加する -その2-_a0064894_3124836.jpg


完成です。保存して適用で終了です。

で、オマケです。今回使用した写真は全体が白です。
そのままでもいいのですが、枠で囲っておきたい場合は、
DIV#TOP {
background-image: url(http://pds.exblog.jp/pds/1/200604/29/94/tcar_1.jpg);
PADDING : 65PX 15PX;
}
の部分に
BORDER-TOP : 1PX SOLID #000000;
BORDER-LEFT : 1PX SOLID #000000;
BORDER-RIGHT : 1PX SOLID #000000;
BORDER-BOTTOM : 1PX SOLID #000000;

を追加入力します。↓#000000;は黒です。
タイトル部分に画像を追加する -その2-_a0064894_3185782.jpg


・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プレビューすると↓
タイトル部分に画像を追加する -その2-_a0064894_3193484.jpg


1PXの数値と#000000;のカラーはもちろんお好みでどうぞ。

ハイー、終了で~す。

画像を追加したことでタイトルとBlogのURLが見づらいと思った場合は、
「投稿欄のフォントのサイズ変更、タイトル位置変更等」内の
More(まだまだ続きます。←文字をクリック)
をご参考下さいませ。


次回は画像にリンクを付けるを予定しております。
by skin_dasu | 2006-04-30 03:01 | skin編集 | △TOP
<< タイトル部分に枠(罫線)を追加... タイトル部分に画像を追加する ... >>