<< ノーラッドのサンタ追跡プログラ... 投稿欄のタイトルのイメージを2... >>
 

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


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


a0031863_7515295.jpg

図1 設置例


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


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

HTML編集左側


a0031863_2046431.jpg



HTML 左側

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




HTML編集右側


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や%などで指定も可能です。今回の指定は横方向を左側に表示するように指定しています。



難易度:★

ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-12-11 08:46 | │├サイドバー | Trackback | Comments(8)
トラックバックURL : http://potto.exblog.jp/tb/1403594
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented at 2005-02-24 02:09
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-02-25 06:03
鍵さん、はじめまして^^
ご紹介で遊びに来ていただいたんですね。
これらもよろしくお願いします。
Commented by tsukino-wa-guma at 2005-02-25 23:56
お出まし嬉しかったです。ありがとうございました。
これからもお世話になりますっ!
Commented by potto37 at 2005-02-27 08:41
tsukino-wa-guma さん、こちらこそコメントありがとうございます。
コメントを貰えると嬉しいですね^^
こちらこそ、これからもよろしくお願いします。
Commented by oh-aqua at 2005-05-31 09:48
久しぶりにCSS編集の一つとしてサイドバーのワンポイントを季節に合わせて使ってみました。
わかりやすい方法で記述されているので簡単でした。(^^♪
有難うございました。(^^♪
リンクさせて頂きます。

Commented by potto37 at 2005-05-31 19:34
oh-aquaさん、こんばんは^^

洋服を着替えるように、季節によって、サイトのイメージを変えるのいいですね。

追伸:この技は、HTML部分とCSS編集部分の両方を利用した技なので、片方だけだと、ひとつのイメージしか表示されないのでなにかのヒントになるでしょうか。
Commented by oh-aqua at 2005-06-01 18:58
HTML部分とCSS編集の両方を利用したつもりでしたが
サイドバーのフレームが消えワンポイントだけがrepeatになってしましました。
フレームの中にワンポイントを入れる方法をアドバイスを頂けたら嬉しいです。
宜しくお願いします。<m(__)m>
Commented by potto37 at 2005-06-01 20:05
oh-aquaさん、こんばんは

見せて頂いたのですが、HTMLのタグの入力ミスがありそうです。(実際にHTML編集部分を見ることが出来ないので変換後のHTMLを見ただけです)
また、CSS編集部分のイメージがHTMLの指定と同じアドレスを指定していますのでこちらも直した方が良さそうです。

■HTML編集部分で<img> タグを入れるところをイメージファイルのアドレスのみの入力になっています。

<DIV CLASS=MN><DIV CLASS=MNTTL><http://pds.exblog.jp/pds/1/200505/31/60/bd_aji6.gif>Link</DIV>


こんな感じです。

正しくは、

<img src="http://pds.exblog.jp/pds/1/200505/31/60/bd_aji6.gif">

<< ノーラッドのサンタ追跡プログラ... 投稿欄のタイトルのイメージを2... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。