人気ブログランキング | 話題のタグを見る
<< ノーラッドのサンタ追跡プログラ... 投稿欄のタイトルのイメージを2... >>
 

サイドバーの1ポイント(バックグランドイメージはそのまま)


3列スキンのサイドバーのバックグランドを指定している方が、ワンポイントのイメージを追加したい場合の技です。
よろしかったら試して下さいね。


サイドバーの1ポイント(バックグランドイメージはそのまま)_a0031863_7515295.jpg

図1 設置例


HTML編集でワンポイントの追加


HTML編集でワンポイントのイメージを指定します。今回の例は3列スキンですが、皆さんのスキンに合わせてご利用下さい。

HTML編集左側


サイドバーの1ポイント(バックグランドイメージはそのまま)_a0031863_2046431.jpg



HTML 左側

<DIV CLASS=MNTTL_L><img src="イメージURL"><$mntitle$></DIV>
<DIV CLASS=MN_L><$mnbody$></DIV>




HTML編集右側


サイドバーの1ポイント(バックグランドイメージはそのまま)_a0031863_2046526.jpg


HTML 右側

<DIV CLASS=MNTTL_R><img src="イメージURL"><$mntitle$></DIV>
<DIV CLASS=MN_R><$mnbody$></DIV>



CSS編集部分





CSS編集

/*左側*/
DIV.MNTTL_L{
/*------------------ ここから追加 ---------------*/
background-image:url(イメージURL);
background-repeat:no-repeat;
background-position:left;
/*------------------ ここまで --------------------*/
}

/*右側*/
DIV.MNTTL_R{

/*------------------ ここから追加 ---------------*/
background-image:url(イメージURL);
background-repeat:no-repeat;
background-position:left;
/*------------------ ここまで --------------------*/
}






今日のポイント
  • CSS編集とHTML編集を使用してイメージを2つ重ねています。



background-repeat

  repeat    縦横にイメージを繰り返す
  no-repeat イメージを繰り返さない
  repeat-x   横方向にイメージを繰り返す
  repeat-y 縦方向に 〃

background-position
 画像の表示位置を指定します。値を横方向と縦方向の順に入力しスペースで区切ります。値の指定方法方はpxや%などで指定も可能です。今回の指定は横方向を左側に表示するように指定しています。



難易度:★

ぽっと

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-12-11 08:46 | │├サイドバー
<< ノーラッドのサンタ追跡プログラ... 投稿欄のタイトルのイメージを2... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。