カテゴリ
skin編集投稿&表示方法 コメント欄 背景の変更 メモ帳 その他 タグについて skin付属 スキン解体 はじめに 以前の記事
2010年 12月2009年 06月 2009年 05月 2006年 08月 2006年 07月 2006年 05月 2006年 04月 2006年 02月 2006年 01月 2005年 12月 2005年 11月 メモ帳
ご訪問有り難うございます。
なるべく分かり易いように 努力致します。 その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
|
タイトル部分に画像を追加する -その2-
ハイー、前回の続きで「タイトル部分に画像を追加する」です。
今回は枠(罫線)内に好きな画像=写真を表示させていきます。 (画像が見えにくい場合は、画像を直接クリックしてください。 別ウィンドウが開きます。 また、実際に作業を行う前に、軽く全体に目を通して下さい。) まず、画像を表示させる作業を始める前に TOPの枠(罫線)の幅が幾つなのかを知る必要があります。 それはHTML編集枠内の全体枠の <TABLE BORDER=0 CELLPADDING=0 CELLSPACING= ALIGN=CENTER WIDTH=740> <TR><TD VALIGN=TOP WIDTH=740> 「WIDTH=740」 に記されています。↓740がTOPの横幅です。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 好きな写真を画像編集ソフトを使用して、横幅を740にして下さい。 縦幅は別に幾つでも構いません。 そして、ファイルサイズ(容量)はなるべく軽くして下さい。 云うまでもなく、ページの読み込みに負荷がかかるからです。 今回は使用する写真は↓です。ファイルサイズ(容量)は21.6KBです 画像を上↑までもってくる方法は背景を変更 -その2-に書いてあります。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ コピーしたURLは background-image: url(http://pds.exblog.jp/pds/1/200604/29/94/tcar_1.jpg); とメモ帳で編集して DIV#TOP の部分に追加します。↓ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると↓元々用意した画像のタイヤの部分が切れてしまってます。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ そこで、 DIV#TOP { background-image: url(http://pds.exblog.jp/pds/1/200604/29/94/tcar_1.jpg); PADDING : 65PX 15PX; } の PADDING : 50PX 15PX; の 50PXの数値を変更します。↓ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると↓ 完成です。保存して適用で終了です。 で、オマケです。今回使用した写真は全体が白です。 そのままでもいいのですが、枠で囲っておきたい場合は、 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;は黒です。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ プレビューすると↓ 1PXの数値と#000000;のカラーはもちろんお好みでどうぞ。 ハイー、終了で~す。 画像を追加したことでタイトルとBlogのURLが見づらいと思った場合は、 「投稿欄のフォントのサイズ変更、タイトル位置変更等」内の More(まだまだ続きます。←文字をクリック)をご参考下さいませ。 次回は画像にリンクを付けるを予定しております。
by skin_dasu
| 2006-04-30 03:01
| skin編集
| △TOP
|