投稿欄のタイトルのイメージを2つ表示する方法
投稿欄タイトルのバックグランドイメージを指定しているともうイメージを表示できないと思っている方はいないでしょうか。もし、そう思っている方はこの技を試して下さいね。
通常はCSSでバックグランドのイメージを指定していますが、HTML編集でイメージを追加して表示することにより、バックグランドイメージの上にワンポイントとしてプチイメージを表示することが可能です。
今回は私が作った素材で試してみました。
HTML編集部分
この部分は投稿欄などの指定を行うところです。
この部分の<$postsubject$>の前にイメージタグを入れます。
<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>
<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編集部分
DIV.POST_HEAD {
/*------------------ ここから追加 ---------------*/
background-image:url(イメージURLアドレス);
background-position:left; /*イメージ配置位置*/
background-repeat:repeat-y;/*イメージの繰り返し*/
/*------------------ ここまで --------------------*/
今日のポイント
- CSS編集で投稿欄のヘッダのイメージを設置し、HTMLでワンポイントのイメージを設置することが可能です。
- 画像の位置は相対指定を行うことによりずらすことが可能です。こちらの記事を参考にされると良いと思います
■新しい投稿にはNewの表示を・・・
難易度:★