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

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

改行のある文字列の背景に　画像を表示するサンプル♪　by優（ゆう）

||<#FFFFFF' style='word-spacing:537px;font-size:12px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''改行のある文字列の背景に　画像を表示するサンプル♪　by優（ゆう）'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

[ word-spacing ] の値は、↓の記事を読めば分かりますね

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

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

どうです、改行のある文字列の背景に画像が表示されましたか

でも、このままでは、納得できませんね。

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

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

改行のある文字列でも　セルの高さを背景の画像に合わせたサンプル♪　by優（ゆう）

||<#FFFFFF' style='height:112px;word-spacing:537px;font-size:12px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''改行のある文字列でも　セルの高さを背景の画像に合わせたサンプル♪　by優（ゆう）'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

[ height ] の値は、↓の記事の応用です。
第８回：高度な Wiki タグの背景を追う♪

文字領域の高さ[ height ]＝
画像２個分の高さ－（（上辺＋下辺の境界線の幅）＋（上部＋下部の余白））

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

高さについては、マスターできましたよね

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

では、横幅もこの調子でがんばりましょう

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

改行のある文字列でもセルの横幅を画像が途中で切れないように合わせる

改行のある文字列でも　セルの横幅を画像が途中で　切れないように合わせたサンプル♪

||<#FFFFFF' style='width:304px;height:112px;word-spacing:295px;font-size:12px;background-image:url(http＆＃58;//i.yimg.jp/i/jp/mesg/v6/site/func/tout_hiddenface1.gif);' ``'''改行のある文字列でも　セルの横幅を画像が途中で　切れないように合わせたサンプル♪'''||
※ ＆＃は、本来は半角ですが、ここでは全角になっています。

[ width ] の値は、↓の記事
第６回：高度な Wiki タグの横幅の謎①♪
[ word-spacing ]の値は、↓の記事の応用です。
第７回：高度な Wiki タグの横幅の謎②♪

横幅[ width ]＝画像5個分の幅－（（左辺＋右辺の境界線の幅）＋（左側＋右側の余白））

横幅[ width ]＝64×5－（（0＋0）＋（8＋8））
横幅[ width ]＝304

横幅[ word-spacing ]＝
画像5個分の幅－（文字の高さ×0.75＋（（左辺＋右辺の境界線の幅）＋（左側＋右側の余白）））

横幅[ word-spacing ]＝64×5－（9×0.75＋（0＋0）＋（8＋8））
横幅[ word-spacing ]＝295

上の式、正しくは

横幅[ word-spacing ]＝64×5－（12×0.75＋（0＋0）＋（8＋8））
横幅[ word-spacing ]＝295

です。。。(^^;　[ 2009/06/17 更新 ]

れんれんさん ありがとうございます m(_ _)m

『禁断の背景ワールド』、お楽しみいただけましたか？

https://s.yimg.jp/images/mesg/emoticons/7/66.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

優（ゆう）の良品

過去の投稿日別表示