2009年06月12日の記事一覧 - 詳細表示

http://www.geocities.jp/for_you_jpn/banner/wikieditor.png
Wiki エディタ Neo とは、初心者でも簡単にWiki文法を使って、記事が書けるお助けツールです (^^
※ 最新版は、ダウンロード 書庫にあります。

第８回：高度な Wiki タグの背景を追う (^^

前回のあらすじ

前回は『高度な Wiki タグの横幅』に関する二つ目の謎を解き明かしました

https://s.yimg.jp/images/mesg/emoticons/7/26.gif

忘れてしまった方などは↓を読んでください

https://s.yimg.jp/images/mesg/emoticons/7/77.gif

第７回：高度な Wiki タグの横幅の謎②♪

で、今回は『高度な Wiki タグの背景』を詳しく追いかけて行きます。

https://s.yimg.jp/images/mesg/emoticons/7/43.gif

まえがき

『高度な Wiki タグの背景』を理解するには、Yahoo! ブログ特有の『コード変換』について
前もって、知っておいて頂かなくてはなりません。

ですから、『コード変換』ってなに

https://s.yimg.jp/images/mesg/emoticons/7/7.gif

という方は、↓の記事を読んでから、本記事を読み進めて頂くことをお勧めいたします。
Wiki エディタ Neo のコード変換機能について♪

では、さっそく参りましょう♪

背景に画像を表示する

使う画像は、↓これ 64×64 の大きさです。

https://s.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif

文字列の背景に画像を表示する一番単純なサンプル♪

||<#FFFFFF' style='background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''文字列の背景に画像を表示する一番単純なサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

例	プロパティ名	値	単位	説明
background-image:url(アドレス);	background-image	url(アドレス)	なし	背景に画像を指定

※ アドレスは、http: のどれか一文字を『コード変換』する必要があります。

どうです、背景に画像が表示されましたか

でも、このままではしっくりきませんよね。

セルの高さを背景の画像に合わせる

セルの高さを背景の画像に合わせたサンプル♪

||<#FFFFFF' style='height:48px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''セル？の高さを背景の画像に合わせたサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

例	プロパティ名	値	単位	説明
height:48px;	height	48	px	セル？の高さを 48 ドットに指定

あれ、ちょっと待ってください

https://s.yimg.jp/images/mesg/emoticons/7/104.gif

確か、画像の大きさは、64×64 でしたよね？

セルの高さと文字領域の高さ[ height ]の関係

文字領域の高さ[ height ]＝セルの高さ－（（上辺＋下辺の境界線の幅）＋（上部＋下部の余白））

という関係になっています。

これに、先ほどの例を当てはめてみます。

求めたい値は、文字列の高さ[ height ]
セルの高さは、画像の高さである 64
境界線は、指定していませんので 0
余白は、Yahoo! ブログ標準の 8

文字領域の高さ[ height ]＝64－（（0＋0）＋（8＋8））
文字領域の高さ[ height ]＝48

ここまでは、問題ありませんよね

https://s.yimg.jp/images/mesg/emoticons/7/76.gif

では、ついでに横幅も指定してみましょう

セルの横幅[ width ] を画像が途中で切れないように合わせる

セルの横幅を背景の画像に合わせたサンプル♪

||<#FFFFFF' style='width:496px;height:48px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''セルの横幅を背景の画像に合わせたサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

なぜ、横幅[ width ] が 496 なのかは、ご自分で考えてみてください

https://s.yimg.jp/images/mesg/emoticons/7/102.gif

ということで、今回はこれにて終了です

次回をお楽しみに♪

By 優（ゆう）

https://blogs.yahoo.co.jp/IMG/ybi/1/a9/f8/for_you_jpn/home/imgnick?1195791711

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

優（ゆう）の良品

過去の投稿日別表示