<< サイドバーの1ポイント(バック... 眠れない夜は、流れ星を見つけに・・・ >>
 

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


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

a0031863_16152717.jpg

図1 設置例


HTML編集部分

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


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の表示を・・・




難易度:★

ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-12-11 08:45 | │├投稿欄 | Trackback | Comments(16)
トラックバックURL : http://potto.exblog.jp/tb/1398555
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by snowy2465 at 2004-12-15 01:27
こんばんはっ!
ほんとその通りで、バックグランドイメージを指定しているともうイメージを
表示できないと思ってました^^;;
早速試してみたところ、タイトルにアクセントがつきました。
いつも、ありがとうございますm(__)m
Commented at 2004-12-15 08:20
ブログの持ち主だけに見える非公開コメントです。
Commented at 2004-12-15 19:24
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-12-15 22:20
>すのさん、こんばんは^^
いつもコメントありがとうございます。
すのさんのコメントにいつも助けられたり、励まされて頑張っています。
早速試して頂けて嬉しいです。

>鍵さん
そちらにコメントしました^^
Commented at 2004-12-16 00:06
ブログの持ち主だけに見える非公開コメントです。
Commented by potosu_kaorimk at 2004-12-16 15:12
★ お返事有難うございました。
また、よさせて頂きます。
Commented by aok_dm at 2004-12-16 23:52
こんばんわ。お久しぶりです。

今度、この技使おうかな~と思っているのですが、
ひとつ質問がございます。
イメージとテキストにちょっと段差ができてしまうのは
どうにかならないですかね?
自分なりにかんがえるとMARGINかPADDING指定で
どうにかするのか、TDにValign指定をかけるかの
二つぐらいしか思い浮かばないのですが・・・

ぽっとさん、お願いします!
Commented by potto37 at 2004-12-19 08:59
☆みなさんへ
仕事が忙しくて、やっと入ることができました。
コメントの方は順番に書いていきますのでしばらくお待ち下さい。
Commented by potto37 at 2004-12-19 09:03
>鍵さん
お返事はそちらにコメントしましたのよ^^

>potosu_kaorimkさん
コメントありがとうございます。
これからも、ゆっくり遊びに来てくださいね。

>aok_dmさん、こんにちは^^

イメージとテキストの段差ですが、どのような常態かわからないのですが、MARGINかPADDING指定が一般的でしょうか。
あと行の高さを調整する方法と併用する。イメージの方で調整する方法(加工OKの場合)、フォントサイズを変える等が考えられます。
うまく出来るといいですね。

参考アドレス
http://www.htmq.com/style/index.shtml#tex
Commented at 2004-12-19 22:39
ブログの持ち主だけに見える非公開コメントです。
Commented by aok_dm at 2004-12-20 03:45
こんばんわ。
忙しい中、コメントありがとうございます。
参考アドレス&ご説明いただきありがとうございます。
がんばって調整してみます。
Commented by potto37 at 2004-12-20 22:44
>鍵さん、お返事はそちらに書いておきました^^

>aok_dmさん、こんばんは^^
こちらこそ、コメントありがとうございます。
がんばってくださいね。
Commented at 2004-12-22 00:36
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2004-12-23 21:51
鍵さん、了解しました^^
Commented by naminichidori at 2005-10-01 23:51
はじめまして。いつもスキン編集の勉強をさせていただいています。
今回は、こちらの記事を参考にさせていただきました。
タイトルに、かわいらしいイラストを付けられて、とてもうれしいです。
また、こちらの記事ではありませんが、コメント欄の幅を広くするのも
こちらを参考にさせていただきました。
これからも、よろしくお願いいたします。
Commented by potto37 at 2005-10-02 21:37
naminichidoriさん、はじめまして。
いつも来て頂いてありがとうございます。
いろいろお役に立てたようで嬉しいです。
こちらそこ、よろしくお願い致します。
<< サイドバーの1ポイント(バック... 眠れない夜は、流れ星を見つけに・・・ >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。