人気ブログランキング | 話題のタグを見る
<< サイドバーの1ポイント(バック... 眠れない夜は、流れ星を見つけに・・・ >>
 

投稿欄のタイトルのイメージを2つ表示する方法


投稿欄タイトルのバックグランドイメージを指定しているともうイメージを表示できないと思っている方はいないでしょうか。もし、そう思っている方はこの技を試して下さいね。
通常はCSSでバックグランドのイメージを指定していますが、HTML編集でイメージを追加して表示することにより、バックグランドイメージの上にワンポイントとしてプチイメージを表示することが可能です。
今回は私が作った素材で試してみました。

投稿欄のタイトルのイメージを2つ表示する方法_a0031863_16152717.jpg

図1 設置例


HTML編集部分

図2に示すように、HTML編集の本文をクリックして下さい。
この部分は投稿欄などの指定を行うところです。
この部分の<$postsubject$>の前にイメージタグを入れます。


投稿欄のタイトルのイメージを2つ表示する方法_a0031863_22215924.jpg

図2 HTML編集 本文



HTML本文編集

<DIV CLASS=POST>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD WIDTH=80%><img src="イメージURL" ><$postsubject$></TD>
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=1$></TD></TR>
</TABLE>


イメージの位置をずらすには、以下のように位置の相対指定を利用されると良いですよ。



HTML本文編集 イメージの位置をずらすには

<DIV CLASS=POST>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD WIDTH=80%><img src="イメージURL" style="position: relative; top: 0px; left: 10px;" ><$postsubject$></TD>
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=1$></TD></TR>
</TABLE>



position: relative; 相対位置指定
top:0px;現在の位置から上にずらす量
left:10px;現在の位置から左にずらす量


CSS編集部分


すでに設置されている方は不要です。



CSS編集部分

DIV.POST_HEAD {

/*------------------ ここから追加 ---------------*/
background-image:url(イメージURLアドレス);
background-position:left; /*イメージ配置位置*/
background-repeat:repeat-y;/*イメージの繰り返し*/
/*------------------ ここまで --------------------*/
}




今日のポイント
  • CSS編集で投稿欄のヘッダのイメージを設置し、HTMLでワンポイントのイメージを設置することが可能です。

  • 画像の位置は相対指定を行うことによりずらすことが可能です。こちらの記事を参考にされると良いと思います
    ■新しい投稿にはNewの表示を・・・




難易度:★

ぽっと

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-12-11 08:45 | │├投稿欄
<< サイドバーの1ポイント(バック... 眠れない夜は、流れ星を見つけに・・・ >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。