人気ブログランキング | 話題のタグを見る
2005年 12月 29日
⑤ブログタイトルの背景に写真を貼り付けてみましょう      (CSS+HTML)修正です
exciteブログワンポイント カスタマイズの第5回目です^^;

ベーシック スキンのダークブルーをベースに書いていきます。

間違いがありました。修正いたします。ご迷惑をおかけして申し訳ありませんでした。


今回はブログタイトルの背景に写真を貼り付けてみましょう。


準備Ⅰ.最初にブログタイトル部分のサイズを確認します。
  (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(全体)をカスタマイズします

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でしたら保存を押して適用してくださいね。
⑤ブログタイトルの背景に写真を貼り付けてみましょう      (CSS+HTML)修正です_e0075308_21521324.jpg

編集前のプレビュー ①~③のカスタマイズ済み

編集後のプレビュー
写真を貼る場合④の壁紙設定は行いません

画像は夜景を使って見ました⑤ブログタイトルの背景に写真を貼り付けてみましょう      (CSS+HTML)修正です_e0075308_19551452.jpg
by chocobopapa | 2005-12-29 23:43 | スキン編集

記事更新停止中です;;
by chocobopapa
    
since 2005.9.17
Count Down
Ranking

第10位

マイペース
SunSet Swish

第9位

Around The World
MONKEY MAJIK

第8位

恋のダウンロード
仲間由紀恵
with ダウンローズ

第7位

太陽の下
レミオロメン

第6位

Kiss Me Good-Bye
アンジェラ・アキ

第5位

Startin'/Born To Be...
浜崎あゆみ

第4位

SEXY BOY-そよ風に寄り添って-
モーニング娘。

第3位

純恋歌
湘南乃風

第2位

一剣
氷川きよし

第1位

サヤエンドウ
はだしのシンデレラボーイ
NEWS
Chocobo Style
    
以前の記事
    
カテゴリ
    
最新のトラックバック
    
フォロー中のブログ
    
その他のジャンル
    
ファン
    
記事ランキング
    
ブログジャンル
    
画像一覧
Copy Right Chocobo Style Since 2006