2005年 12月 29日
⑤ブログタイトルの背景に写真を貼り付けてみましょう (CSS+HTML)修正です
|
ベーシック スキンのダークブルーをベースに書いていきます。
間違いがありました。修正いたします。ご迷惑をおかけして申し訳ありませんでした。
今回はブログタイトルの背景に写真を貼り付けてみましょう。
準備Ⅰ.最初にブログタイトル部分のサイズを確認します。
(1)スキン編集画面を開きます
(2)HTML(全体)の一番上のほうに
table width="800" border="0" ...という文があるのを探してください。
ここのtable width=の後の数字がタイトルに使用する写真(画像)の幅になります。
今回は800pxですね。
準備Ⅱ.写真をタイトル画面に合うようにリサイズします。
幅は上で確認した大きさにしてくださいね。
高さに関しては任意のサイズでOKです。(100px前後)
*注意
exciteブログではgif、jpgのみ使用可能です。
画像のサイズは最大100KB迄となっています。
リサイズ・画像変換に関しては今回はここでは省略します。
わからない方はコメントくださいね。
準備Ⅲ.画像を “マイイメージアカウントにイメージ登録” から登録して下さい。
イメージのurlをコピーしておいてください。
*注意
他のサイトから直接リンクだけはしないようにしてくださいね。
必ず自分でupしたurlで行ってください。
Ⅳ.CSSをカスタマイズします。
CSS のかなり上のほうに^^;(9行目くらいに...)
DIV#TOP {
BACKGROUND : #6F8294;
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX;
}
という文がありますので探してみてください。
誤) (1)ここの、BACKGROUND : #6F8294; の後ろに、先ほどコピーしたurlを
url( ここに貼り付けてください) ; no-repeat ; という形で指定します。
正) (1)ここの、BACKGROUND : #6F8294 の後ろに、先ほどコピーしたurlを
url( ここに貼り付けてください) ; no-repeat ; という形で指定します。
(2)WIDTH : 800PX; の後ろに 用意した画像の高さを指定する文を追加します。
HEIGHT : 用意した画像の高さPX;
貼り付けた後は下の文のようになります。
DIV#TOP {
BACKGROUND : #6F8294
url(http://pds.exblog.jp/pds/..... .gif ) ; no-repeat ;
BORDER-BOTTOM : 5PX SOLID #C1D6F8;
WIDTH : 800PX; HEIGHT : 用意した画像の高さPX;
}
【参考】 壁紙を貼り付ける場合、その前のカラーコードは指定しなくてもいいのですが、万が一画像が表示されないときのために残しておいたほうがいいと思います。
HTMLにて高さ指定するとタイトルの位置などがおかしくなってしまうようです...現在調査しています。CSSカスタマイズのみで実施してください。m(_"_)m
HTML(全体)の一番上のほうに
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td colspan="2" valign="top">
<div id="TOP">
<table width="800">
<tr><td align="left" width="800"><div
という文がありますので探してみてください。
(1)この赤字の<table width="800">の"800"のうしろに
HEIGHT="用意した画像の高さ"を追加します。
*注意
"800"とHEIGHTの間には半角のスペースを入れます。
貼り付けた後は下の文のようになります。
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td colspan="2" valign="top">
<div id="TOP">
<table width="800" HEIGHT="用意した画像の高さ">
<tr><td align="left" width="800"><div...
この後プレビューを押して確認してみてください。 OKでしたら保存を押して適用してくださいね。
編集前のプレビュー ①~③のカスタマイズ済み
編集後のプレビュー
写真を貼る場合④の壁紙設定は行いません
画像は夜景を使って見ました
by chocobopapa
| 2005-12-29 23:43
| スキン編集